I use TopStyle to write code for various web sites. It’s still my editor of choice and for many of you… hand-coding is the only way to go. For those hand-coders writing CSS and XHTML, look at the 3 examples below:
Example 1:
.boxa { text-align: right; float: left; }
.boxb { text-align: left; float: left; }
.boxc { text-align: left; float: right; }
The above example works ok, but lets say you start to add more elements to your page. If they don’t fit within the already written styles, you need to add onto your style sheet or edit your current styles.
Example 2:
.boxb, .boxc { text-align: left; }
.boxa { text-align: right; }
.boxa, .boxb { float: left; }
.boxc { float: right; }
Example 2 is somewhat better, however then you’ll run into the problem of having a bunch of .boxb classes everywhere in your style sheet.
Example 3:
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.floatleft { float: left; }
.floatright { float: right; }
I find this to be the best solution. It keeps your style sheet size down and it makes it easier to get your layout just right. For example, you have this tag:
‹div›Information and Text Go Here‹/div›
Now we can start applying styles to it very easily:
‹div class=”floatleft right”›Information and Text Go Here‹/div›
We can easily change the float from left or right, or change the text alignment. Take some other common styles like:
.bold { font-weight: bold; }
.italic { font-style: italic; }
.fonta { font-size: 1em }
.fontb {font-size: 1.25em }
Styles can be applied or changed right from within the HTML document. There’s no need to constantly go back and forth to the style sheet. You also don’t have to remember… did .boxa class have bold in it? Did .boxc class have a float right? Now you can just type bold , floatright, or center in your div tag. It’s like using the ‹center› tag, but making it XHTML compliant!
I think you miss the point of CSS in the first place; separating content from layout.
Meditate on why the zen garden does _not_ use the technique you suggest.
http://www.csszengarden.com/
The content is still separated from the layout. You remove the sheet sheet, you’ve removed the layout of the html file and are left with the content.
The main disadvantage I see to this method is you can no longer easily change the styling of several pages by simply making changes to a common style sheet.
You have to go through and edit the classes in each element being restyled on each and every page in order to make even the smallest styling changes.
It’s just so much easier to use class names which don’t describe the styling used.
This is very true. The three methods I proposed each have their advantages and disadvantages. It’s smart to list the pros and cons of each method. Do you need to minimize the size of your style sheet? Is the look of your site going to change frequently? In the end it comes down to personal preference, and the scope of the project.