3

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; }
James Westgate
  • 11,306
  • 8
  • 61
  • 68
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • 1
    Those are rule-sets with class selectors that match HTML classes, not CSS classes (which don't exist). The term "CSS class" has been applied to "rule-sets", "selectors", "class selectors" and "HTML classes" making it imprecise and confusing as well as wrong. It is best avoided. – Quentin Apr 11 '10 at 17:43
  • possible duplicate of http://stackoverflow.com/questions/1790455/whats-the-best-way-to-name-id-classes-in-css-and-html – Jørn Schou-Rode Apr 15 '10 at 09:02
  • @takpar camel or not, this is not important. The point is what's the meaning of these classes, not their visual sense. – Covi Jan 26 '12 at 23:13

5 Answers5

14

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.

Stefano Borini
  • 138,652
  • 96
  • 297
  • 431
  • but `.bold { font-weight: bold; }` will be same always. because we will use same classes in every project and will not change in these properties. – Jitendra Vyas Apr 11 '10 at 17:45
  • the point is not if you will have `.bold { font-weight: bold; }` going to become `.bold { font-decoration: italic; }`. The point is that if you want something to change from bold to italic, you will have to hunt it down in the html, but presentation is a matter of the stylesheet. If you have to touch the html to deal with presentation, it means that you are doing it wrong. – Stefano Borini Apr 11 '10 at 17:50
  • @Stefano - Ok i got your point. but whenever client need any change in design or in content then we will have to edit something in HTML. and in CMS i can change class name at one place and that will be changed in whole site. – Jitendra Vyas Apr 11 '10 at 17:53
  • Do you drive stick ? the fact that you can put a gear in without pressing the clutch thanks to the synchronizer does not mean that you should not press the clutch. If the CMS is helping you doing something, so better for you, but you are still misusing the concept. Eventually, your gearbox will break down. – Stefano Borini Apr 11 '10 at 18:00
  • @Stefano Borini - OK. After read ur answer and comments . i'm thinkiong i should not use these type of readymade classes. i should only make classes when i need to make. and those classes names should based on describe "what" something represents, not "how" it should appear. so for bold text `.important` would be good – Jitendra Vyas Apr 11 '10 at 18:05
  • 1
    For bold text, `important` is generally a pretty poor choice. The CSS spec warns against this: """ Note. CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not. """. You should probably use a `` element instead. – Quentin Apr 12 '10 at 12:47
  • @David : very important point, thank you. There are semantically meaningful tags in html, and you should use them when appropriate. – Stefano Borini Apr 12 '10 at 14:26
  • @david - I was talking about when we use bold text just for presentation. `` is related to screen reader.and it has speial meaning than `` and i'm talking about .important as a replacement of `` – Jitendra Vyas Apr 14 '10 at 02:18
  • @stefano - when i give image inside

    to float right side i always use `class="floatRight"` is this class name not semantic if no then what would be the appropriate name

     – Jitendra Vyas Apr 14 '10 at 02:19
  • @metal-gear-solid — `` is not related to screen readers, it is just another bit of markup, one which, unlike ``, has semantic meaning. If you want to make something bold because it is `.important` then you almost certainly want to emphasize it. It is *very*, **very** rare that anything is done *just for presentation* (I grew out of my "Wouldn't it be great if every other letter in the entire poster was a different colour!" phase a very long time ago). – Quentin Apr 14 '10 at 06:24
  • @metal-gear-solid : it depends. You can use something like "supporting" for floating images, and "central" for critical, central images that require a text break and then the image. Of course, you have to be practical, and floatRight can be ok, but it should be the exception, not the rule. Remember you can use two or more classes at the same time in the same tag, combining their effect. – Stefano Borini Apr 14 '10 at 10:19
13

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.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • +1 semantics is about meaning, not representation, although I am always skeptical about using this semantic meaning for other purposes, like in class-based microformats. – Stefano Borini Apr 11 '10 at 17:31
  • but normally we use these classes for multiple purpose. and in class groups like. `

     – Jitendra Vyas Apr 11 '10 at 17:34
  • It would make more sense to call those classes "MainFrameHeader" or "MainFrameHeaderSubTitle" or something that describes what it is, rather than what it should look like. This answer is spot on the mark, as soon as you change something you're in trouble. – NibblyPig Apr 11 '10 at 17:39
  • @SLC but in my example `.noindent` will be always `{ margin-left: 0; padding-left: 0; }`. no need to change – Jitendra Vyas Apr 11 '10 at 17:41
  • … and then you end up writing class="noindent" on half the start tags in the document. Use class names that describe groups of elements, then write CSS to match it. If you're adding a description of presentation to the HTML then you're doing it wrong. – Quentin Apr 11 '10 at 17:46
  • @metal-gear-solid: If you use CSS like that, you could just skip the style sheet and write inline style attributes. You are missing the whole point of using classes. Check out http://www.csszengarden.com/ for an example of how different style sheets can make a page look completely different without changing the html code at all. – Guffa Apr 11 '10 at 18:04
  • @Guffa - I agree with your point. but in http://www.csszengarden.com/ content is always fixed and we are free to make any style/design. but this is not a case with Clients – Jitendra Vyas Apr 11 '10 at 18:10
  • @metal-gear-solid: Still, the principle is the same. The class names in the html code should describe what the content is, not how it should look. Then you get the true separation of content and layout that is most of the point of using a style sheet. – Guffa Apr 11 '10 at 18:50
  • @metal It's likely you will want a combination of styles, such as a header no indent and bold, a subheader no intent and italic, etc. and if you use that method you will end up with every element in your html having tons of different CSS attributes, which is essentially the same as doing it inline (as Guffa pointed out). The idea is (usually) to have one CSS tag for each element in your HTML so you can style and customise it with relative ease. – NibblyPig Apr 11 '10 at 19:14
  • @SLC - but almost every popular CSS frameworks use multiple classes method. `
    ` http://www.blueprintcss.org/tests/parts/grid.html
     – Jitendra Vyas Apr 14 '10 at 02:54
  • @metal-gear-solid: Yes, elements can very well use several classes, but you don't want a class for every single style so that you end up having to writing stuff like `
    `.
     – Guffa Apr 14 '10 at 06:15
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.

Mahesh Velaga
  • 21,633
  • 5
  • 37
  • 59
-1

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

questzen
  • 3,260
  • 18
  • 21
-3

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.

Alexar
  • 1,858
  • 5
  • 24
  • 34