New Thinking for a CSS Approach
Having played with CSS using other people's styles, those of my own and those already existing, I had a thought the other day about how I would try it next time.
Even though CSS is supposed to stop us from putting layout details into the HTML, it has it's own layout v style problem. Take, as an example, the following CSS:
div.content {
margin-top: 3px;
color: #333333;
}
This, in my opinion, actually contains both a style (the color) and a
layout (the margin-top). I know that CSS is supposed to be all styles,
which is why it is in the accronym, but sometimes it gets in the way too.
As an example, on a rather large site I have been working on, there are quite a few different pages which share some generic styles but can vary greatly in the layout. It is a very data driven site rather than a content site, therefore, there are lots of finicky bits to help certain data stand out. The above class only contains 2 styles, but for some of these screens there are many, many more styles.
Recently, I've been thinking of a new approach to this problem. On a smaller website I recently completed, in a lot of cases I was assigning 2 or more classes to each of the HTML elements. Sometimes these were each of style and layout, but in some cases, it was two styles and in others, it was two layouts. As an example:
.bg-shaded { background-color: black }
.bg-highlight { background-color: white }
.bg { background-color: gray }
.fg-heading { color: #FFF; }
.em { text-decoration: italic; }
.right { text-align: right; }
.spaceit { margin-top: 3px; }
.padit { padding: 0px 12px; }
Then in the HTML:
<div class="bg-shaded fg-heading em right spaceit padit">This is extreme</div>
I know there are various ways to help with this, especially leveraging the
power of the 'cascading' part of the standard. Also, the use of <h#> and
<p> and the rest can help, but as I said, the site is very data driven
and therefore most things end up in <div>s.
So the thought is that there is a generic.css stylesheet, in which go
the standard styles used across the whole site. Then there is a
styles.css stylesheet in which go the various text, font, colour,
padding and border styles - it is these which can proliferate. But the main
thing which became the hardest thing to cope with was the layout for each
page since they were all very different, therefore, each page has it's own
layout.css stylesheet.
As a small example, here are some stylesheets:
file: generic.css
* {
padding: 0px;
margin: 0px;
font-size: 10px;
font-family: Arial, Helvetiva, sans-serif;
}
file: styles.css
.hdr { color: #ffffff; background-color: #006d1b; }
.sub { color: #ffd96b; background-color: #108d18; }
.em { text-style: italic; }
.upper { text-transform: uppercase }
file: layout.css
.rounded-hdr { width: 400px; background: url(rounded_hdr.jpg) no-repeat top; }
.rounded-sub { width: 400px; background: url(rounded_sub.jpg) no-repeat bottom; }
.squared-hdr { width: 400px; background: url(squared_hdr.jpg) no-repeat top; }
.aquared-sub { width: 400px; background: url(squared_sub.jpg) no-repeat bottom; }
As an example then, you can choose a heading and subheading with rounded or squared corners:
<div class="hdr rounded-hdr">A Heading</div> <div class="hdr rounded-hdr">A sub-Heading</div>
<div class="hdr squared-hdr upper">A Heading</div> <div class="hdr squared-hdr">A sub-Heading</div>
(I know a div of class 'hdr' or 'sub' could have been used around the whole thing and then the internal classes choose the images, but this was just an example. It also retains a great deal of flexibility.)
You can assume that the number of styles, layout CSS and generic CSS is greatly increased on a much larger project.
I might not have convinced you, but I am planning to try this out next time I run across a site with a large number of page layouts.
This post originated on http://chilts.org/.
Email me on andychilton -at- gmail -dot- com.