Re: Question about CSS definitions

..oO(John Hosking)

Michael Fesser wrote:

A class should reflect the meaning of the content which it is applied
to, not its appearance, e.g. "boldRed" vs. "warning".

Agreed, at least the first part, although it seems you have swapped the
examples.

Indeed. My fault.

But IMHO there are exceptions from this recommendation, I think "center"
is one of them. I even use these five classes in most of my stylesheets:

.ac {text-align: center}
.al {text-align: left}
.ar {text-align: right}
.fl {float: left; margin-right: 1em}
.fr {float: right; margin-left: 1em}

So what do you do when you decide the image which has been floated right
should now be on the left?

I change the template which is used to build the HTML. The final HTML
code for my images is script-generated with automatically added links to
a bigger version of the image and a caption text below it if available:

<p>hello world ...
{cmp:image;path=/foo,fileName=bar,descr=some caption text,align=right}
</p>

The result will then be the use of "fr" instead of "fl".

For single images here and there this is much easier than having to
define a class for each one, just in order to be able to change the
position of the image without touching the template. In more complex
situations I might assign a class to the container that holds the
image(s) and then use descendant selectors to align them, though.

The float classes are mainly used on images, while the alignment classes
are mainly used in table columns.

Wondering (and excited to hear) how you style the columns.

By script. ;)

Since you can't apply much styling to a column except for 4 properties,
you have to assign a class to every cell in that column. If I decide in
my script, that a column should be right-aligned, the "ar" class will be
automatically added to all cells there.

In some of these cases I use more meaningful class names, for example
"price", but usually the generic alignment class is enough. It's the
same as with the images above - I don't want to clutter my stylesheets
with dozens of classes that are only used once on a single page unless
it's really necessary. Until then I use the less flexible, but more
generic way.

For me these five classes are purely
presentational, they mean nothing else than to align this or that in a
certain way without giving it any special meaning, hence the naming.

Exactly: they're purely presentational. But you've built their
presentation into the code by including the (abbreviated and obscure)
class names in the HTML.

I know and I have my reasons for that. I also said that these 5 classes
are more or less my only exceptions and mostly used internally for
script-generated content and templates.

Micha
.

Loading