Simple CLI Tool for Optimizing Your CSS Files

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

by happer64bit • 2 years ago

6 6 2 years ago

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

sureIy2• 2 years ago

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.

croes2• 2 years ago

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;

sureIy2• 2 years ago

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.

travisd• 2 years ago

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).

Simple CLI Tool for Optimizing Your CSS Files

Related Stories