[HN Gopher] Optimize CSS with SAT Solving
___________________________________________________________________
Optimize CSS with SAT Solving
Author : keepamovin
Score : 75 points
Date : 2024-03-17 16:38 UTC (6 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| keepamovin wrote:
| I lazily didn't want to refactor my CSS myself, so after a failed
| attempt using ChatGPT for this, I found this CSS sat solver tool.
|
| Just a note on macOS I managed to get this work by:
| - Editing the pyproject.toml and changing - lxml version to
| 5.1.0 - python to ^3.8 - then running poetry install
| - then, also in the repo, running cd satcss && ln -s $(which z3)
| z3 - then poetry run satcss --help
|
| I may have skipped a step or 2 but that was basically it. I then
| used satcss' output with this tool
|
| https://css.github.io/csso/csso.html
|
| to beautify and further organize it
| b33j0r wrote:
| I was similarly surprised that gpt4 can't do this. I have
| nearly started over on full-stack applications because my css
| got out of hand, haha.
|
| This is pretty much exactly what I was looking for!
| micromacrofoot wrote:
| same, it's funny how bad chatgpt is at css... in my
| experience it can't even do simple css refactors
| matsemann wrote:
| Your comment highlights why distributing anything that's python
| is unfortunately nearly impossible.
| scholaronroad wrote:
| Very cool!
| spencerchubb wrote:
| I would like a tool similar to this, but for refactoring in a
| human-readable way instead of minifying. Some tool to
| automatically look for duplicated css code. In theory, it seems
| easier for css than for actual programming languages given the
| simplicity
| ToValueFunfetti wrote:
| CSS is Turing complete, although you could probably handle
| 99.9% of real world cases without dealing with that.
| hinkley wrote:
| Last time I was leaving front end there were rumors of css
| coverage tools. That would certainly be a start.
| gbickford wrote:
| It's a thing in Chrome Dev Tools now:
| https://developer.chrome.com/docs/devtools/coverage/
| alserio wrote:
| now, if only it could persist the data while navigating to
| other pages, it would be a lot more useful
| niutech wrote:
| Is there an online version?
| the_other wrote:
| It's not clear to me from the readme why this is useful.
|
| .a and .b identify different groups of elements. The fact they're
| both coloured red is incidental, circumstantial and likely
| temporary. Refactoring to save a couple of lines makes the code
| less deleteable and thus harder to maintain.
| andful wrote:
| I would treat this tool similarly to a minifier. It reduces
| size and bandwidth at the cost of legibility. It should be a
| stage in the deployment pipeline, but not a way to format your
| own code.
| holoduke wrote:
| Add it to a bundler like parceljs. Minifies and optimizes for
| production. Our dev css file is 40kb. Optimized production
| version 10kb (example)
| ape4 wrote:
| Wouldn't gzip will remove redundancy when it sends the compressed
| .css file.
| Dlanv wrote:
| It's still saving probably a single byte in this example
|
| .a { color: red }
|
| .b { color: red }
|
| Also it saves on parsing time I suppose. And less to zip and
| unzip.
|
| The type of thing I'd add to a projects deployment stage and
| never touch again unless it causes an issue.
| afavour wrote:
| Still takes time to parse and apply the styles though.
|
| CSS is probably a much smaller concern than JS but in the world
| of 5G networks and fast WiFi I feel like we're nearing a world
| where device CPU can be a bigger bottleneck than bandwidth at
| times.
___________________________________________________________________
(page generated 2024-03-17 23:00 UTC)