4 ms·
layouts in CSS are easy while relationships between elements are simple. CSS is a poor solution for layouts that require complex constraints between elements th
by ux-app 12y ago
layouts in CSS are easy while relationships between elements are simple. CSS is a poor solution for layouts that require complex constraints between elements that have no direct child/parent or sibling relationship. Think application layout as opposed to brochure website layout.
Also, CSS is quite silly. Why do I set margin:auto when I want to horizontally center something? The tricks we all learn to muscle CSS into doing what we want require a ridiculous kind of mental gymnastics. Layout should be declarative and separated from simple presentation such as color etc.
Another fault of CSS is its relationship to HTML source order. This makes designs inherently brittle in the sense that simple HTML changes can require a CSS overhaul.
CSS selectors also have their issues. Yes they're powerful and can be used to great effect, but there are holes such as no parent selectors. Here's an interesting proposal that hilights the usefulness of this feature [2]
As soon as we reach the limitation of CSS (and in a complex application layout you'll reach them quickly) then you have to reach for JS and basically create your own little layout engine!
The people developing GridStyleSheets [1] are on to a really good thing. They are working on a JS adaptation of the Cassowary constraint solver (the same one used in Apple's autolayout feature). If you're interested in finding out more, check out their website. They do a good job of illustrating CSS's shortcomings and they have a working solution to address these issues.
[1] http://gridstylesheets.org/ http://gridstylesheets.org/
[2] http://shauninman.com/archive/2008/05/05/css_qualified_selectors http://shauninman.com/archive/2008/05/05/css_qualified_selec...