Sunday, October 6, 2013


So a lot of what I do at work ends up being targetted for the web. Despite me thinking web programming is a blight on humanity. Realistically, I've managed to abstract away the web-ness of most of it behind some decent libraries, so I can pretend it's not the web. But occasionally I have to actually write some HTML and CSS.  And let me tell you, my opinion is that CSS is AWFUL.

Here's why:

1. It's unintuitive and inconsistent.

I'm not talking about the general concept, or the block model. Sure, you have to learn those. But they aren't hard. I'm talking about stupid stuff like vertical-align, which means two completely different things depending on the context. In a table cell, it means one thing. In an inline element, it means something completely different. 

Or absolute positioning. One would think positioning of "absolute" instead of "relative" means positioning the element absolutely. Instead, it's just a different type of relative, technically: "In the absolute positioning model, a box is explicitly offset with respect to its containing block" ...or in other words, it's relative to some parent above it. (W3Schools states it as "An absolute position element is positioned relative to the first parent element that has a position other than static.")

It also kills me that specifying a width of 100% for an element gets really messy if there's a margin or padding. Because the padding is included in the 100%, but the margin isn't. Or maybe it's the other way around? I'm sure CSS junkies remember. Normal humans don't. All I know is that percentage widths break down when margins and padding are around. 

Now I know people that are used to CSS will defend many of these things, but having used a large number of other layout toolkits in other programming environments, none of them make me scream and pull my hair out like CSS does.

2. No grid layout.

Why, oh why, isn't there a grid layout? Maybe because the table html element already exists, which is a perfectly good grid layout. Oh wait, all presentation-related code is supposed to be moved to css, and tables should only be tables of data.  Unfortunately, there's no real replacement for tables for grid-based layouts. So for a layout that should naturally be a grid (ie a form of labels and text fields), you end up with a mess of absolutely sized nested divs or other ridiculous workarounds.

People have come up with all sorts of hacks and frameworks to get around this issue. Great, we can hack our way past it. It's still terrible design.

3. It replaces one set of hacks and problems for another set.

When people first got all excited about separating content from presentation, it seemed like a good idea. Unfortunately, HTML and CSS are terrible at letting you actually do so for any vaguely interesting design.  So either your presentation bleeds into the content (37 divs for a piece of content, just so the header, header corners, edges, etc, can all fit together to make it look right), or you end up with all sorts of hacks and nastiness in CSS and Javascript frameworks to try to trick your browser into doing something it wasn't designed to do.

So what can we do about it? Not much, unfortunately. The web is what it is. All sorts of CSS and javascript framework are written to try to make it easier. I guess you can use one of those. Or maybe just avoid web programming in general, that seems more pleasant.

1 comment:

Charleh said...

Agreed. That is all!

NNNNNN in 12 hours

I recently announced my NESdev competition entry for this year: NNNNNN , a multiplayer NES port of the Gravitron from VVVVVV .  Now that it&...