Simple CLI Tool for Optimizing Your CSS Files | Hacker News Reader

Simple CLI Tool for Optimizing Your CSS Files

github.com

6 pointshapper64bit6 comments

This is not how CSS works: padding-right + padding-left are not equivalent to `padding: 0 something`, that 0 is overriding existing padding from the element.

The whole tool should be scrapped. I suggest working on code for PostCSS/cssnano instead of doing search and replaces.

Is it that what it does?

I thought it just finds things like

padding-left: 10px;

padding-top:20px;

padding-right:30px;

and combines them to one

padding: 20px 30px 0 10px;

That’s what it does, and that’s wrong. Unspecified properties are not equivalent to 0.

Example of code that this tool breaks:

    p {
      margin: 10px;
    }
    aside p {
      margin-left: 0;
      margin-right: 0;
    }

This is turned into `aside p {margin: 0}` and that’s not what the authored CSS meant at all.

Then the author didn't grasp the complexity of CSS

I made a small command-line tool called `style-eyes` to help you optimize your CSS files. It combines properties like padding, margin, and background into shorthand forms. This can help reduce the size of your CSS files and make them easier to manage.

You can clone it from my GitHub and try it out: [happer64bit/style-eyes](https://github.com/happer64bit/style-eyes).

Would love to hear your feedback or suggestions! Thanks!

- Github: https://github.com/happer64bit/style-eyes

I don’t want to disparage your work, OP, but micro-optimizing text files is often not very effective, especially after gzip. I’m curious to see if there’s any noticeable difference for a representative gzipped CSS file (since these assets are almost always served from a CDN with compression).

Reply on news.ycombinator.com