TD CSS Shorthands... Thoughts?

Hello!
I am working on an app that uses dozens of tables, some with hundreds
(or even thousands!) of rows. I am interested in formatting the tables
using as much CSS as possible, so the HTML is barebones and
easy-to-read/modify. While thinking up how to do it, I came up with
this idea, which I welcome comments on:

QUESTION: What are the pros and cons of using one letter class names
for common TD cell formatting, like "nowrap" or "align=right", etc.

Something like this:

..l { text-align : left; }
..c { text-align : center; }
..r { text-align : right; }

..t { vertical-align : top; }
..m { vertical-align : middle; }
..b { vertical-align : bottom; }

..w { white-space : wrap; }
..nw { white-space : nowrap; }

This would enable you to do "shorthand" for formatting cells, like
this:

<td class="c t nw">100 million</td>

where this particular cell centered horizontally, middled vertically,
and with no wrapping...

What do you think?

My biggest fear is it will get expensive processor-wise.

Anyone done something like this, who would care to comment, good or
bad?

Thank you,
Ann

Giggle Girl wrote:

Hello!
I am working on an app that uses dozens of tables, some with hundreds
(or even thousands!) of rows. I am interested in formatting the tables
using as much CSS as possible, so the HTML is barebones and
easy-to-read/modify. While thinking up how to do it, I came up with
this idea, which I welcome comments on:

QUESTION: What are the pros and cons of using one letter class names
for common TD cell formatting, like "nowrap" or "align=right", etc.

Something like this:

.l { text-align : left; }
.c { text-align : center; }
.r { text-align : right; }

.t { vertical-align : top; }
.m { vertical-align : middle; }
.b { vertical-align : bottom; }

.w { white-space : wrap; }
.nw { white-space : nowrap; }

This would enable you to do "shorthand" for formatting cells, like
this:

td class="c t nw">100 million</td

where this particular cell centered horizontally, middled vertically,
and with no wrapping...

What do you think?

I do it all the time. Works fine.

My biggest fear is it will get expensive processor-wise.

How so?

Anyone done something like this, who would care to comment, good or
bad?

See above

Giggle Girl wrote:

Hello!
I am working on an app that uses dozens of tables, some with hundreds
(or even thousands!) of rows. I am interested in formatting the tables
using as much CSS as possible, so the HTML is barebones and
easy-to-read/modify. While thinking up how to do it, I came up with
this idea, which I welcome comments on:

QUESTION: What are the pros and cons of using one letter class names
for common TD cell formatting, like "nowrap" or "align=right", etc.

Something like this:

.l { text-align : left; }
.c { text-align : center; }
.r { text-align : right; }

.t { vertical-align : top; }
.m { vertical-align : middle; }
.b { vertical-align : bottom; }

.w { white-space : wrap; }
.nw { white-space : nowrap; }

This would enable you to do "shorthand" for formatting cells, like
this:

td class="c t nw">100 million</td

where this particular cell centered horizontally, middled vertically,
and with no wrapping...

What do you think?

The point of using styles is to separate content from presentation. One
of the advantages of that is that you can change the appearance entirely
by altering the stylesheet without having to touch the HTML, and in
particular without having to hunt through it and make changes to every
element whose appearance you want to alter.

If you put classes in your HTML that refer directly to appearance, then
suppose you decide you want all the cells that used to be right-aligned
to be center-aligned. You have to go through your HTML and change all
the classes. You *could* just change one line in your CSS to read

.r { text-align : center; }

if you meant for the change to be universal. But that would be silly,
wouldn't it?

Unless your cell formatting is completely haphazard, the changes are
that you are applying these styles for a reason. Perhaps you want
numeric cells to be top-right-aligned, and you want column headers to be
bottom-center-aligned. So what would make sense would be to designate
cells with class="numeric" and class="colhead" and then have

.numeric { text-align: right; vertical-align: top; }
.colhead { text-align: center; vertical-align: bottom; }

My biggest fear is it will get expensive processor-wise.

Not particularly.

On 27 Apr 2006 13:17:24 -0700, "Giggle Girl" <missgiggy (AT) gmail (DOT) com>
wrote:

: My biggest fear is it will get expensive processor-wise.

How much do you play for each millisecond?

