I think I'm pretty good at using semantic markup on my pages but I still have a handful of classes like this:
/**** Aligns ****/
.right_align { text-align: right; }
.left_align { text-align: left; }
.center_align { text-align: center; }
Which, technically, is a no-no. But when you just want to position some text in a table, how crazy am I supposed to get with the semantic markup?
Why do you want to align the text?
The answer to the question is the name of the id or class you need to have for your selector. Do you want to align it right because it's a price?
table .price {
text-align: right
}
Just ask yourself why do you want to apply a particular style, and all will become clear.
I probably overdid it, but my last work project was pretty close 100% semantic- anything I needed which was not semantic (say, a filler div which I could not do without for a layout requirement), I added dynamically using jQuery.
If you want tight coupling between the table cells and the alignment, you could just assign the attribute style="text-align:right" directly on the tag. There is no reason to go the extra level of indirection through a class if you dont use it for a level of abstraction anyway.
I try to consider why I want a column right aligned in a table. For example, if the column contains currency amounts then I would use a style named currency instead of right_align.
Semantic markup is an admirable goal, but in the real world, you sometimes have to make compromises. In some cases, the only sensible way to do something is to break semantics and just throw in a right_align.
Edit: People seem to be misunderstanding my point in this. You should use semantic markup where possible. However, there are cases where it really is just a stylistic choice and there is nothing inherent to the data that you can use to describe or classify it. This is most typically true with large sections of tabular data, especially if it is dynamically generated.
I've had cases where clients want to be able to dynamically control what columns appear in data grid. There's no way to know ahead of time what type of data they're going to choose to show. If they want a way to center or right align a dynamically generated column, it's better to have center and right align classes available for them to use than to have them sticking style attributes everywhere.
100% semantic markup is a silly goal. Your graphic designer will say, "Let's right align this", and the reason will be "because it looks good that way". What are you supposed to do, add a class of "looksgoodthatway" to the div? Just right align it and get on with your life! :)
From experience, for usability reasons you should keep tokens on as many lines as possible.
I use the following notation
matcher,¶
matcher¶
{¶
··attribute:·property;¶
}¶
Why you ask? This solves many problems with collisions, as it reduces the number of places 2 unrelated changes can occur in 2 different places at once ( which causes the collision ), and when the collision does occur, its much easier to see what caused it and chose the correct solution.
This is because SCM's DIFF is row oriented, and if you have all your content on 1 row, you get 2 choices, hose one complete set, or hose the other.
Also, that particular style I find, if adhered to, makes it easy to write lint checking code that detects errors in your CSS.
For insance, spot the typos:
matcher
matcher,
{
attribute property
attribute
}
In this case, code that simply checks for whitespace and delimiter conformance also detects coding mistakes!.
