Should css class names like 'floatleft' that directly describe the attached style be avoided?

Question

Lots of websites use class names like floatleft, clearfloat, alignright, small, center etc that describe the

Answer 1

Class names and ids that describe the function is better than using names that describe the styling of the element.

I usually end up not doing it religiously though, because it is in my opinion more convenient to i.e. clear floating elements by using the famous clearfix hack rather than adding clear:both all over the stylesheets.

But I think that LESS and SASS creates interesting opportunities to get the best out of both worlds, because you can have mixins and functions that describes some style and still have semantic correct names by just including whatever 'style' you want.

Instead of having this HTML and CSS

...
.roundedcorners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

you could use SASS to create this mixin:

=rounded-corners
  -moz-border-radius: 5px
  -webkit-border-radius: 5px
  border-radius: 5px

and include it into your .navigation class like this:

.navigation
  +rounded-corners-5px

which would reduce your HTML to this:

...

and therefore still get the advantage of having semantic correct names while having a convenient way to share styles between different elements.