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

Resets

Sprites

Performance

CSS compression

Did you like this?

28 Responses to “Highly Maintainable, Efficient, and Optimized CSS”

  1. snatchdracula

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

    Reply
  2. Jeff Bridgforth

    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.

    Reply
  3. Significant Other

    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… :-/

    Reply
  4. Clay Mannings

    Thanks for sharing this!

    What is your position on resets? I can’t tell by this page or your PDF. It seems very balanced :-)

    It’s good that people write about maintainability. If ever I hear from it only by Harry Roberts or Jens Meier. (Not sure how known they are)

    Reply

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>