Jun 3 '08

How To Write Modular CSS (a teaser)

Okay, so I’m not actually going to tell you how to do that… yet!

The blog has been quiet for a few days, so this is just a little hey, how’s it going type of post, but it’s also serving as an announcement for my loyal readers reader. Over the next few weeks, I’ll be posting a series of 3 or 4 posts on the importance of and logic behind writing more modular and scalable CSS.

You can think of this as yet another “framework” if you like, only I don’t believe in frameworks. In my view, frameworks lead to exactly what they sound like… framed designs. You end up with cookie cutter work that’s at the whim of someone else’s logic. Not to mention the fact that most frameworks are insanely bloated because they have to account for a variety of use cases that you as a designer or coder probably have no use for. You end up with a CSS file itself that’s 100k when it could be 30 or 40. Why punish your visitors with that kind of nonsense?

So, to make a long story short, I’ll be posting a few consecutive articles that give a little insight into my process of writing a style sheet: why I organize things the way I do, how I create modules that can be reused in a variety of ways without writing redundant code, and how to optimize your sheet so that edits are easy and coding is kept to a minimum. The idea here is that if we can come up with two beautiful designs, but one is 300k and takes 500 lines of code, and the other is 150k and takes 250 lines of code, the latter is better.

Web design and development is only partially about the user-facing portion. Don’t believe anyone who tells you “as long as the user is happy, who cares”. That’s a load of nonsense, and is the fastest way to code yourself into a corner.

So stick around… class will be in session shortly.

Leave Some Bon Mot