Compugasm
7 Nov 2006, 3:50 PM
For the last couple of years, my life has revolved more than a little around style sheets. Ive answered too many questions to count about them on newsgroups and via email; and fought for adoption with The Web Standards Project (http://www.webstandards.org/). I wanted to demonstrate a possibly better way to create CSS layouts to this developing community, and see what you guys think of it. I'll try not to overexplain these two different examples, and I'll wait for feedback. First, CSS selectors are named in relation to where data falls within a table.
TABLES: Using a "property sheet" format
http://blog.superunit5000.com/wp-content/uploads/2006/10/form2.png
The problem this solves:
Uses a "book outline" format to give you a sense of heirarchy, without having to create classes like [.content-indented-header] or some nonsensical system.
"Special" which is a general name, to reduce the need to create hard to remember custom selectors.
When book outline, is combined with compass layout, it's quite informative (North.title, South.help) not only does it tell you where content is, but what it might look like.
DIV: Using an "Inline form" format
http://blog.superunit5000.com/wp-content/uploads/2006/10/form.png
The problem this solves:
Using H1 -> H6 should be the HTML code equivalent of the first convention.
If your using a WYSIWYG editor, they typically have shortcut keys [CTRL+#] to change between H# tags. Notice how the different numbers, combined with the shortcut keys would allow you to change style, without having to retype new values.
With the extra UL, LI, and H# tags built into the code, it's easier to add additional styling, without having to create additional ID or CLASSes to contain that styling.
NOTE: the DIV example doesn't allow me to place form fields next to eachother like the first example. But a simple addition of closing and ending UL tags would. Additionally, most WYSIWYG editors have a button which creates lists.
TABLES: Using a "property sheet" format
http://blog.superunit5000.com/wp-content/uploads/2006/10/form2.png
The problem this solves:
Uses a "book outline" format to give you a sense of heirarchy, without having to create classes like [.content-indented-header] or some nonsensical system.
"Special" which is a general name, to reduce the need to create hard to remember custom selectors.
When book outline, is combined with compass layout, it's quite informative (North.title, South.help) not only does it tell you where content is, but what it might look like.
DIV: Using an "Inline form" format
http://blog.superunit5000.com/wp-content/uploads/2006/10/form.png
The problem this solves:
Using H1 -> H6 should be the HTML code equivalent of the first convention.
If your using a WYSIWYG editor, they typically have shortcut keys [CTRL+#] to change between H# tags. Notice how the different numbers, combined with the shortcut keys would allow you to change style, without having to retype new values.
With the extra UL, LI, and H# tags built into the code, it's easier to add additional styling, without having to create additional ID or CLASSes to contain that styling.
NOTE: the DIV example doesn't allow me to place form fields next to eachother like the first example. But a simple addition of closing and ending UL tags would. Additionally, most WYSIWYG editors have a button which creates lists.