Re: CSS Suggestion - based-on:

Kevin Cannon (by way of Bert Bos <bert@w3.org>) wrote:
> That's fine when it's a simple example there, but when you've got a
>  large site with many different rules the CSS tends to get
>  exceptionally messy. You end up with things like this, which are
>  unavoidable.
> 
> #navigation #products.opened a:link, #navigation #products.opened
>  a:hover (except with about 5 rules added on there)

No, you’re taking the wrong approach. Basically your based-on method is 
one way to do this, specifying the inheritance on the inheriting rules, 
while CSS chose to use the other method, specifying ‘inheritance’ on the 
actual rules to be inherited. But basically, there is little difference 
between the two, and they are equally powerful.

So, a based-on: property is just unnecessary. What’s worse, it moves 
part of the selector to the rule’s properties instead of the selector 
part. In some cases the current syntax is a little verbose, however it’s 
not like that happens all the time.

The best solution to avoid long rules is usually the use of multiple 
classes. This also enforces you to think about what the parts in your 
documents really do and what their commonalities are, which usually 
improves the structure. Let’s go back to the heading example, one done 
using classes:

.heading1, .heading2 {
   font-family: Verdana, sans-serif;
   color: red;
}
.heading1 {
   font-size: 1.4em
}
.heading2 {
   font-size: 1.3em;
}

Instead of doing this, if you’d split up the headings into two classes: 
‘heading l1’, ‘heading l2’, etc. then the rules could become as follows:

.heading {
   font-family: Verdana, sans-serif;
   color: red;
}
.heading.l1 {
   font-size: 1.4em
}
.heading.l2 {
   font-size: 1.3em;
}

I hope you see my point here. I generalized the different heading tags 
to all be part of the ‘heading’ class, and each have a different level 
assigned to them. That’s also amongst others why it’s nice that XHTML2 
has a <h> tag instead of <h1>...<h6>, but that aside :).

Some suggestions for the case you listed... Specifying each long rule on 
a single line makes it a lot clearer:

#navigation #products.opened a:link,
#navigation #products.opened a:hover {
}

You can only use an ID once, so the #navigation selector is unnecessary 
as #products can only appear in one place.

#products.opened a:link,
#products.opened a:hover {
}

This rule doesn’t look that bad, if you ask me.

------

I think a better way for the CSS group to spend their effort is by 
inventing an ‘or’ selector:

#navigation #products.opened (a:link | a:hover) {
}

This should help making those kind of rules shorter, and at the same 
time stick to the method selectors are currently using. Another good 
selector they could spend their time on is stuff like:

a < li, or li:with(a)

Which would mean to select all li elements with an a element inside (I 
don’t think there’s currently a way to to that kind of selectors). But 
that isn't really related to this discussion, I guess :).


~Grauw

-- 
Ushiko-san! Kimi wa doushite, Ushiko-san!!

Received on Saturday, 11 December 2004 14:19:24 UTC