Re: Extending Class Proposal

Hi Philip,

I skipped through your post and overall I like the idea of having built-in
class extension in CSS similar to SASS very much but I personally didn't
like the syntax.

Also being able to extend "rules" rather than classes might be even better.
To make this possible, we can assign names to rules and then specify that
another rule extends that rule:

.foo .bar .baz {
  rule-name: "my-rule";
  background: blue;
  /* ... */
}

.meh .moh .mee {
  extends: "my-rule";
  border: black;
}

This can solve media selector issues as well:

@media (max-width: 319px) {
 .foo .bar .baz {
  rule-name: "my-rule-1";
  background: blue;
  /* ... */
 }
}

@media (min-width: 320px) {
 .foo .bar .baz {
  rule-name: "my-rule-2";
  background: blue;
  /* ... */
 }
}

.meh .moh .mee {
  extends: "my-rule-2";
  border: black;
}

Cheers,
Behrang Saeedzadeh
http://www.behrang.org


On Tue, Jan 22, 2013 at 6:20 AM, Philip Walton <philip@philipwalton.com>wrote:

> Hi, I haven't heard back from anyone on this, so I wanted to follow up.
>
> I hope the lack of response is because of busyness and not due to a lack
> of interest in the topic/proposal. I think the ability to natively extend
> classes in CSS would be a huge win.
>
> If any discussion on this topic is happening outside this list, I'd love
> to be pointed in that direction.
>
>
>
> On Thu, Jan 17, 2013 at 3:56 PM, Philip Walton <philip@philipwalton.com>wrote:
>
>> 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.
>>
>>
>>
>>
>>
>>
>