To optimize your CSS files in Linux, I recommend to use CSSTidy, which is a CSS parser and optimizer. It allows to reduce the size of CSS files depending on various criteria, in order to make your web pages load faster.

How to Install CSSTidy

For an RPM-based distribution, launch the terminal as administrator (root), and run this command:

   yum install csstidy

For a Debian-based distribution, launch the terminal, and issue this command:

   sudo apt-get install csstidy

You can then launch the csstidy command via the terminal without parameters to get proposed options. 

Here are the proposed list of options you can execute: 

 --allow_html_in_templates=[false|true] |
 --compress_colors=[true|false] |
 --compress_font-weight=[true|false] |
 --discard_invalid_properties=[false|true] |
 --lowercase_s=[false|true] |
 --preserve_css=[false|true] |
 --remove_bslash=[true|false] |
 --remove_last_;=[false|true] |
 --silent=[false|true] |
 --sort_properties=[false|true] |
 --sort_selectors=[false|true] |
 --timestamp=[false|true] |
 --merge_selectors=[2|1|0] |
 --case_properties=[0|1|2] |
 --optimise_shorthands=[1|2|0] |
 --template=[default|filename|low|high|highest] | 

Here are some explanations:

  • compress_colors: it uses hexadecimal color codes (#000000, #00008B, etc) instead of black, blue, etc.

  • discard_invalid_properties: this option removes all invalid lines. This option may render your css file invalid, especially, when you have typing errors (wdth instead of width, for example). So pay attention to your CSS codes before using this option

  • preserve_css: it removes all comments if false option is selected, etc.

How to Compress/Decompress CSS Files

If you want to compress cascading style sheets (CSS), run simply this command:

              cat style.css | tr -d "\n" > compress.css 

To decompress cascading style sheets, run this command:

              cat compress.css | awk '{gsub(/{|}|;/,"&\n"); print}' > uncompressed.css

Post a Comment