Use class
with semantics in mind.
Often people use class names like bluetext
, or
redborder
. A much better way to name your classes is with
the role a certain HTML element of that class has.
Good names don't change
Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same.
- Good names
warning
,important
,downloadableImage
andsubmenu
are all good names. They describe what a certain element represents, and they are not likely to change. A warning will always remain a warning, no matter how much the look of the page changes.- Bad names
-
border4px
,lighttext
andprettybackground
are examples of bad names. You might fatten that border to a whopping 5 pixels, or the background may look pretty old after a while, and not pretty at all. An advantage of using CSS is that you won't have to change much in order to change the looks of your website. If you have to change all light text into dark text, and thus change all classeslighttext
todarktext
in all your HTML pages, you're likely to miss a few.
Further Reading
- An online presentation about the separation of semantic and presentational markup.
- The Web Style Sheets homepage.
- Using style sheets style guide.