Re: css block re-use proposal

Yes it's a hack just to answer "purist". I can give you one example when  
multiple classes are useful: image sprites.
Imagine: you have generic class like

.sprite {
     display:inline-block;
     width:16px;
     height:16px;
     background:url(sprite-generic.png) no-repeat;
}

and TONS of classes with background-position, different sizes when needed  
etc:
.sprite1
.sprite2
...
.sprite15
...

Instead of .sprite declaration you can make a comma-separated list or copy
properties to each of them. Both ways unnecessary bloats CSS files (even
if you use macros or other tricks in development version in production
it'll be huge) and thus make user to wait first time when he came to site
which is undesirable (user will likely leave site).
Or you can just add a little class for every element. It's a real minor  
addition
comparing to content especially if you have gzip on and use minimizers.

BTW in your case font-styles, text-shadows and so on inherits so there are
not many additional classes needed really. You can set it to containing  
block.


On Thu, 28 Oct 2010 19:30:16 +0400, Jonas Hartmann  
<j0n4s.h4rtm4nn@googlemail.com> wrote:

> 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:53:29 UTC