CSS Architecture – Less is Good

Was handed the task of deciding on how to organize CSS for a project. Since the site is already up and running, with 5 different stylesheets for the entire thing (don’t ask), and we were supposed to redesign the organization of the CSS, so I thought, hey, lets just follow how it’s being done right now.

So I google for half a day, reading through various blogs and articles. Architecting CSS and Redundancy vs Dependancy were a good read. I’m sure there’s some good stuff on A List Apart as well, though I didn’t get a chance to have a look. :/

Anyhow, I come up with a long and complicated proposal about how we should separate the CSS into 6 different files, based on different tag categories (based on the stuff I’d read online …), e.g.
layout.css has styles for <div>, <span>, <iframe> etc …
tables.css has styles for … duh … <table>, <tr> etc …

After deliberating over the design for a few hours, people with more experience in CSS said that I should go for the 1 stylesheet per UI look and feel instead of having 6 files for the entire thing. It would needlessly complicate managing styles.

I guess this is a common mistake made by people relatively new to CSS. Unlike other programing paradigms, in CSS, simplicity is good. Rather than having things modularized, decoupled, OODified etc etc, your concentration should be on deciding proper rule inheritance and re-usability. Organization over multiple files comes second to good rule selection and distribution.

My rule of thumb is that if you have > 3 stylesheets for 1 look and feel, you’re doing something wrong. Rethink. Beware the 3+ eyed CSS monster.

---

Possibly related posts: (automatically generated)

• Standards Compliant Web Development Starter
• Link CSS class ignored in IE – quick fix