Cascading Layout Sheets

Ok, so here's the history of building web pages:

1. Everybody makes pages in HTML
2. People realize that HTML is a clusterfuck and that you really shouldn't be tying styles to your content.
3. People invent CSS for style.
4. People start putting the content in the HTML and the style in the CSS, and things run a little smoother.
5. People realize that HTML is still a clusterfuck, because you really shouldn't be mixing your content with your layout.
6. People decide to cram the layout into the CSS
7. It doesn't work, and it leaks over into the HTML.
8. Now HTML and CSS are both clusterfucks.

Now, if you look at things this (incredibly biased and slanted) way, it's pretty obvious that the current situation sucks. Putting tables and rows all over your HTML sucks, and so does putting wrappers all over your HTML and then bending your CSS over backwards to attempt to achieve the same effects. Furthermore, in all likelihood, it is unlikely that you can get the effect you want using either of the possible two solutions. At least, not without a whole lot of suffering.

Now, if you look at that nifty little list up there, you can pretty clearly see the problem. Number 6 should have been "People invented layout sheets for layout". Then, 7 could have been "People put the layout there", and 8 would have been "and all was well and good". But, alas, it was not so.

The point is that yes, it sucks to have the layout in with the content. But it also sucks to have the layout in with the style. And it sucks even more to have it leaking in both.

What we need is some sort of layout language, with which we can design Cascading Layout Sheets to augment our CSS and HTML. Then we can keep our designs simpler, and all will be well and good.

So, one of these days, I plan on making such a language myself (although I'd be much obliged if someone else did it first). Here's what I'm thinking so far. Keep in mind, this is all pure speculation.

• Use CSS-like syntax. Makes life easier.
• You can tell an element to stick one of its sides to the side of another element.
  • You could tell a footer to stick its bottom to the bottom of the window:
    #footer { bottom: window->bottom; }
  • You could tell a notice window to stick to the top-right corner, offset two ems:
    #notice { top: 2em parent->top; right: 2em parent->right }
  • You could tell a button to hang just below a module:
    #button { top: 2em #module->bottom; }
  • By default, if the element declaring is contained by the element it is sticking to then the element is internal. Otherwise, it's external. For example, #footer was contained by window and #notice was contained by parent, so those were internal. Assuming that #button was not contained by #module, button hangs externally. This could be overridable. For example, to make #button hang just inside #module in the last example, we could say:
    #button {bottom: 2em #module->bottom internal; }
    The button's bottom is two ems off the inside of the module's bottom.
• You could set expandability to say how divs take up available space
  • If #left has expandability: 1; and #right has expandability: 2; and they were contesting for screen realestate, then #left would take up one third of the available space, and #right would take up two thirds.

Alright, so that's what I've got. There's my idea. I plan on adding to it later, maybe even whipping up an implementation in the form of a firefox extension or something. I'm sure that there are better ways to do it that have already been thought of, and seriously, I would love to hear them. I don't really have any particular interest in doing this myself, I'd just really like to see the history of building web pages end with something other than a clusterfuck.