Basing one class on another class

On 2009-10-06, Jim Moe <jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> wrote:

On 10/05/09 02:06 pm, Ben C wrote:

So I have a class .basic that does what I normally want, but I also want
a .basic_red class, which is exactly the same as .basic with color:red
added.

Another way more in keeping with the specialization concept:
.basic,
.basic .red,
.basic .blu {

That means elements with class red that are descendents of elements that
are class basic (descendents in the DOM tree, not in some putative class
hierarchy we might be trying to simulate here). Not sure that's what
Swifty wants.

That is what he asked about. It's even in the Subject line.

But yes you could do it like that, but it would mean extra divs in the
markup. Every time you needed a red, you'd have to write:

div class="basic"><div class="red"> rather than <div class="basic red"

Then you'd just define properties for ".basic" (common stuff) and extra
properties for ".basic .red" (anything red inside a basic).

But I don't think there's anything to be gained by that, and having the
extra divs is definitely a downside.

The extra markup is definitely a bummer. But it also prevents a growth
of least-specific rule sets with generic names, easing maintenance and
re-use (at least of the generic names). Here I am using the specificity
aspect of CSS to simulate sub-classing where a subclass adds or modifies
the attributes of the parent.
The other method you and Ben C outline emulates multiple inheritance

Well, not exactly. It doesn't emulate inheritance at all-- it's just
making something a member of multiple classes.

If it's emulating anything, it's more like composition: my div has a
basic and a red. It _is_ a div. It's not a red which is a kind of basic.

Classes don't inherit from each other in CSS (they aren't like classes
in object oriented programming), but things can be members of more than
one class (which they can't in object oriented programming).

Basically trying to emulate OOP in CSS is very confusing here because it
has a different kind of class. In any computer language, it's usually
better to use techniques that are idiomatic in that language than to
emulate things in other languages (except when there isn't a better
idiomatic way).

which combines (possibly conflicting) rules from independent rule sets.

Yes, and there are CSS rules (specificity) for deciding who wins in such
cases, which are much simpler than the contortions OOP languages go
through for resolving multiple inheritance (see e.g.
http://192.220.96.201/dylan/linearization-oopsla96.html).

I guess without more details about the actual application, there is no
way to really decide which would be better.

OK, but I can't think of an actual application in which your approach
would work better (which is not to say it isn't of academic interest).

The other subtlety with your approach is you have to rely on properties
being inherited in the CSS sense. For those that aren't, you'd need a
bunch of extra rules like this:

..red { background-image: inherit }