Proposal: Chained Classnames

Proposal

Use chained classnames on the class attribute in lieu of prefixes.

Example

    <span class="html5 copyright">This span is copyrighted</span>

Both classes are required to activate whatever special property the predefined class name has.

CSS2 can select this using:

    SPAN.html5.copyright { ... }

and existing content can still select using:

    SPAN.copyright { ... }

Pros

• Seems clearer and more future proof than prefixed classnames.
• No need to change stylesheets for existing content.

Cons

• Longer to specify (but simpler than role attribute)

Alternatives

Rene Saaroo has an excellent overview discussing pros and cons of these alternatives. Please refer there for more details.

• class attribute, no prefixes (e.g., "<tag class="copyright">...)
  • Specified as part of WHATWG HTML5
• '_' suffix on class attribute (e.g., "<tag class="copyright_">...)
• role attribute, no prefixes (e.g., "<tag role="copyright">...)
  • CSS selectors are more complex.
• '_' prefix on class attribute.
  • JosefSpillner: According to http://www.w3.org/TR/REC-CSS2/syndata.html, paragraph 4.1.3 (or more formally 4.1.1), class names must not start with an underscore.

References

WHATWG HTML5

3.4.5. Classes

 Every HTML element may have a class attribute specified.

 The attribute, if specified, must have a value that is an unordered set of space-separated tokens representing the various classes that the element belongs to.

 The classes that an HTML element has assigned to it consists of all the classes returned when the value of the class attribute is split on spaces.

Q & A

• Anders Ringqvist: Isn´t this in conflict with what the spec. says about multiple class assignments, in other words that an element can inherit from more classes and that all declarations in all assigned classes should be applied?
  • Could you clarify which spec you're referring? (e.g., HTML5, CSS, HTML4 or other). HTML5 specifies that multiple classes can be specified by the class attribute separated by spaces (see above).
• Maurice Carey: What was the argument against using prefixes? Why would class="_copyright" be bad? Some people (like php programmers) are used to things that start with an underscore being reserved by the language.
  • There is no argument against _ as a prefix, if it's deemed a valid alternative, but I had heard further proposals for h5_ as a prefix or html5_ as a prefix which motivated me to propose this as a cleaner alternative if the prefixes had to be that long to begin with.
  • Jack Sleight - It's probably worth mentioning that IE6 ignores classes where the name begins with an underscore, and will not apply the relevant styles. Underscores within the name are fine, just not at the beginning. I'm not sure about IE7.
  • JosefSpillner: According to http://www.w3.org/TR/REC-CSS2/syndata.html, paragraph 4.1.3 (or more formally 4.1.1), class names must not start with an underscore.
• Gervase Markham - I believe IE 6 also has a bug with CSS selectors which use multiple class names as well. <sigh>
  • Unfortunate, I hope someone can test this -- CY
  • from #html-wg:

   Zeros: IE6 sees .foo.bar.baz {} as if it was .baz {}
   Zeros: So it'd work, sort of. It'd just have unexpected behavior if you also had a .copyright elsewhere