It’s time to ditch CSS… Thoughts?

CSS, in my opinion, has always been an awful system for laying out pages… almost absurdly so. There are so many aspects of the specification that simply do not make any sense (like how vertical padding and margin are relative to the width of the parent… what?), to the point that every time I try and use CSS I begin to question the sobriety of whoever came up with it. Almost anything you try and accomplish using CSS requires some sort of workaround involving nested divs, and ultimately you have to resort to javascript for certain features. Add to this the fact that it is implemented inconsistently across browsers, and that each browser requires some prefix for css properties (which means almost any of the new CSS3 features have to be written 3-4 times) and the result is a giant mess.

So I decided to try a little experiment. Since I end up using javascript anyway to accomplish most layouts, I thought I might be better off ditching CSS altogether, at least for page structuring. I wrote a javascript library which parses layouts specified in XML files, and applies them to an HTML document using absolutely positioned and sized, non-nested divs. So the idea is that each page has an HTML file containing all content, an XML file specifying how that content should be arranged on the page, and a CSS style sheet used only for superficial styling.

here are a few examples (tested in the latest version of all the major browsers):
[URL=”http://sandbox.pursuebeauty.net/yule/”]Example 1[/URL]
[URL=”http://sandbox.pursuebeauty.net/yule/”]Example 2[/URL]
Resize the window to see the responsiveness of the system.

The way I see it, internet/computer speeds are fast enough these days that if you can specify a layout system that works exactly how you want it to, and will render the same across all platforms, in under 50kb, why not? Why remain a slave to the major browsers ability to implement a system that was poorly designed in the first place?

The most powerful part of this system is that anytime I want a new feature, I can simply implement it myself: I don’t need to wait for the next CSS spec. And so far, in addition to designing my spec in a way that actually makes sense, I’ve added some very useful features not found reliably in CSS, such as:

[LIST]

Finally, the system is accessible and degrades gracefully such that if javascript is disabled, the user will still have access to all of the content.

So what are you’re thoughts on this method. Any possible pitfalls? Documentation for all of the features, as well as the source code are on [URL=”https://github.com/madisonbrown/yule”]github[/URL].

Also in #CSS _↴