Why are we attributing so much power to the CSS design and forgetting that there is the HTML?
This article was written a couple of years ago after realizing that lots of people, specially web developers, were attributing too much power to the CSS design, almost forgetting that there was the HTML markup behind.
This is a very old post; I've decided to republish it because I can make exactly the same remark today. Anything changed. Worst: as the CSS3 properties are arriving at the same pace that HTML5 is getting defined, the confusion has grown bigger and the distinction between markup and style are getting thinner than ever for some.
If you take the style off, what's left?
When the most popular browsers began to support the version 2 of the CSS specs, — of course, a support with an acceptable level of compatibility between browsers — the web world faced then one of its biggest revolutions. We've found that the style-sheets were super cool: it defined and controls the page layout, it positioned the page content, and it defined colors, fonts and image backgrounds! Genius! All of a sudden, the style-sheet was doing everything and we, well, we were so “blinded” by its powers that we've just forgot the most important thing in a web page, the markup. Yes, because if you take the styles out, what's left is the markup. And it is precisely the markup, the “matrix” of our pages, the one and only responsible for the success of our web products. “Ouah... that's a bit of an exaggeration, isn't it?”, I hear you saying. But no, it isn't.
Ok (I've promised I'd not talk about it but...), we all remember of one of the greatest advantages of the CSS design: it allows us to separate the content from its presentation. And why it is so important? Because it is thanks to that that we can reuse our code and make it evolve, avoiding the rework and getting the most from our initial efforts and investments. What we've done today will be reused, and reused, again and again, and it will evolve with the web technologies in a simple, easy way. Bahhh! False! All those wonderful promises of having a reusable and accessible content proved to be empty. It is obviously not enough to have the all-mighty style-sheet, of course not.
The style-sheet can be modified, it can be expanded, it can be reduced, and it can be emptied and deleted. We don't care. It is not the style-sheet that holds the content, the data, and it is precisely the data that we must cherish, it is precisely them that must be accessible by all user agents and shared by other applications, not the style-sheet.
So, why so many fuzz with the style-sheet? And why so few attention to the markup?
You see? We won't be able to keep and reuse our code anyway. Our content won't be identifiable and accessible by other systems or applications: no semantic or content structure will lead to difficulties in content targeting. If you cannot target a specific content, you cannot manipulate it.
Maintenance will be a chaos either. A time consuming chaos will be the consequence of the “cascading” errors that often occurs with bad markup. I'd say: “Why bother? Let's get some old version of FrontPage to build our next site.” Honestly, it is almost the same thing.
“The CSS... huuum... I don't know it much...”
Surely, most of the time problems come exclusively from a bad, corrupted markup. Nonetheless, some people still credit unnatural powers to the CSS, like those of clairvoyance, for example: in fact, some expect it to guess the way we want a content to be displayed, no matter how it was structured. For example, if we take the following markup:
<p>a paragraph with a <h1>level1 title in it</h1> <h2>and of level2 </p></h2>
The markup above is not just invalid, it is also illogical: why would somebody try to put a title inside a paragraph? What are we trying to do here? A medium wouldn't be able to answer the logic behind this portion of content or how to display it. The CSS wouldn't either. So, the responsibility goes to each user agent. They will have to torture themselves to interpret (or to ignore) the errors and to recreate its own logic. One thing is certain: we can't control all the display or behavior issues that this portion of markup will have to face.
Love Thy Code
The way we write our markup is the most sensible point of all the content/style separation philosophy. Think of your code HTML as the foundations of your house. You can change once a year the wall papers, you can paint your windows each three years, you can change all the furniture every month if you like, but you cannot easily modify the foundations of your house, not without big efforts, lots of time, and lots of money.