Single Class vs. Multiple Classes

[Matt Kruse]

While developing an internal IE6-only webapp, a discussion started about the
'best' way to apply classes to data tables across multiple pages. The two
arguments were:

1. Apply a single class to each table. That class (possibly in combination
with other classes on child elements) controls every part of the table -
layout, colors, fonts, etc. Example: class="data"

PROS: Easier to standardize, less specificity confusion, everything is
self-contained

CONS: Each slightly different table variation needs an entirely new class,
different classes may have many rules in common

2. Apply multiple classes to each table. Possibly one for layout, one for
colors, one for effects, etc. Example: class="compact dark grid dropshadow"

PROS: Classes control one aspect of table and combine in many different
ways, class rules don't grow too big or overlap

CONS: Possible specificity collisions, style selections seems to move into
html rather than in css, confusing to know which classes to pick

So this is mostly a question of opinion - When do you suggest using one
class vs. multiple classes and why? Is there a general rule that can be
quantified, or does it depend on the situation?

Some discussion on the question would be great!

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

[Johannes Koch]

Matt Kruse wrote:

While developing an internal IE6-only webapp, a discussion started about the
'best' way to apply classes to data tables across multiple pages. The two
arguments were:

1. Apply a single class to each table. That class (possibly in combination
with other classes on child elements) controls every part of the table -
layout, colors, fonts, etc. Example: class="data"

PROS: Easier to standardize, less specificity confusion, everything is
self-contained

CONS: Each slightly different table variation needs an entirely new class,
different classes may have many rules in common

Ask yourself: Are the tables conceptually different so that the
presentation should be different? If yes, create a new class.

Then use something like

.schedule, .sales, .scores {
/* common properties */
}

to make your life easier.
--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)

[Jim Moe]

Matt Kruse wrote:

While developing an internal IE6-only webapp, a discussion started about the
'best' way to apply classes to data tables across multiple pages. The two
arguments were:

1. Apply a single class to each table. That class (possibly in combination
with other classes on child elements) controls every part of the table -
layout, colors, fonts, etc. Example: class="data"

2. Apply multiple classes to each table. Possibly one for layout, one for
colors, one for effects, etc. Example: class="compact dark grid dropshadow"

So this is mostly a question of opinion - When do you suggest using one
class vs. multiple classes and why? Is there a general rule that can be
quantified, or does it depend on the situation?

This is a similar to a topic that goes around in object-oriented
programming circles (e.g. C++): single inheritance vs. multiple
inheritance. It is stretching it a bit to say it is the same as single
class vs. multiple classes, but not far off either.
The general consensus is that multiple inheritance is to be avoided; the
word "evil" often arose in discussions. It creates non-linear relations
that are hard to track as the code ages, specifically the "unintended
consequences" problem, aka: collateral damage, ripple effect,
interdependence, high cohesion.
Multiple inheritance does not scale well and is hard to maintain. The
same can be said for multiple classes. Building a bunch of Lego styles may
seem efficient at first. It becomes a mess after a while.
Consider what happens when you change the ruleset for "dropshadow."
Wherever dropshadow is used, its appearance changes. When used in multiple
class style, zero or more unrelated parts of the site change appearance as
well. This may or may not be desirable.
Multiple classes can be useful when used in a focused, limited manner.
It is not a generally useful method.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[dingbat]

Jim Moe wrote:

This is a similar to a topic that goes around in object-oriented
programming circles (e.g. C++): single inheritance vs. multiple
inheritance.

Dangerous approach for CSS though. CSS does cascading, not inheritance
and OO programmers have historically found themselves getting very
confused by this difference.

[Jim Moe]

di*****@codesmiths.com wrote:

This is a similar to a topic that goes around in object-oriented
programming circles (e.g. C++): single inheritance vs. multiple
inheritance.

Dangerous approach for CSS though. CSS does cascading, not inheritance
and OO programmers have historically found themselves getting very
confused by this difference.

Ah, I was unclear, then. I did not mean cascading at all, only the use
of multiple classes.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)