W3C home > Mailing lists > Public > www-style@w3.org > April 2015

Re: CSS Classes Custom - by Leonardo Lima

From: Brad Kemper <brad.kemper@gmail.com>
Date: Thu, 9 Apr 2015 09:39:12 -0700
Cc: Leonardo Lima <leonardo403@gmail.com>, Fran├žois REMY <francois.remy.dev@outlook.com>, www-style list <www-style@w3.org>
Message-Id: <E5640601-B98A-4580-9434-2153E0307B70@gmail.com>
To: Andrea Rendine <master.skywalker.88@gmail.com>


> On Apr 9, 2015, at 6:51 AM, Andrea Rendine <master.skywalker.88@gmail.com> wrote:
> 
> Leonardo,
> > :root{
> >    %border{border-radius:10px;}
> > }
> the original syntax proposed in "CSS Extend Rule" does not take into accout nesting rulesets.
> That is, no {property} inside a {} block. Otherwise you'd end up looking for where the placeholder has been defined and if it fits into cascading/inheritance dynamics.
> Instead, it would be better to simply define placeholders in "CSS global scope" (the term is not precise but I hope it is comprehensible), so that it is available in every rule block without having the need to nest it inside :root (or anything else)
> If you have 
> :root {
>   %border{ /* properties */}
> }
> you can also have
> main {
>   %border{ /* other properties */}
> }

I think I missed something. Where is this nesting syntax coming from, and why would you need %border nested in :root?

Anyway, I'm taking this to be equivalent to this: 

:root %border{ /* properties */}

main %border{ /* other properties */}

> But then consider
> main div {
>   @extend %border;
> }

So, this would mean the same two rules would be applied to DIVs inside of "main", as though they had a matching 'border' class. 

> What %border block is to be considered?

Both. Those DIVs are descendants of both :root and main. Just imagine the DIVs had a class=border on them, and that the '%' was actually a '.'. Properties in the second rule could overwrite values of the same properties in the first for those DIVs, because 'main .border' is more specific than ':root .border'. 

At least, that's my understanding. 

> 
> IMHO it's better to just have global custom classes to be called where necessary.
> %border {
>   /* properties */
> }
> 
Received on Thursday, 9 April 2015 16:39:42 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:30 UTC