The CSS class names chosen for table rows are badly chosen: "light" and "dark". Since CSS could be used to make the "dark" rows light and the "light" rows dark, the names are wrong. The attached patch changes "light" and "dark" to "odd" and "even".

In the future, all class names should describe why an element is styled differently, not how it is to be styled. e.g. "Red" is a bad class name, "important" is far better.

CommentFileSizeAuthor
#8 zebra-classnames_0.patch3.28 KBThox
zebra-classnames.patch1.41 KBThox
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Bèr Kessels’s picture

themes/bluemarine/style.css:13:tr.dark td, tr.light td {
themes/pushbutton/style.css:27:tr.dark td, tr.light td {
themes/pushbutton/style.css:512:#tracker tr.light, #tracker tr.dark {
themes/pushbutton/style.css:542:#forum tr.dark {

are core styles still using dark and light. jsut a quick grep.
but other than that a +1 for these better named classes.

drumm’s picture

I have a 80% finished patch on my Drupal checkout which:

- Adds <thead> and <tbody>
- Allows use of <th> in the table body.
- Unifies the classing for the block admin and permissions tables. (I might codify this in a themeable function.)
- Removes the light class and changes the dark class to alt.
- Adds a class to the <table> tag made by theme_table() to avoid styling conflicts with layout tables found in some themes.

Many of these changes were suggested by Chris.

I will be able to finish and post this patch in some number of weeks. Please don't worry aobut submitting conflicting patches, I can deal with it. Although we might want to decide upon odd/even and alt/[none] classing now.

Steven’s picture

I'd prefer "odd"/"even" than ""/"alt". It is more descriptive.

TDobes’s picture

I agree... "odd"/"even" seems preferable.

factoryjoe’s picture

I disagree with "odd" and "even" just as much as "dark" and "light". Why? Well, with Javascript you can rearrange table rows. "Odd" and "even" refer to relative positions within a fixed numerical order. I would presume that when you rearrange rows, the classes are moved too (for example, in the watchdog, the "error" class might show up on a row and should therefore be moved with that row when sorting). So by using the "alt method", you not only cut down on code by using just the "alt" class on every other <tr> tag, but you also get simpler markup. Your intention, after all, is to denote alternating rows, not whether the rows are "odd" or "even".

I also don't see any benefit in styling two different row classes; just treat unclassed rows as the default and use the .alt class for visual distinction. It's that simple.

Thox’s picture

factoryjoe, I'd agree with your reason for using "alt" only if it was not simply a bad substitute of the same concept. Using your same arguement, after rearranging rows, you would have possibly two rows at the top with the "alt" class, followed by three rows with nothing.

Regardless of the name used, if you're going to move rows with javascript then you must relabel the class names.

The benefit of using two classnames is quickly seen if you look at the stylesheets. drupal.css and others all style tables rows based on td.light and td.dark. If you styled "td" then you would affect any structural tables used in the theme.

Chris Johnson’s picture

I would argue that "odd" and "even" are the correct terms as they apply to the discrete entities (usually rows, but not always), not to the styled output. The module generating N items of output is generating odd and even items, regardless of what they look like when styled. They are meta data tags, if you will, telling the theme and the stylist some additional information about the items. They can be used to zebra stripe rows, or for another purpose, or ignored completely.

Using "alt" is deceptive. Is the "alt" item an alternative for the primary item? Could it be displayed instead? No.

The items are alternating items, not alternative items. In such a case, which item is alternate to which? Odd and even far more clearly convey the sense of such alternating items, and should be used here.

Sorry factoryjoe -- I'm usually your biggest supporter. :-)

Thox’s picture

FileSize
3.28 KB

Patched the outstanding files.

Dries’s picture

Committed to HEAD. Thanks.

I'm not marking this fixed yet until the "Migrating themes from Drupal 4.6 to Drupal HEAD"-page in the Drupal handbook has been updated.

Steven’s picture

Done.

Anonymous’s picture

Anonymous’s picture

Anonymous’s picture

Anonymous’s picture

mkerres’s picture

Anonymous’s picture

Anonymous’s picture

Anonymous’s picture

Status: Fixed » Closed (fixed)