| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Proper classes

Page history last edited by Joseph Lowery 15 years, 2 months ago

Repeating class in single containing element

Be wary of using the same class over and over again in a single containing element. This practice, known as "classitis", really clutters up your code. Luckily, classitis can be easily avoided by using descendent selectors. For example, let's say you've got three paragraphs—each with the same class name such as .theText—inside a div with an ID of #content, like this:

 

<div id="content">

  <p class="theText">First paragraph...</p>

  <p class="theText">Second paragraph...</p>

  <p class="theText">Third paragraph...</p>

</div>

 

In this example, you'd also have a CSS rule like this:

.theText { font-size: 120%; color: #999; }

 

You can really clean up your code to improve readability and even load time by changing your markup to this:

 

<div id="content">

  <p>First paragraph...</p>

  <p>Second paragraph...</p>

  <p>Third paragraph...</p>

</div>

 

And a CSS rule which uses descendent selectors, like this:

#content p { font-size: 120%; color: #999; }

 

Descendent selectors can be applied in a great many situations and are an excellent tool for eliminating unnecessary classes.

 

 

Single use of class on a page

There's only one application of this class on the page. If you really intend to use the class just once on every page in your site, you should consider switching it to an ID. Classes are intended to be used multiple times on a page and IDs only once. While the improper use of classes isn't really critical, it's a good practice to follow. Moreover, proper usage now ensures forward compatibility later.

 

Here's an example: 

 

On your page you have a paragraph of class "byline" that gets applied to the name of the author of the article being read. If there is only one article per page, and only one paragraph of class "byline" per page, maybe "byline" should be an ID, since it identifies a singular instance: the naming, just once per page, of the author of that page. 

 

Of course, if you have a class used just once on one page, but several times on any other page in your site, you're cool and don't have to take any action. (If your home page lists three articles, each with a "byline," then "byline" should remain a class, and not be converted to an ID.)

 

Another set of exceptions to keep in mind is seen with microformats. Most microformats use a class to identify an instance and, often, such a microformat is used but once on the page. For example, let's say you have an hCard set up on your contact page. The surrounding tag includes an attribute like this: class="hcard". If you only have one such hCard on the page, that could be construed as a nonstandard use, but it's perfectly fitting. The same holds true for other microformats, including hCalendar, XOXO, XFN, XMDP, and VoteLinks.

 

Comments (0)

You don't have permission to comment on this page.