Highly Maintainable, Efficient, and Optimized CSS
Download the slides for my presentation on maintainable and efficient CSS for Think Vitamin’s HTML & CSS online conference, as well as get links to related resources on CSS development best practices.
Earlier today, I gave a presentation at Think Vitamin’s HTML & CSS Online Conference entitled “Highly Maintainable, Efficient, and Optimized CSS.” I tried to squeeze as many tips as I could in to cover how to create CSS that is well organized and readable for teams to work on together as well as you to maintain later, while still keeping efficiency in mind. The slides are up on Slideshare, but you can also download them in their full glory here:
Highly Maintainable, Efficient, and Optimized CSS (PDF, 1 mb)
Here are links to just a few of the hundreds of related resources I could link to!
Maintainability
- Be a CSS Team Player: CSS Best Practices for Team-Based Development
- Best Practices – CSS Stylesheet Formatting
- Object Oriented CSS
- Dust-Me Selectors
Resets
Sprites
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
- CSS Sprites Workflow
- CSS Sprites: Useful Technique, or Potential Nuisance?
- The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
Performance
- Best Practices for Speeding Up Your Web Site
- Let’s make the web faster
- Performance Advent Calendar 2009
- Don’t use @import
- Conditional comments block downloads
- Efficiently Rendering CSS
- Performance Impact of CSS Selectors
- Different CSS techniques and their performance
CSS compression
- HTTP Compression
- Minify
- Drop-in .htaccess file
- Code Beautifer
- CSS Compressor
- CSS Compressor
- CSS Optimizer
- CSS Tidy
- YUI Compressor
Stunning CSS3: A Project-based Guide to the Latest in CSS
Flexible Web Design: Creating Liquid and Elastic Layouts with CSS
Thank you for the sharing!
[...] This post was mentioned on Twitter by ?Chris Adams? and Viljami Salminen, Olof. Olof said: Highly Maintainable, Efficient, and Optimized CSS http://bit.ly/cCAm9A #css #webdesign [...]
[...] zomigi.com » Highly Maintainable, Efficient, and Optimized CSSzomigi.com [...]
[...] zomigi.com » Highly Maintainable, Efficient, and Optimized CSS [...]
[...] zomigi.com » Highly Maintainable, Efficient, and Optimized CSS [...]
[...] zomigi.com » Highly Maintainable, Efficient, and Optimized CSS [...]
Hey Zoe, I watched the on-line conference and really enjoyed your talk… thanks for everything!
Thanks Mark! Glad to hear it.
[...] zomigi.com » Highly Maintainable, Efficient, and Optimized CSS [...]
[...] zomigi.com » Highly Maintainable, Efficient, and Optimized CSS [...]
[...] zomigi.com » Highly Maintainable, Efficient, and Optimized CSS [...]
[...] zomigi.com » Highly Maintainable, Efficient, and Optimized CSS [...]
[...] zomigi.com » Highly Maintainable, Efficient, and Optimized CSS [...]
[...] zomigi.com » Highly Maintainable, Efficient, and Optimized CSS [...]
[...] zomigi.com » Highly Maintainable, Efficient, and Optimized CSS [...]
[...] zomigi.com » Highly Maintainable, Efficient, and Optimized CSS [...]
[...] zomigi.com » Highly Maintainable, Efficient, and Optimized CSS [...]
[...] zomigi.com » Highly Maintainable, Efficient, and Optimized CSS [...]
Thank you very much, excellent guide!
[...] more: zomigi.com » Highly Maintainable, Efficient, and Optimized CSS 31 August 2010 | Uncategorized | Trackback | del.icio.us | Stumble it! | View Count : 0 Next [...]
This presentation has some really good ideas. I always did an #ieroot div, but I like the suggestion to put add an html class and adding a special character for searching.
I think understanding inheritance is a huge part of making efficient css though. If I had a nickle for every stupid redundant selector that a contractor stuck in one of our style sheets..
Thanks for making this available. I was not able to participate in the Think Vitamin conference. I have been thinking a lot about workflow and seen many articles recently about optimizing files for better speed. I got a lot out of your presentation and look forward to integrating it into my workflow and sharing it with others in my office.
I like many of your ideas for managing the mess that is CSS. Although it’s better than the bad old days of font tags and such, CSS is overly complicated and lacks important, practical and logical features. Major complaints for me are the specificity rules( i.e, time wasted having to deal with the fragile order of weighting ), the lack of sensible layout and behaviors, and no means to really reuse declarations easily, say, with variables.
The very fact that so many articles exist on overcoming difficulties with CSS shows how bad it is. Couple this with the poor support among browsers, the bugginess of browsers when they do support it, and the fact that it is ultimately tied tightly to the document structure for all but the most trivial layouts( sure, you don’t HAVE to care about the structure, but then you get literally 1000s of rules doing hacks like negative marings, etc. ) makes it painful to deal with.
I think my biggest issue with CSS is the smugness that many people display, deriding people for “not understanding it”. Note, I am not implying this about you, so please don’t take offense. It’s others in the community at large that I’ve encountered. It is confusing and takes far more effort to deal with than it should, even if you learn every quirk. Because it does, some use this as a badge of cool to buffer their egos. That shows them more the fool, because knowing a poor technology well does not make that technology better. It just means you wasted valuable time overcoming needless deficiency.
Sorry for ranting… :-/
[...] zomigi.com ” Highly Maintainable, Efficient, and Optimized CSS (zomigi.com) [...]
This is one of the finest article which combines the best known practices together, to me it’s must have favorite for any UI developer. Thank you!
[...] zomigi.com ” Highly Maintainable, Efficient, and Optimized CSS (zomigi.com) [...]
[...] Highly Maintainable, Efficient, and Optimized CSS – Zoe Gillenwater [...]