Question

I’m beginning to use CSS more and more but I’m not sure if I’m using it as intended in all cases.

I have classes named things like ‘box’ that will wrap the content inside it with a border, which seems like good CSS to me.

On the other hand I have classes like ‘margin-right-5’ and ‘float-left’ that sets the css to margin-right: 5px and float:left respectively. I’m wondering if this is good practice.

Then in my markup I’d do something like:

<div class="box float-left margin-right-5">
    <!-- CONTENT HERE -->
</div>

Sometimes I may want to float right or not have a margin at all and still use the ‘box’ class, so I use several classes in order to make the css more flexible.

Am I destroying the principles of CSS?

Answer 1

You should not have presentational class name values. The values should dictate the type of content that is there. .content-box for example. Use the most specific name you can, like warning or error-dialog or primary-content.

If you name something left-align and later on in the future you have this left-align class on 10-20 separate templates/include files, it won’t be meaningful when the client decides to want to have that element right-aligned.

Just set whatever rules you need to, and you can make general rules for generic classes and override them if need be.

.content-box { 
  float:left;
  margin:0 0 0 5px;
}

Using your way, you’d define a class for every property-value combination…

<div class="align-left float-left clear-right margin-left-five">

This is a mess. Avoid at all costs.