W3C home > Mailing lists > Public > www-style@w3.org > October 2010

Re: css block re-use proposal

From: Jonas Hartmann <j0n4s.h4rtm4nn@googlemail.com>
Date: Thu, 28 Oct 2010 16:30:35 +0200
Cc: "'www-style@w3.org'" <www-style@w3.org>
Message-Id: <358F0DED-A897-46FC-8D9E-511B487172A8@googlemail.com>
To: Eric Twilegar <Eric.Twilegar@onpeak.com>
Hello,

I thought about exactly the same this week - I thought of it as "aspects" or "themes" - grouping a style by its style.

SASS (see HAML+SASS) along as other server side solutions mostly try to mimic:
a.) Aspects
b.) Cascading selector blocks like
c.) Variables
d.) Basic Math Operations (done via css3 calc())
Now the question is which of these features should be supported client side e.g. by CSS itself. I am not up to date on the discussion which is a good thing to support and what not, and why that is the case.

Aspects (or "themes" or "modules" or "mix-ins")? can reduce css code size and at the same time help with maintainability.
You would add an aspect for things that have a box-shadow, or things that have a certain text color, or things that have a certain font-family.


Example on a.):

This is what I cam up with, unsure if its any good this way though:

div$box-shadowed,
section$box-shadowed {
    box-shadow: 10px 5px 5px black;
}
nav#menu, section.main, a {
    /* nav#menu and section.main would have the aspect $box-shadowed, a wouldn't */
    use-aspect: box-shadowed;
}



Example on b.):

#somethings {
    color: red;
  
    .a_thing {
        color: blue;
    } 
}
/* Which would be "rendered" to something like this: */
#somethings {
    color: red;
}
#somethings .a_thing {
    color: blue;
}


Regards
 Jonas

On 2010-10-26, at 00:20, Eric Twilegar wrote:

> Many times in CSS I find myself copying and pasting the exact block of CSS statements from block to block.
>  
> It would be nice if in CSS you could reference one block of CSS inside of another block.
>  
> I would suggest that we could create a block with a name perhaps using the $ character to start it. Then refer to it in another block like an include so that the CSS lines are copied in.
>  
>  
> $bottomLessBorderStyleGroup
> {
>       border-style:solid;
>      
>       border-top-width:1px;
>       border-left-width:1px;
>       border-right-width:1px;
>       border-bottom-width:0px;
> }
>  
> .someRealClassOnADiv
> {
> $bottomLessBorderStyleGroup
> }
>  
>  
> For now Iím implementing something similar by generating the CSS server side, but it would be nice to not have to go to a pre-processor.
>  
>  
> et
Received on Thursday, 28 October 2010 14:31:18 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:33 GMT