are these css classes names good?

Question

See section /* Common Classes */ of this page.

http://webdesign.about.com/od/css/a/master_stylesht_2.htm

are these css classes good, to use in any project? in terms of semantic?

/* Common Classes */

.clear { clear: both; }

.floatLeft { float: left; }

.floatRight { float: right; }

.textLeft { text-align: left; }

.textRight { text-align: right; }

.textCenter { text-align: center; }

.textJustify { text-align: justify; }

.blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */

.bold { font-weight: bold; }

.italic { font-style: italic; }

.underline { text-decoration: underline; }

.noindent { margin-left: 0; padding-left: 0; }

.nomargin { margin: 0; }

.nopadding { padding: 0; }

.nobullet { list-style: none; list-style-image: none; }

Answer 1

One point that I would like to suggest is, when you are extending these just make sure that you just use verbs instead of using any adjectives as names for the classes and you should be good!

Edit:

I agree with others point of class names representing what it is used for, not exactly what it does.

Answer 2

No, not really.

Preferrably a class name should describe what you use it for, not exactly what it does.

If you for example name a class "bluebold" and then decide that you want the text to be red and italic, you either have to create a new class and change it everywhere it's used, or you end up with a class name that no longer fits.

Answer 3

The name should convey the purpose and how you will use it.

Answer 4

No. They are not good choices. The whole point of css and in particular about the concept of class is to describe "what" something represents, not "how" it should appear. What something means (i.e. its semantics) and how it appears (i.e. its presentation) are two separated concepts. The fact that something is, say, a menu does not change if you decide to show it blue on light blue with one stylesheet and high contrast black on white on another stylesheet made for colorblind people.

If you give class a presentation meaning, changing how a document appears would require changes in the web page html, defeating the whole point of having CSS as a technology specifically designed to provide and encapsulate presentation. To prevent this, the alternative would be to end up having classes whose names do not represent reasonable information (e.g. class called "bluefont" which actually contains a color:red directive). Hence, having "bluefont" as a name is totally arbitrary, and here becomes desynchronized with the actual content. It could have been a random string "abgewdgbcv", but then it's better to choose something that is unrelated to presentation and conveys meaning: its associated semantics.

And we close the circle: it's the whole point of classes. See also this document at W3.

Answer 5

some recomendations:

1. .floatLeft --> .float-left: no camel cased.

2. .bold --> .important name should tell the goal no showing how to do it

3. .nobullet --> ul.nobullet is better to be most specified to avoid conflict with other css.

Answer 6

Common CSS classes are way too granular and promote classitis problem. Pseudo selectors can mitigate the problem to some extent. Assuming a new website is being designed I would do the following:

*{
margin:0;
padding:0
}

li {
list-style: none; 
list-style-image: none;
}

The rest are difficult to address, floatLeft and floatRight are to be defined by the layout,

<div id="main">
<div class="searchPanel">
</div>
<div class="resultsPanel">
</div>
</div>

The CSS ideally should look like ( layout driven) #main searchPanel { float: left; } #main resultsPanel { float: right; }

Hope you get the idea. I however, face problems with bold/underlined text. Underlined text is indicative of ugly design. Users tend to confuse such with hyper-links