Create smaller CSS files
This article will tell you how to make your CSS files a bit smaller. You can ask yourself one question; Why shouldn’t you? Read on to find out how to do this.
There are only advantages of making your CSS files some smaller. When your website uses a 5k CSS file, you might not see the difference in loading time, but when using bigger (25k) files, you can notice your website will load a bit faster when using some of the steps below. Another thing is that your file will become more organized and clean. Read on to get tips of improvement.
The main idea of this article is to reduce the number of characters you have used in your CSS. The less characters, the smaller your file.
Comments
You have different ways of using comments. Comments may be something you can not delete in your CSS, because you might forget something (or your fellow-workers). But, there are a couple ways of using them.
/*———————-*/
/*—–Comment—–*/
/*———————-*/
These lines of code do the same as:
/*Comment*/
You can still read what it says and what tips it gives. The only thing you did is to save space.
Color prefixes
With some ‘standard’ colors it is possible to write their prefix in a shorter way.
color: #ffffff;
color: #ff88ff;
This prefix’s will do the same as:
color:#fff;
color:#f8f;
Prefixes with all different characters can’t be written shorter. You have to use the same prefix there. For example:
color: #f8f7f2;
Use one line of codes instead of a couple
When you are coding a website by hand, you’ll often first use the ‘padding-left:5px;’ attribute and some time later a ‘padding-top:10px;’. You can write all those in one line of codes.
Padding-left:10px;
padding-right:20px;
padding-top: 0;
padding-bottom:30px;
Those codes can be written as simple as this:
Padding: 0 20px 30px 10px;
When your padding left and right is the same, and top and bottom too, you can do something else too. Example:
padding-left:10px;
padding-right:10px;
padding-top: 0;
padding-bottom: 0;
This can be written like this:
Padding:10px 0;
The same rule applies to margin attributes too. You may also try the same thing with backgrounds, borders and fonts
You can leave out the ‘PX’ when value is ‘zero’
There’s some logic in this. 0px is the same as 0em or 0pt. We can use just the ‘zero’ here, which will give you another 2 characters of profit.
Padding: 10px 0px 0px 0px;
Is the same as:
Padding: 10px 0 0 0;
Defining your ID’s and classes
You might have very long ID or Class names. For example, you can name them ‘HeaderMiddleLeft’, but you can also name them something like this, ‘HeaderML’. Sometimes, when using one CSS file with different people, this isn’t very handy, but when your CSS file is for private use, you can shorten those ID’s or classes.
#HeaderMiddleLeft becomes #HeaderML.
Clean up your CSS file
An often overlooked ‘tip’ is to clean your CSS file. Sometimes, I’ve got an idea, but later on, I’ve got a better idea, so I will take that way. In this coding process, you might create ID’s or classes you don’t use in the final design. You can just delete them!
Create just one element when using the same content in different elements
You might have the a couple elements in your file, with the same content inside it. Those items can be placed ‘inside’ each other. Not clear what I mean? Take a look below to view an example.
h1{
margin:0;
padding:0;
}h2{
margin:0;
padding:0;
} h3{
margin:0;
padding:0;
}This three elements does the same as simple ‘one’ element;h1, h2, h3{
margin:0;
padding:0;
}
Conclusion
On a 25k CSS file, using this small tips could make a difference of more then 5k in size. This means your CSS file, with the same contents, will be loaded 20% faster. This is pure profit. I hope you enjoyed reading this article and watch out for the next one!
Tags: cascade style sheet, color prefixes, consortium, CSS, div, elements, files, smaller, tag, validate, w3c