do we Need to Optimise Css

[walmslei]

I read some articles where they mentioned about CSS optimisation but didnt briefly. Will you anyone tell do we need to optimise CSS and if yes how we can optimise it?

Many Thanks

[tomda]

Optimising CSS means "make it shorter"

From this

#div.mybox {
margin-top:4px;
margin-bottom:4px;
margin-left:2px;
margin-right:2px;
padding-top:4px;
padding-bottom:4px;
padding-left:2px;
padding-right:2px;
font-weight:bold;
font-style:italic;
font-size:12px;
font-family: Times, serif;
background-color: #FFFFFF;
background-image: url(myimage.png);
background-repeat: no-repeat;
background-position: 0% 0%;
}

to this

#div.mybox {
margin:4px 2px 4px 2px;
padding:4px 2px 4px 2px; ;
font: italic bold 12px Times, serif;
background: #FFFFFF url(myimage.png) no-repeat 0% 0%;
}

[londrum]

and from this

#div.mybox {
margin:4px 2px 4px 2px;
padding:4px 2px 4px 2px; ;
font: italic bold 12px Times, serif;
background: #FFFFFF url(myimage.png) no-repeat 0% 0%;
}

to this

#div.mybox {
margin:4px 2px;
padding:4px 2px;
font:italic bold 12px Times,serif;
background:#FFF url(myimage.png) no-repeat 0 0;
}

managed to shave off a few more bytes

[lavazza]

It can be a bit 'academic'

esp if myimage.png hasn't been optimised

It might be smaller as a progressive jpeg or an interlaced gif

And... it will be (what's the antonym for optimal?) a waste of time (and money) if your code is ever going to be maintained by someone who doesn't know about or dislikes declaring margin, padding, border, etc attributes in one line, clockwise from top

[HarryM]

Also where possible combine elements, e.g.,

#div.mybox,#div.hisbox,#div.herbox{
margin:4px 2px 4px 2px;
padding:4px 2px 4px 2px;
background:#FFFFFF url(myimage.png) no-repeat 0% 0%;
}
#div.mybox{
font:italic bold 12px Times,serif;
}
#div.hisbox(
font:10px Verdana,sans-serif;
}
#div.herbox{
font:10px Arial,sans-serif;
}

You also save bytes if:
a) get rid of unneccesary spaces after ',' or ':',
b) remove comments,
c) put the styles on one line,
d) or better still put everything on one line.

You can get editors which do all this for you. The best way I find is to keep an intelligble original, and then produce an optimised copy for use on the site.

[Marshall]

HarryM,

Oops! You can shorten this "background:#FFFFFF" to this "background:#FFF" ;)

Just having fun, no offense. I think all this optimization is over rated.

Marshall

[lorax]

>> Will you anyone tell do we need to optimise CSS

Please define WHO/WHAT/WHY we would need to optimize CSS files - in your opinion.

[tomda]

I always try to optimize my CSS for only one reason...
That is clarity, shorter => easier to understand, track and modify.

I don't over-optimise, I rather prefer keep the comment for clarity than getting rid of comments.

Then, no other particular reasons why we should optimise CSS

[DrDoc]

If we're talking optimization ... let's not forget enabling gzip compression.

[lavazza]

gzip compression... Serious?

How big do your CSS files get?

[DrDoc]

I'm just saying ... if hardcore optimizing of your CSS files is a bandwidth saver, you best not forget to gzip all your stuff :)

[thecoalman]

Please define WHO/WHAT/WHY we would need to optimize CSS files - in your opinion.

For me it's for the people on dial-up, lots of people still using it here in the states. Trimming a few KB's off a CSS file by itself doesn't amount to much but if you do it for everything, especially images then you can trim more than few KB's.

As another poster mentioned it's also a lot easier to read, at least IMO.

There are exceptions to that of course, the CSS file for the new phpbb3 is a whopping 72K approx. Not sure of the exact figure because I started customizing before I looked. I already chopped off 22K simply by getting rid of redundancy.

[Xapti]

can you optimize something like this?

#joo .classe element1{}
#joo .classe element2{}
#joo .classe element3{}

or

#joo .classe .classe2.class3{}
#joo .classe .classe2.class4{}
#joo .classe .classe2.class5{}