What are the potential problems with using this system to layout web pages? [closed]

Question

Frustrated by the many limitations and compatibility issues of CSS, and finding myself constantly needing to write javascript code to get my webpages to layout the way I wanted, I thought I might be able streamline future projects by ditching CSS altogether 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 for superficial styling.

Here is an example. (press the button to inflate the layout. tested in latest version of all major browsers.) And another.

This system degrades gracefully to plain html, and even allows for separate styling in the case that javascript is disabled.

It seems to me that this approach not only eliminates many cross-browser issues, but also allows me to achieve more complex layouts with less work. For example, my understanding is that the following cannot be done with CSS alone, at least not without a mess of nested divs:

1. Set an element to fill available width or height within its parent container. (This is not the same as width/height:100% if there are other elements in the parent container.)
2. Align any element top/center/bottom, left/center/right within any container, even if its size is unknown.
3. Pad an element of unknown size, without increasing that elements size (For example, if a div is set to 100% of the window size, it cannot be padded without overflowing the window.)
4. Automatically set all elements within a parent element to be equally spaced apart.
5. Set the height of a floating element. Similarly, independently set shrink-wrapping behavior horizontally and vertically.
6. Set elements to float in columns rather than rows (CSS3 seems to support columns but browser compatibility is not good)

Nonetheless, I'm sure this is considered blasphemous. So, what are the potential problems with using this system to layout web pages?

EDIT: the code is on github

Answer 1

You are, essentially, trying to rewrite CSS, in a way that you feel does the job better than CSS. This can be fine -- maybe it works for you -- but you will face limitations.

The rest of the world uses CSS. It is usually easier to get one person (you) to learn and follow a standard than to try to get the rest of the world to learn and follow your standard. If you develop with anyone else, instead of being able to bring their knowledge of CSS and HTML to the table, they'll have to learn your method of web development.

If you go to work elsewhere, you'll either have to convince them to be able to bring your method to the table, rather than use the world standard of CSS (this generally doesn't fly in the corporate environment), or you'll have to then learn how to use CSS properly.

If you look to get help from anyone else (such as here on stackoverflow), you won't be able to, since everyone else uses CSS. But if you have issues with CSS, we'll be able to help.

That is why it might be considered "blasphemous". I'm sure you wrote this question intending to receive feedback on the potential technical problems with that approach, but I think the political/community problems are just as important.

Answer 2

You have invented a more powerful system for laying out pages. You should note that CSS already has draft specifications of other such systems:

• Template Layout
• Flexible Box Layout (FlexBox)
• Grid Layout
• Grid Template Layout
• Multi-column Layout
• Box Alignment
• Exclusions
• Regions
• Positioned Layout

Here is a January 2013 overview of these proposals, the followup to a 2011 overview.

These specifications are only drafts. Some of them will probably end up being be scrapped or merged with other specs. A few browsers already implement portions of these specs, usually behind vendor prefixes.

Though you can't reliably use these features in your CSS today, you should consider these specs' designs when writing your library. You should copy the parts of their designs that offer powerful layout tools, or that are clean and future-proof.

It may even be best to, instead of writing your own JavaScript library and XML syntax, just use existing JavaScript polyfills, such as these (not an exhaustive list):

• css-template-layout
• CSS Template Layout
• Flexie
• Grid Layout Polyfill
• CSS3MultiColumn
• FTColumnflow
• CSS Regions polyfill

You would use polyfills like these in conjunction with CSS using the draft's syntax.

Even if these polyfills are not full-featured or stable enough to use, you might be able to call them from your library, or at least copy some of their code.

Answer 3

"Frustrated by the many limitations and compatibility issues of CSS, and finding myself constantly needing to write javascript code to get my webpages to layout the way I wanted" suggests you've either been using CSS wrong, or have not actually put in enough time learning the ins and outs of CSS to make it do what you want (setting up good, universal CSS is hard, -just like programming JS- and there are a million ways to do it wrong - just like programming JS).

Your example seems to work based on a 100% height page. This is actually relatively easy once you set html and body to height:100% for instance. Once you do that, h/valigning of boxes becomes really easy.

Then, in answer to your question: doing all your styling using JS calls will be much more expensive than using CSS, so I strongly suspect your solution will perform far worse than a good CSS, or CSS+JS, solution. Browsers have extremely optimised code for performing CSS-triggered reflows, and doing the same thing in JavaScript is several times slower. Using JS for specific styling because CSS is lacking a feature, like doing box aligning like your example, is usually a necessity, but everytime you run it, it'll have to rerun the full algorithm in JS code, rather than using the native compiler much-faster reflow libraries that might available for some -or all- of the layout you want to achieve.