Question

I hope this isn’t a duplicate, but I’m not sure even how to phrase what I’m trying to do. I have some utility CSS rules for like clearing floats and creating horizontal boxes. What I want to do is something like this:

.clear{
    clear:both;
}
#someID > div{
    /*apply the .clear class here*/
}

I know I can do this with JavaScript, but I would like to avoid having class="clear" a million times if I can avoid it. I would also like to avoid duplicating the style information in the second selector so I don’t have to maintain multiple utility classes.

The .clear class is just an example, my actual classes are more involved.

Answer 1

Really, you’re just going to have to use your utility classes like clear throughout your markup, unless you want to do something like this (which is probably not what you want):

.clear, #someID > div 
{
    clear:both;
    /* this assumes you have no other rules here, which probably isn't true */
}

In short, there’s not much better you can do, unless you want to use a preprocessor for your CSS, like LESS.