Re: css block re-use proposal

If elements looks different aren't they different? So another class is  
fully reasonable.

If visual changes were made due to document structure then structural  
pseudo-classes come to scene, e.g. first-child, last-child, nth-of-type,  
etc. See selectors level 3 section:
http://www.w3.org/TR/css3-selectors/


On Thu, 28 Oct 2010 18:33:06 +0400, Eric Twilegar  
<Eric.Twilegar@onpeak.com> wrote:

> Those solutions require me to go and change my HTML if I want to then  
> change the way something looks.
>
> I'm shooting for more unobtrusive CSS in the same thought process of  
> unobtrusive JavaScript.
>
> Most of my DIVs are classed like this.
>
> <div class="aValue taxRateValue sectionAClass" > ie. generic, specific,  
> location.
>
> I don't like to put classes on my HTML that describe what it looks like.  
> I put classes that describe what it IS and then use CSS to describe what  
> it looks like.
>
> If I do something like this
>
> <div class="aValue bottomlessBorder" >
> </div>
>
> My designer now has to take bottomlessBorder off if he doesn't want it  
> on one this particular div. Most designers are more than capable of  
> editing HTML( server side script), but I don't really want them to.
>
>
> In most of these cases we also have a very specific ID on all of our  
> DIVs ( <div id="" ). So we can put ID level CSS statements in that  
> override and get around it if we like, but it create lost of noise.
>
>
> This suggestion is largely to help CSS designers apply style sets to  
> classes. We have a system that is shared between many clients. Different  
> CSS drives the look and feel. So the classes on the DIVs,etc have to be  
> fairly static and generic.
>
>
> Thanks,
> Eric
>
>
> -----Original Message-----
> From: GreLI [mailto:greli@mail.ru]
> Sent: Thursday, October 28, 2010 9:21 AM
> To: Eric Twilegar
> Cc: www-style@w3.org
> Subject: Re: css block re-use proposal
>
> You can already do code reuse by at least two ways now:
>
> 1. You can group selectors with comma:
> .someRealClassOnADiv,
> .someAnotherRealClassOnADiv {
>        border-style:solid;
>        border-width:1px 1px 0;
> }
>
> 2. You can make class with general attributes and enhance it with
> additional classes:
> .someGenericClass,
> {
>        border-style:solid;
>        border-width:1px 1px 0;
> }
> .specificAdditionalClass {
>        border-color:green;
> }
> .anotherSpecificAdditionalClass {
>        border-color:blue;
> }
>
> <div class="someGenericClass specificAdditionalClass"></div>
> <div class="someGenericClass anotherSpecificAdditionalClass"></div>
>
>
> 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 14:52:39 UTC