Re: Extending Class Proposal

I agree with you that in CSS, whenever a selector appears that you've
extended, you need to simply pretend those extended selectors are there as
well. This make sense because you're being declarative and building styles.

I dont think it works as well in JavaScript because the function is
actually returning a list of DOM nodes. It's not backwards compatible. If
tomorrow Chrome suddenly started including extended elements in the set of
returned nodes, you'd break a lot of websites. That's why I think a new
simple selector would work best.

But I'd be curious to hear if other people think the JavaScript part should
be as large a consideration as I think it should be.


On Thu, Jan 31, 2013 at 12:14 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> On Thu, Jan 31, 2013 at 11:36 AM, Philip Walton <philip@philipwalton.com>
> wrote:
> >> That has nothing to do with SASS's syntax, and everything to do with
> >> the fact that SASS is a preprocessor, not a part of the browser.
> >>
> >> In SASS's @extend existed in the browser, it would apply to all
> >> selector matching, including that done via JS.
> >
> > Yes, obviously, so let me rephrase: assuming Sass syntax were currently
> > implemented by the browser, how would you target all instances of a base
> > class with JavaScript?
> >
> > The only way I could see with the current syntax would be
> > document.querySelectorAll(".button"), which would match all elements with
> > the button class as well as all elements that match any extending
> selector.
>
> Yes, exactly.  If you have "foo bar { @extend button }", it means "any
> time you see 'button' show up in a selector, pretend that it's 'foo
> bar' instead".
>
> > But this seems like a really bad solution because there are certainly
> > situations where you'd want to *just* match the base class. It would
> also be
> > inconsistent with CSS selectors which currently don't match extended
> > classes.
> >
> > If I'm misrepresenting your idea, please clarify how you'd expect
> JavaScript
> > to target all instances of a base class.
>
> This appears to apply equally well to CSS selectors.  What if you just
> want to put styles on *only* the base class, not the things that are
> extending you?
>
> SASS's answer is (1) you usually don't, and (2) when you do, you can
> switch to using a placeholder selector instead, which is similar to
> your proposal.  Placeholders let you generate "fake" classes solely
> for use as a "base class" when using @extend.
>
> ~TJ
>