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.

1
2
3
4
5

/*----------------------*/
/*-----Comment-----*/
/*----------------------*/

These lines of code do the same as:

1

/*Comment*/

You can still read what it says and what tips it gives. The only thing you did is saving space.

Color prefixes

With some ‘standard’ colors it is possible to write their prefix in a shorter way.

1
2
3

color: #ffffff;
color: #ff88ff;

This prefix’s will do the same as:

1
2
3

color:#fff;
color:#f8f;

Prefixes with all different characters can’t be written shorter. You have to use the same prefix there. For example:

1

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.

1
2
3
4
5
6
7

padding-left:10px;
padding-right:20px;
padding-top: 0;
padding-bottom:30px;

Those codes can be written as simple as this:

1

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:

1
2
3
4
5
6
7

padding-left:10px;
padding-right:10px;
padding-top: 0;
padding-bottom: 0;

This can be written like this:

1

padding:0 10px;

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.

1

padding: 10px 0px 0px 0px;

Is the same as:

1

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 the other 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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;

1
2
3
4
5
6
7

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!

Hadjeu!

There are many ways to enhance and learn new ways of doing thing like in old days people only use to trust on HTML coding for making websites. But in today’s world new courses like 220-602, tools and techniques have been introduced like CSS style sheet: which can be reused to add consistency in all the WebPages. For dynamic website people now make and maintain proper database. If you have any experience in the data base or want to enhance Oracle database administrator skill then 1z0-042 certification is perfect choice for you. If you are interested in Cisco networking certification then go for 640-802 courses. After that in order to secure your network 642-523 is best option for you. If you are interested in VOIP services and devices along with networking course then 642-432 will make a good combination. You can also opt for many other courses like 642-176 but select the one according to your interest.