W3C home > Mailing lists > Public > www-style@w3.org > January 2013

Extending Class Proposal

From: Philip Walton <philip@philipwalton.com>
Date: Thu, 17 Jan 2013 15:56:39 -0800
Message-ID: <CAGRhNhV9Mvru9O_BcLQWn8odvOG=Kc+48tSN2hEF-0DnNKHwjg@mail.gmail.com>
To: www-style@w3.org
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:04 GMT