Re: CSS Classes Custom - by Leonardo Lima

Hi Brad.
> Where is this nesting syntax coming from, and why would you need %border nested in :root?
Assuming that your question is directed to me, as you quoted my
message, notice that I, in turn, was answering to Leonardo Lima's
message, in which an example of %border nested in :root was proposed,
and it seemed confusing and strange IMHO.

For what concerns your proposal
> :root %border{ /* properties */}
>
> main %border{ /* other properties */}

How would you use it? In my mindset, %placeholders should be @extended
just calling them,
#navigation {
  @extend %border;
}
without any other selector, i.e. I'd never write
#navigation {
  @extend main %border; /* this is not the extend rule I was looking for */
}
and if you want to understand why, take a coffee and read my previous
message (or the issue I filed on Github project page - both are quite
long).
So specificity rules would be taken into account to solve conflict
between %placeholder blocks. But...
:root %border { border-color: red; }
main %border { border-color: blue; }
using specificity it means that <main> descendants whose rules are
extended using %border will have border-color red, not blue, as
pseudo-class selector has a higher specificity than tag selector.
This is not only less intuitive (one would think that the "descendant"
rule prevails over the "ancestor", but we know that in CSS things are
not so easy), but it would also be harder to track, if you only write
@extend %border (and yes, I still repeat that I'd prefer using *only*
placeholder for ruleset extension).
So, in short, I guess placeholder selection should not allow
ancestor/sibling/child/descendant selectors to be specified with it.
What could be done, of course, is a "multiple" selector
%border, .border{
   /* properties */
}
which allows specifying the same properties on elements with
class=border, as well as recycling those rules on other elements.

Received on Thursday, 9 April 2015 17:17:36 UTC