See how a flaw in a language (css f.e.) leads to a problem in expressing a need

Language shapes the way we think and determines what we can think about. See how flaws in a language leads to a problem in expressing our needs:
“CSS tries to do two things - style, and layout. Now the styling, for the most part, it succeeds at. You can pick font sizes, colors, add borders, whatever you want, and it’ll probably be OK. Ignoring of course the numerous cross-browser issues which we’ll skip over today. Layout, on the other hand, is a mess. […] Layout happens between two or more things. If your layout language is about properties per-object, you have failed completely. […] CSS only knows about nouns and adjectives, and so defines a language that can only express one object at a time. The concepts it can reason about are limited by that.” F.e.: “In CSS, if you want to express that something should be on top, we are forced to invent an artificial property, the Z-index. The Z-index integer normally should exist only as an internal implementation detail, but it gets exposed out to the web designers simply because CSS has no other tools to express that concept with. It’s trapped by the language of properties, something that works well for style but not for layout.”

http://www.codersnotes.com/notes/a-note-on-layout-language/

2 Likes

The biggest critic of the article just doesn’t hold up to well anymore. CSS grid does imho solve exactly the issue mentioned in the article. It allows to layout children via properties on the parent. So it’s handling not just the relationship of two elements, but any number of children. Contrary to the article it’s still implemented in css, though. Also I’d argue that a layout language based on relationships between explicitly two things does not really scale all to well, when with dynamic content we deal way more often with zero to many or one to many or otherwise not fixed numbered groups of elements.

Additionally I’d like to make the point that people often seem to forget when criticising CSS is that it was created for styling html documents; and “documents” are first and foremost layed out by their content within some external boundry (browser / paper / you name it). A good comparison might actually be how Word or OpenOffice works. They also don’t use axis besides if you’re manually moving content out of the main flow e.g. into some floating textarea or some table. So the following just sounds like the author didn’t really understand what he’s dealing with, even though he might make some valid points in his conclusions.

Ah, CSS. Perhaps the only 2D layout system ever invented that forgot to include the Y-axis.