How To, Tips and Tricks - Written by Mat on Monday, August 18, 2008 19:45 - 0 Comments
7 Principles Of Clean And Optimized CSS Code
[excerpted from SmashingMagazine by Tony White]
Note for my students: especially #s 1, 2 and 6 I’ve spoken about in class frequently - if you have questions about any of this over the coming week - ASK!
But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. 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. You may already be familiar with some of the principles mentioned below, but they are worth a review. Being familiar with this concepts will help you write optimized CSS code and make you a better all-around web designer.
1. Use Shorthand
Using shorthand properties is the single easiest practice you can do to cut down your code (and coding time). There’s no better time than the present to start this efficient coding practice, or to review it. Margin, border, padding, background, font, list-style, and even outline are all properties that allow shorthand (and that’s not even an extensive list!).
2. Axe the Hacks
But now we know that using conditional comments to serve hacks correctional declarations for IE6 and IE7 is an accepted practice, even recommended by the Microsoft IE development team. Using conditional comments to serve IE-specific CSS rules has the added benefit of serving a cleaner, and therefore smaller, default CSS file to more standards-compliant browsers, while only those browsers that need the hackery daiquri (i.e. IE) will download the additional page weight.
3. Use Whitespace Wisely
Whitespace, including spaces, tabs, and extra line breaks, is important for readability for CSS code. However, whitespace does add, however miniscule it may be, to page weight. Every space, line-break, and tab you can eliminate is like having one less character.
4. Prune Frameworks and Resets
If you’ve chosen to use a CSS framework (including ones you’ve written yourself), take the time to review the documentation as well as every line of the CSS file. You may find that the framework includes some rules that you don’t care to use for your current project, and they can be weeded out. This goes for resets as well.
5. Future-proof your CSS
However, I’m warming up to the idea of separating layout styles from the rest of the styles, and giving layout it’s own file, or at least it’s own section.
6. Document Your Work
Documentation, including markup guides and style sheet guides, is not just for group efforts — they are just as important for a one-man design team. After all, a year after working on other things, revisiting one of your own projects can feel quite foreign. Your future self might appreciate reminder of how your CSS grid framework is supposed to work, or what pages already have a treatment for a secondary action form button, and it will save you or someone else from appending redundant and unnecessary rules to your CSS.
7. Make Use of Compression
Some great applications have been created to compress and optimize CSS for you, allowing you to serve a human-unreadable but still browser-friendly files that are a fraction of the origional working copies.
[Read the article in its entirety at Smashing Magazine]
Quick Lists
- IMD223: Advanced Scripting (SU08) »
- IMD345: UCD Integration (SU08) »
- Independent Studies (SU08) »
- IMD213: Intermediate Scripting (SP08) »
- IMD322: Dynamic Design (SP08) »
- IMD335: Usability Testing (SP08) »
- IMD213: Intermediate Scripting
- IMD322: Dynamic Design
- IMD335: Usability Testing
A Little Reading Music
Yummy Delicious
Meanwhile on Flickr ... [Web Ultimate Pool]
Reading Recommendations
- Beautiful Web Design by Jason Baeird
- The Future of the Internet and How to Stop It
by Jonathan Zittrain - The Namesake by Jhumpa Lahiri
- The Overcoat and Other Short Stories
by Nikolai Gogol - We The Living by Ayn Rand
- Everything is Miscellaneous by David Weinberger
- Danny The Champion of the World by Roald Dahl
- PHP for the World Wide Web by Larry Ullman
- Advanced PHP for the World Wide Web
by Larry Ullman














Leave a Reply