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 17:30:16 +0200
Cc: "Eric Twilegar" <Eric.Twilegar@onpeak.com>, "www-style@w3.org" <www-style@w3.org>
Message-Id: <2A9C9E64-F6A6-4624-9FAA-67503425344B@googlemail.com>
To: GreLI <greli@mail.ru>
Hello,

while this is nice convention + CSS3 use, its still a /hack/ on class selector because all you did is faking .someRealClassOnDiv.one {} with .someRealClassOnDiv-one {}.
Imagen you have a website with some things that should look boxy, some things that should look text-shadowy, some things that should have one style of "attention" e.g. two or three sets of combined "font-styles". What you could do today is grouping a bunch of selectors around those aspects and apply them this way, and use a comment to specify things as an aspect.


On 2010-10-28, at 17:10, GreLI wrote:

> Thinking on it I found one more way that doesn't require extra class:
> [class^="someRealClassOnDiv"]
> /* classes starting with "someRealClassOnDiv" */
> {
>      border-style:solid;
>      border-width:1px 1px 0;
> }
> 
> .someRealClassOnDiv-one {
>      border-color:green;
> }
> .someRealClassOnDiv-two {
>      border-color:blue;
> }
> 
> CSS3 selectors are really powerful tool.
> 
> 
> On Tue, 26 Oct 2010 02:20:20 +0400, Eric Twilegar <Eric.Twilegar@onpeak.com> 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 15:30:52 GMT

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