smashingmagazine.com — Optimization isn’t just minimizing file size — it’s also about being organized, clutter-free, and efficient. You’ll find that the more knowledge you have about optimal CSS practices, smaller file size will inevitably come as an direct result of their implementation.
Aug 19, 2008 View in Crawl 4
dazparkourAug 19, 2008
I love optimized CSS when it's valid.<a class="user" href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/&profile=css21&usermedium=all&warning=1&lang=en">http://jigsaw.w3.org/css-validator/validator?uri=h ...</a>No, his page doesn't validate.23 errors including: "Value Error : color orangered is not a color value"
tapeworm77Aug 19, 2008
The HTTP spec only accommodates for downloading 2 files at a time, all others are queued. You'd be better off using 1 CSS file with comment delimited sections.
webmasternealAug 19, 2008
after awhile you just remember what they are, trust me
mtheoryxAug 19, 2008
I agree that CSS shorthand is a must; however, the whole "all on one line" thing is crap.What is more efficient is if you have a nice, indented, "human readable" CSS file that even a n00b to the team can understand...and then automate the removal of unnecessary whitespace with a script. Yes you have two versions...but you get the benefits of single line CSS while maintaining the readability of "normal" expanded CSS.
Closed AccountAug 20, 2008
Perhaps you mean "elegant" CSS. CSS is not code proper, and it sure doesn't make sense to talk about "optimizing" it.
kabadayiSep 4, 2008
Regarding shorthand properties, here's a tip for those of you that have a hard time remembering where to put top, right, bottom and left properties:Just think of it as a clock, so top (12 o' clock), right (3 o' clock), bottom (6 o' clock) and left (9 o' clock).It's a well known tip, but it really helped me to make it easier to "read" css fast so I thought I should share it. :)
elantrixSep 15, 2008
Also keep a copy of the css eg. style.css (compressed and used css), style_uncompressed.css (uncompressed and used to make changes), need to debug and make changes, call style.css to style_compressed.css and style_uncompressed.css to style.css... once you are happy, compress the css and rename the files once again.
jessica114Mar 20, 2009
This is a nice article - for the website I work on we have taken some of these a step further.. Using an Apache Perl handler we merge together multiple CSS files (on server start-up) into a readable CSS file for development and then a “single-line” minified CSS file for production. This allows (a) good documentation - each individual file has comments documenting all the CSS in it; (b) compartmentalisation - each CSS file has it’s own specific purpose; (c) easy re-development of one section of the CSS - to switch in and switch out styles <a class="user" href="http://www.craps-gambling.eu" rel="nofollow">http://www.craps-gambling.eu</a>
findhostcouponsMar 22, 2009
Being a beginning webmaster I know how it is important to have HTML code optimized properly! Hope that this story will be helpful for me as well! Thanks a lot!