CODEWITHSUNDEEP
optimizationcss
Jack
Jack

Reputation: 683

How to optimize CSS code?

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

Upvotes: 0

Views: 267

Answers (3)

Nikola K.
Nikola K.

Reputation: 7155

  • 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.

Upvotes: 2

Dipak
Dipak

Reputation: 12190

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.

Upvotes: 4

Wex
Wex

Reputation: 15695

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/

Upvotes: 0

Related Questions