[Stupid newbie probably OT philosophical musings] Does CSS need a mapping/composition layer?

After a 6-year hiatus from professional programming, I'm creating my 
first non-toy web application.  Read all the CSS books, keep up on the 
lists and the newsgroups, found the bugs and the hacks.  Tried to do a 
simple thing - create a form to enter a U.S. postal address - and hit a 
big philosophical brick wall.

I'm coming at page design from a different direction - I spent 12 years 
at AOL working on server-side apps.  Our forms layout engine had some 
simple primitives: everything belonged to either a horizontal or a 
vertical group, and every group had a vertical and horizontal alignment. 
   Labels were special, and you told them where to sit relative to the 
input field. By nesting groups, you'd create the layout you want.

That's actually not hard to replicate in CSS; I can create divs that go 
from horizontal to vertical depending on what their class is, and I can 
create labels that sit on top or to the left depending on their class. 
And they nest nicely and work in floated column layouts.

But that requires that I specify the class of each div or input field in 
HTML.  And that violates the separation of presentation and content.

(At AOL, we separated presentation from content by having developers do 
the basic grouping of content, and hand over the forms to designers who 
did pixel-perfect positioning for each individual client ("browser") 
version, country, language, and screen size.  That didn't scale so well 
either.)

Now, each input field has an ID, as do their surrounding divs.  So I 
could, in theory, either (a) repeat the "horizontal" or "vertical" CSS 
properties for each ID, or (b) find every ID on every page in my app 
that wants to be horizontal and put it all one in big selector.  Neither 
one of these is attractive, DRY or scalable.  And of course either one 
requires you to create non-semantic grouping DIVs to hang the CSS off of.

To my novice eye, what I want is a layer in between HTML and CSS that 
says (pseudocode):

   #firstname #lastname {group: horizontal; id: name;}
   #city #state #zip #country {group: horizontal; id: region;}
   #name #address1 #address2 #region {group: vertical; }

The HTML deals only with semantics and function, providing the ID of 
each field; the pseudocode above maps and composes those fields into 
layout groups; CSS-as-we-know-it specifies the style of each group.

That can't be done today with pure HTML and CSS; JavaScript could turn 
"group" into a DIV and set its class and ID, but you shouldn't need 
JavaScript for basic form layout.

I can't imagine I'm the first person to come up with this, but I have no 
idea what to search on... can anyone point me to someplace this has been 
discussed to death for CSS3 (whatever that means now)?  I checked out 
XForms but they don't seem to accomplish this either.

Jay Levitt

Received on Wednesday, 12 September 2007 15:18:55 UTC