long css styles vs. mutliple class calls

[pSouper]

Hi all, has anyone any thoughts on whether it is better to use more detailed/ specific css styles or to include more classes in the elements class attribute?

eg… would you rath er make a css class like this…

<_styles>

.myBox {

background-color:#ccc;

border 1px solid #f0f;

box-shadow: 10px 10px 5px #888888;

float:right;

}

<_/styles>

<_div class="myBox">Hello<_>


OR like this…

<_styles>

.myBox {

background-color:#ccc;

}

.fr {

float:right

}

.border {

borer:1px dotted #f0f;

}

.shadow {

box-shadow: 10px 10px 5px #888888;

}

<_/stlyes>

<_div class="myBox fr border shadow">hello<_/div>


– any thoughts on the pro’s and cons of either way would make for an interesting topic

[Paulie_D]

I think you will find that most ‘forward thinking’ developers/designers are working with a form of Object Oriented CSS.

We’ll have components with common styles that we can use and re-use and then add additional classes depending on the type of combined element we want.

Take CSS-Tricks main page. Chris has a ‘module’ component that is basically a white box with margin and padding on it. Each box then gets another class which adds the top-border color depending on what the post type is.

So while he is chaining classes, he’s not doing it to the extent that your example would suggest.

I’m not going to create individual property (.border-1) for a 1px border and another for a 2px border (.border-2)….that way lies madness.

[pSouper]

Thanks paulie_d,
although not completely ignoring less/sass I don’t much like the idea of it – but then I haven’t used it enough to get over the curve.

I currently favour the ‘chaining’ method but as you mention the (.border-1) example could lead to madness but I do do this to a degree. I have a mini css file of presets that i link to after the reset.css. [my] sites tend to use only three flavours of most layout variables which I refer to as the “coffee shop menu” because it has a skinny, regular & grande versions of the most common classes such as padding, margin, float, text-align, background-color&color combos etc

e.g:

.paddingMin, .paddingMed and .paddingMax each set a {padding: n;}
.paddingMinT, .paddingMedT, .paddingMaxT each set a {padding-top: n;}

this means that when I need to nudge things around I just chain a skinny, regular or grande class” .paddingMedT or paddingMinL ect.
it really speeds up my design on the fly development and prevents the ‘patchwork quilt’ effect that easily comes from offering too many possibilities when 3 will be fine (or 5 with superMin & superMax).

… my question was really about how efficient/inefficient/irrelevant or inadvisable this method was. to me it make perfect sense but maybe that’s just me.

[Paulie_D]

That doesn’t sound efficient to me but if it works for you.

It depends on why you are “nudging things around”.

Is it so that the page will look the same in all browsers in which case, I would stop using a reset css and use normalize.css?

As for multiple ‘padding/margin/border’ versions, why not just have a fixed value for each and be consistent throughout?

[Author]

Posts