Extending Class Proposal

I recently posted a proposal on my website for how I think CSS could/should
handle the concept of extending a base class:
http://philipwalton.com/articles/the-future-of-oocss-a-proposal/

Tab sent me a link to this discussion from August started by David Baron,
and my proposal basically aligns with method (b) that he suggests:
http://lists.w3.org/Archives/Public/www-style/2012Aug/0363.html

I've spent a lot of time thinking about this problem and trying to make it
work with in Sass; I've firmly come to the conclusion that preprocessors
can't handle this all by themselves. The article goes into a lot of detail
why.

Anyway, I'd love to be part of any discussion on this topic, which is why
I'm sending this to the list.

TL;DR for the article:

* Create a new simple selector called the abstract class selector, which
uses the % sign (Ex: %base-widget { } ). The abstract class selector would
match any element with a class that extends from it.

* Create a new @ rule called @extends to define the inheritance (Ex:
@extend .widget < %base-widget; )

The primary reason I think a new simple selector should be created is so
you can target these elements via JavaScript without having to put the
classes in the markup.

document.querySelectorAll("#sidebar %base-widget");

It would also allow for extending base classes within media queries, which
currently Sass can't do.

Received on Thursday, 17 January 2013 23:57:06 UTC