Search code examples
csssemantic-markup

are these css classes names good?

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; }
Solution

  • 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.