Learning to write clean, optimized CSS takes a lot of practice and an unconscious, compulsive desire to clean. Keeping your CSS tidy isn't just about your crazy psychological need to be clean, though, especially for larger sites, it will make pages load faster. Faster load times equate to improved usability and higher user satisfaction.
Many people have code fetishes. This isn't a bad thing.
This article will round up techniques you can use to optimize your CSS, as well as some online and desktop compression tools that can automatically compress your code.
To compress or not to compress
Before we discuss how to compress CSS, it’s important to note that there is often a balance between compression and code readability. Many coders pride themselves on the clean organization of their CSS and don't want their code to be run through a compressor to remove comments and line breaks. As a designer, you should analyze the goals of the code you write. If you are creating a small website that only requires a few lines of CSS, there may be no need to do additional compression. Likewise, if you're writing code that needs to be shared with an open team, inserting extra comments and line breaks can save your colleagues a lot of time and earn their sincere thanks. However, if you are designing a large website that requires a lot of CSS, you will definitely want to pay attention to your file size and keep it as small as possible.
It may take some time to find the perfect combination between compression and possibility, but they are both worth exploring and achieving a balance between them can make your job a lot easier. At the same time, it is obvious that compression does not necessarily lead to a decrease in readability. There are many techniques available for compressing code that result in better and more organized code.
With that in mind, let’s start by looking at some techniques for keeping CSS files minimal.
Blank style definition
Let's start with the obvious. If you have a blank style, discard it. Don't make excuses that you might need them later and you know they are messy. Don't add them unless you have a valid reason.
abbreviation
CSS abbreviation is a way to combine multiple lines of CSS into a single line. Getting into the habit of using all the abbreviation tricks you know can significantly reduce the number of lines of code you end up writing. Here is an example:
Long version:
#container{padding-top:5pxpadding-right:10pxpadding-bottom:30pxpadding-left:18px}Abbreviated version:
#container{padding:5px 10px 30px 18px;}To learn more about CSS abbreviations, you can visit the following articles:
CSS Sprites
The original idea behind CSS sprites was to reduce the number of HTTP requests to speed up page load times. The way Sprite achieves this goal is to combine multiple images into a single image file, usually a grid-formatted image. Each individual image is displayed by switching the background-position of the larger sprite image. For CSS code, using sprite technology can greatly improve the reusability and maintainability of the code, which will significantly reduce the amount of CSS code.
To learn more about CSS Sprites, check out Chris Coyier’s tutorial on CSS-Tricks:
Of course, Front-End Observation also has some valuable articles and tips about CSS Sprites.
Reduce comments
I like using comments in my code. The more comments I add, the faster I can visually navigate different parts of the code. However, if you need highly optimized CSS that uses few resources, excessive comments will eat up precious bytes. So, try to remove all unnecessary comments and reformat the ones you must keep to as few bytes as possible.
Reasonable font type (font-Family)
When file size is a big issue, don't include alternative fonts in your font-famly. Get rid of any unnecessary baggage and reduce your extra options to one or two.
Before:
#container{font-family:Palatino,Georgia,Times,serif;}after:
#container{font-family:Palatino,serif;}Regarding fonts, I strongly recommend reading "Three Talks about Web Default Fonts" written by Yu Bo. Several articles mentioned in the article are also worth reading and thinking about.
Use hexadecimal color
In order to reduce the number of bytes, all RGB color values are converted into their corresponding hexadecimal values. This may not mean much to begin with, but any byte is worth it!
Before:
#container{color:rgb(131, 100, 219);}after:
#container{color:#8364DB;}Remove line breaks
Go through each style attribute and remove any hard returns that are not needed. You can also remove the last semicolon.
Before:
#container{margin:5px;padding:5px 10px 30px 18px;}after:
#container{margin:5px;padding:5px 10px 30px 18px}10 Online CSS Compression Tools
CSS minifiers can automate much of the work of cleaning up your code. Many of them will tell you what percentage of your files are compressed, so try a few to see which one is best.
CSS Drive
Options:
Compression mode: low, normal, high compression
Comment compression: no compression, all, or longer than a certain value.
CSS Compressor
Optional options (you can choose Yes or No for each):
Rearrange attributes
Compress color
Compress font-weight
Lowercase selector
Remove unnecessary space
Remove unnecessary semicolons
Arantius
Optional options (you can choose Yes or No for each):
Remove comments
Remove comments that are at least x bytes long
One rule per line