Sid

Giggle Girl wrote:

QUESTION: What are the pros and cons of using one letter class names
for common TD cell formatting, like "nowrap" or "align=right", etc.

Dreadful! Total mis-use of CSS.

CSS is about _styles_ Not about attaching individual inline CSS
properties to every element that uses them. That approach would couple
content and presentation together as closely and badly as doing it with
<font> tags.

I also doubt if you really need per-cell control of random formatting
combinations. If there isn't some overall consistency here, then it's a
funny sort of table. If you have this consistency, then label its scope
(i.e. rows as "odd" or "even") and then bind the CSS properties to the
CSS classes in the stylesheet, where it belongs.

One letter class names are OK, but don't actually gain you that much.

On Fri, 28 Apr 2006, Andy Dingley <dingbat (AT) codesmiths (DOT) com> wrote:

(i.e. rows as "odd" or "even")

Isn't it a pity that there's no way to specify that (for rows or
columns) directly in CSS?

The nearest I've got to it is specifying styles for e.g:

tr, tr+tr+tr, tr+tr+tr+tr+tr etc. for the odd rows,
tr+tr, tr+tr+tr+tr etc. for the even rows.

OK, so assigning a class to the *rows* would be no big deal; but when
you want to style the *columns* too, then it gets to be a chore (and a
waste of HTML) having to add class=odd|even to every wretched cell.
Then the tr+tr+tr or td+td+td selectors seem to me, out of the
available toolkit, to be quite a tolerable compromise.

(Forgetting the browser-like operating system component for now, of
course).

http://ppewww.ph.gla.ac.uk/~flavell/tests/tablefun.html for a
small and simple demo "which I made earlier".

Alan J. Flavell wrote:

Isn't it a pity that there's no way to specify that (for rows or
columns) directly in CSS?

Given the negligible support of the attribute selectors we do have,
then I doubt it would matter much whether there ought to be or not.

I handle this sort of task with XSLT. Long-winded CSS is no problem to
me, I just add it at the step before.

On Fri, 28 Apr 2006, Andy Dingley <dingbat (AT) codesmiths (DOT) com> wrote:

Alan J. Flavell wrote:

Isn't it a pity that there's no way to specify that (for rows or
columns) directly in CSS?

Given the negligible support of the attribute selectors we do have,
then I doubt it would matter much whether there ought to be or not.

I handle this sort of task with XSLT. Long-winded CSS is no problem to
me, I just add it at the step before.

Oh, sure: long-winded HTML (i.e in this case with a class= on every
damned table cell) is also no problem to anyone who can write a
program to spew it out. But it's more a matter of taking a little
pride in what one extrudes out onto the world wild web - - and I'm
sure you really feel that way yourself, despite your occasional
remarks that might be interpreted to suggest otherwise :-}

Alan J. Flavell wrote:

But it's more a matter of taking a little
pride in what one extrudes out onto the world wild web - - and I'm
sure you really feel that way yourself, despite your occasional
remarks that might be interpreted to suggest otherwise :-}

I'm pragmatic. If ugly is the best the standard offers and it works,
then I'll make ugly. _Publishing_ live sites on the web is no place
for arguing as to how things ought to be, you just have to work with
what you have.

Andy Dingley <dingbat (AT) codesmiths (DOT) com> wrote:

Alan J. Flavell wrote:


But it's more a matter of taking a little
pride in what one extrudes out onto the world wild web - - and I'm
sure you really feel that way yourself, despite your occasional
remarks that might be interpreted to suggest otherwise :-}


I'm pragmatic. If ugly is the best the standard offers and it works,
then I'll make ugly. _Publishing_ live sites on the web is no place
for arguing as to how things ought to be, you just have to work with
what you have.

Another pragmatic POV:

I write HTML, JavaScript & CSS as the client-side rendering, and there
are a team of developers who use what I write to make the application
work. If I can provide simple classes like .r { text-align:right; } for
them to place programatically as THEY need it, it simplifies the work
for everyone involved. And if you store that class declaration as a
constant, then all you have to do is change that single constant to
change the way the site renders.

Granted, it's not exactly what CSS is best for, but sometimes you make
the best use of the tools to accomplish a task it was never intended to
accomplish.