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.


3 thoughts on “CSS Architecture – Less is Good

  1. Usman Ilyas says:

    kool … i am also learning a bit of style sheets stuff these days (in my free time … when i really have nothing to do 🙂 )

  2. Jaffer says:

    Cool! I can never really learn anything just for fun … only learn it it I HAVE to learn it 🙂 Try http://www.alistapart.com (linked above), it’s a very nice site about CSS and web design in general.

  3. sabaqahmad says:

    thanx buddy for information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: