Stupid, stupid CSS

Posted by james on July 24, 2008

I've been making webpages for so long now, and I remember when I first started learning CSS. At first it seemed confusing; a whole separate and more complicated language for specifying colors, fonts, and sizes for webpages when we already had perfectly fine HTML. Slowly, it started to make sense; it was like a macro language for HTML, except one that actually gave some benefit. Declare a class, make some changes, and every title on your webpage changes color. You could even do layout with it, which was awesome.

But I've since become disenchanted with CSS. It was amazing when all the big browsers started to support the main items, but there's always been compatibility issues. It's gotten to the point where no matter how simple a CSS change is, there's a good chance that it'll break something on your website due to some crazy browser bug. But there's something even worse than bugs; intentional quirks.

CSS has so many strange little quirks that were intentionally put in, it boggles the mind. One annoying one is the box model. So you want a box on the page 500 pixels wide. Easy!
<div style="width:500px;"></div>
So easy! Now add some borders:
<div style="width:500px; border:10px solid black;"></div>
And wait... now it's 520px wide. What happened? The great CSS designers decided that when you wanted to specify the width, you really meant the content. So there's really no way to specify outside width, you have to hack it. How in the world is this useful? It's completely counter intuitive, but worse yet it prevents you from building relatively easy constructs unless you nest block inside block with some crazy CSS to get around this very simple thing.

Next, we have margins. Let's make a box:
<div style="width:200px; height:200px; background:silver;"></div>
Great! It's a 200 x 200 box. Now let's add a smaller box that's 10px away from all edges, which by default should end up in the upper-left side:
<div style="width:200px; height:200px; background:silver;"><div style="margin:10px;"></div></div>
All of the sudden, CSS makes a great "optimization" for you: the margin is removed from the inside box and transferred to the outside box. How... asinine. There are all sorts of explanations that go over why this is "correct", why it's desirable, how to get around it, blah blah blah. The bottom line is that it's behind the scenes magic that CSS does, totally counter intuitive, and hard to work around. You have to introduce all sorts of border, padding, and margin hacks to get around it.

But for a language designed from the outset to make sense, why should we have to *get around* anything?? Many of these Intentional CSS Bugs were justified from the standpoint of a content-oriented, layout agnostic mindset. If text is king, then who cares if you can't specify box widths in pixels... just set a text size and let it wrap! Who cares if you can't float items and center at the same time, or vertically center *anything*, or set margins explicitly. Just let CSS collapse margins as it sees fit, in a way that really only makes sense for a Paragraph-tag-loving non-designer who believes lynx was the climax of browser development.

I'm not a fan of implicit, behind-the-scenes languages. Even when they mean well, what they really are is unpredictable. With a more explicit language, you have to type out a lot more but then the language does what you tell it to! CSS is an implicit language designed by text-loving monkeys, and not the good kind. If you were designing CSS, wouldn't you have said to yourself, "If we do this small and strange optimization, it really only helps a few people and will screw up everyone else. Maybe we should just give people an option to do tricky things if they want to." Instead, we have the giant bag of crap that is CSS.

I think we need a new language. One that doesn't force users into a bunch of buggy tag soup that masquerades as standards-compliant pseudo-semantic-web markup. Let's just make a language that allows you to tell the browser what you want it to do... and it does it! Want a box 500px wide? You got it! Want to add borders inside? Done! Want to add margins? Margins added, with nothing else removed or added unless you tell it to. Let's make an explicit, totally intuitive language that is under the control of the developer, not the language standards body. Developers know what they're trying to build, and just want the tools to build it. Standards bodies should be transparent, and simply give the developers better and cleaner tools, not try to force them into a certain mode of designing and then try to justify their crimes with the omnipresent "Well, no you can't do that. But you really shouldn't be doing that anyway. Why not do this instead?"

I don't want to do that instead. I don't want collapsed margins, buggy box models, lame standards non-compliance or CSS3 + HTML5 + Tag Soup 6. I want explicit, intuitive web language (EIWL). Maybe I should just do everything in Flash instead...