Friday, April 30, 2010

CSS vindication

Jeff Atwood agrees with me that CSS should not be used for layout.


...even if you have extreme HTML hygiene and Austrian levels of discipline, CSS has some serious limitations in practice.

Things in particular that bite us a lot:

* Vertical alignment is a giant, hacky PITA. (Tables work great for this though!)


Wikipedia thinks so too!. Take that, ChristianZ and Pherdnut!

6 comments:

Dan said...

Ron, I think you're right that CSS is not great for layout. But I happen to be pretty good with it. (disclaimer: I used to work for you crafting CSS.) One thing that strikes me as very odd in the whole CSS-is-not-good-enough argument is this:

People don't write HTML anymore. Especially not on a database-driven site like stackoverflow. People write pre-processing languages like HAML. Jeff goes on to mention SASS (which I use everyday) which obviates the latter two of his complaints entirely.

Just because we use other languages to generate HTML doesn't cause us to say that HTML is awful. Why then has it taken longer for CSS pre-processors to enter the fray, and why is their existence seen as proof that CSS is inadequate?

As for vertical alignment, I don't have trouble using CSS to accomplish what I want in a straightforward manner. Of course there will be trade-offs pitting any two formatting strategies against one another. We could pick out examples of either category and point to them and say, "See? The other strategy is worse at producing this result" but the so-called holy grail of 3-column CSS layouts is actually not a great design and can be achieved with CSS if needed. Besides obscure cases like that, using float/clear and position absolute/relative is really all there is to using CSS for layout.

Ron said...

> People don't write HTML anymore.... People write pre-processing languages like HAML.

Don't know HAML, but it looks like nothing more than HTML with a pythonic syntax. One of these days the world may come to realize that inventing new lexical conventions for writing S-expressions is not actually a technological advance.

> Just because we use other languages to generate HTML doesn't cause us to say that HTML is awful.

It's unfortunate that Jeff complained about lack of variables and nesting along with the inability to achieve certain kinds of layouts because these problems are in completely different categories. The first two are easily fixable by treating CSS as object code and layering another language on top of it. There are likewise lots of "missing" features in HTML that are easily added by layering a more capable language (e.g. the myriad HTML templating languages) on top of HTML and writing a little compiler.

CSS's layout problems are in a completely different class. These problems cannot be solved by layering because CSS fundamentally lacks the ability to do certain kinds of layout, and in particular, it lacks the ability to do table-like layout. No amount of layering can fix that. It's kind of like if HTML lacked an IMG tag. No amount of layering would allow you to display images in HTML in that case.

Dan said...

> Don't know HAML, but it looks like nothing more than HTML with a pythonic syntax

If that's true then PHP is nothing more than HTML with perl syntax and ERB is nothing more than HTML with ruby syntax the view code of GWT is nothing more than HTML with Java syntax, etc. That doesn't stop these tools from being incredibly useful because they give the developer the ability to use variables and control flow statements to create an HTML document.

> new lexical conventions for writing S-expressions is not actually a technological advance

I'm not saying this to tell you about what I think is a new technological advancement. My point is just that these templating languages are the industry standard, but it's taken a lot longer for CSS templating languages to gain prominence.

I think your point is that there are a collection of things CSS can say and things it can't say. And no combination of CSS, no matter how convoluted, can say the things that CSS can't say. Since tools like SASS just allow developers to more easily manage and manipulate these combinations of CSS they don't actually give the language any more expressive power.

I think our opinions differ because I don't find myself wanting to express the things that CSS can't while you do.

I debated whether or not to actually post this last part. I'm not doing it to try to prove you wrong, I understand your point. I just thought it might be interesting to know a work-around for this example.

> No amount of layering would allow you to display images in HTML in that case.

Removing the IMG tag wouldn't prevent people from displaying images, just make it much more difficult. I assume that we also wouldn't be able to use flash or canvas or SVG or any of the other work arounds in those categories, just vanilla HTML elements. I could write a script (on the server or client) that would decompose an image into an HTML table of cells that are 1px by 1px with background color set to whatever the pixel color in the image was. Would be quite a bit of layering, but wouldn't be impossible. ;)

Ron said...

> I think your point is that there are a collection of things CSS can say and things it can't say. And no combination of CSS, no matter how convoluted, can say the things that CSS can't say.

That's exactly right.

> That doesn't stop these tools from being incredibly useful because they give the developer the ability to use variables and control flow statements to create an HTML document.

That's exactly right too :-)

> I could write a script (on the server or client) that would decompose an image into an HTML table of cells that are 1px by 1px with background color set to whatever the pixel color in the image was. Would be quite a bit of layering, but wouldn't be impossible. ;)

That's really twisted. I doff my hat.

BTW, I thought the work you did on the Virgin Charter site was terrific.

Dan said...

> I thought the work you did on the Virgin Charter site was terrific.

Thank you. By the way, I am living in San Francisco again. Did you mention you were moving up here? It would be fun to grab dinner sometime if you are around.

Ron said...

> Did you mention you were moving up here?

Yep. Beginning of June. Would be great to get together.