How to optimize CSS code?

Question

How should I go about optimizing CSS code? There's various CSS3 lines, like -moz- and -webkit-, border-top-left-radius, etc.. I believe bigger CSS files increase page load time significantly.

And another question: I've written quite some code, however some of it is left unused. I have over 2000 lines of CSS code, and I bet around 200-300 lines could be removed, perhaps even more. Is it worth revising all the code? It would take quite some time...

Chrome's dev tools can show you which CSS rules are not used... — Šime Vidas
– Šime Vidas, Commented Jul 21, 2012 at 17:31
If you make sure that the CSS files are cached (in the browser), it shouldn't be an issue regardless how big the CSS files are... — Šime Vidas
– Šime Vidas, Commented Jul 21, 2012 at 17:32
That is a good point, I do use a caching script. Although, the loading time would be longer for first-time visitors. First impression is the most important one, isn't it? — Jack
– Jack, Commented Jul 21, 2012 at 17:40
@Jack It's the content that counts. I regularly visit a bunch of sites that are really slow, but I still visit them because I like their content. :) (e.g. Zelda Informer, Replay Hub on Game Informer) — Šime Vidas
– Šime Vidas, Commented Jul 21, 2012 at 17:42

Dipak · Accepted Answer · 2012-07-21 17:49:56Z

4

GZip the files before uploading them on server

It will reduce the files size significantly

Edit: Effect of GZipping -

By gzipping the .css file on Bargaineering, its size dropped from 28.2K to 7.3K, a 74.1% savings.

edited Jul 21, 2012 at 17:49

answered Jul 21, 2012 at 17:31

Dipak

12.2k3 gold badges32 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikola K. · Accepted Answer · 2012-07-22 12:13:32Z

2

always remove the last semicolon:

body { background: black; color: white; }
to
body { background: black; color: white }
combine multiple properties:

.class { margin-top: 10px; margin-right : 20px; margin-bottom: 30px; margin-left: 40px; }
to
.class { margin: 10px 20px 30px 40px; }
use simple colors (instead of `#FFFFFF, #AABBCC, #FF0000 put #FFF, #ABC, #F00)
the most important thing: minify your code before uploading on the server. It will remove whitespaces and comments and significantly reduce your code and file size.

edited Jul 22, 2012 at 12:13

answered Jul 21, 2012 at 17:33

Nikola K.

7,15313 gold badges33 silver badges39 bronze badges

3 Comments

Šime Vidas Over a year ago

margin:10 won't work (it only works with 0). Also, removing the last semi-colon is overkill.

Nikola K. Over a year ago

Thanks for the correction. Removed that. I've seen many suggestions about removing the last semi-colon, and I've never seen that someone said it's bad. However, I prefer to put semi-colon always. It's a habit + it's easier to add code later.

austincheney Over a year ago

Your left and right margin values are backwards, should be 10px 40px 30px 20px in the shortened example.

Wex · Accepted Answer · 2012-07-21 17:32:38Z

0

The smaller the file, the quicker it will download and the faster users can render the styles. There are various minifying scripts, I'd check out the YUI Compressor: http://refresh-sf.com/yui/

answered Jul 21, 2012 at 17:32

Wex

15.7k10 gold badges67 silver badges108 bronze badges

Collectives™ on Stack Overflow

How to optimize CSS code?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related