Cascading


It’s possible to criticise CSS for solving the wrong set of problems. Whilst I am talking about CSS here, I am not talking about that. CSS has been an undeniable success in terms of removing a heap of cruft from HTML. I don’t think people should be happy to stop at that though. There are problems.

Anyway, I’ve written a fair amount of CSS in my time. At least, I’ve written enough CSS that there’s a chance that I’m partly responsible for the great wad of legacy CSS that you hate working on every day.

If I might quote Toad from the claymation movie version of Wind in the Willows

I’m not sorry so it’s no good saying I am.

At one point in time a front-end developer working on legacy code would be staring at a vast sea of nested tables created by a tool such as FrontPage - trying to figure out where in that sea they needed to add their code such that it won’t cause the layout to barf table everywhere.

These days it’s just as likely that a front-end developer will be working on legacy code and be starting at a vast sea of my CSS trying to figure out what last-minute 2am bug report had prompted the use of so much “!important”.

Actually, it’s worse than that. These days it’s just as likely that as a front-end developer you will be working on a vast sea of your own legacy CSS… written only three months ago. The thing with CSS is that most of it is legacy as soon as it’s written. This is not a criticism of people writing CSS, I’ve seen people with good ideas put a lot of thought into the best way to maintain CSS with good results. I just don’t think CSS is really helping those people solve their problems.

Let’s say that you decide to write new CSS to replace somelegacy code. What’s the usual approach?

Start with a blank file, insert standard browser reset code and off you go.

I can’t think of another coding discipline where even proficient, thoughtful coders achieve so little reuse from project to project.

Now, in the time since I last wrote any large amount of CSS that somebody else has had to work on, I’ve seen a lot of promises about the latest trend in writing or organising CSS. Indent it this way, indent it that way. Put these comments in. Group by specicifity. Group by function. Break it down this way. Break it down that way. Make it Object Oriented!

Yup… I heard that news about using component based architecture for CSS. Component based architecture makes a lot of sense. I still bet the next time you work on a completely new project you start with an empty file and CSS every single line from go to woe without reusing more than half a dozen classes from the last project you worked on.

It’d be nice if a component based approach actually resulted in front-end developers being able to compose a new site from an existing set of components. It’d be nice if there was, I dunno, meta-CSS.

Unfortunately, I can’t see that happening. Instead, it seems that some front-end developers love writing CSS selectors so much that the only thing they wish to change about that particular 4GL is the lack of variable spaghetti to add to their CSS minestone. I don’t think variables would help.

It looks like developers love those selectors so much that they’ve transported them and the development technique wholesale to other places such as JavaScript where instead of ever writing an abstraction or component themselves they start with a blank file, a selector engine and… well, you know… potato programming all the way. It looks like that because it is like that. The reason? CSS encourages it.

Just like SQL… Just like XML. CSS - and the attached mindset - seems to be one of those things that’s frequently over-applied and relied on too heavily in places where it either doesn’t belong at all or should only be a small component. There’s nothing wrong with supporting XML in a programming language but there’s definitely something wrong when XML becomes the programming language. Similarly, there’s nothing wrong with supporting CSS selectors in Javascript but there’s definitely something wrong when CSS selectors become the programming language.

Some may disagree, but I think that as a developer, I shouldn’t be trying to make everything else look like what I’m familiar with… instead I should be trying to make what I’m familiar with better. I think CSS could be better and I don’t think much more ground can be gained whilst the language remains as it is.



CoffeeScript in Action


CoffeeScript in Action book cover

I'm the author. Get it from Manning.