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

Structural labeling

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

Label classes by function, not appearance or placement

One or more of your classes or ID could be named more appropriately. Instead of using a name that describes an appearance or placement, like .big_box or #blueSection, it's better to use the class name to describe what something does. Here are some other ideas you might consider, mostly taken from newspaper lingo: box_out, callout, crosshead, feature, footer, kicker, lead_story, lede, legalnotice, masthead, main_content, primary_content, pullquote, secondary_content, secondary_lead, sidebar, splash, standfirst, and strapline.

This kind of structural labeling will serve you much better over the long haul because your design is not tied down to whatever the class name implies. You may really be into red the day you create a client's site with the .red_box class, but if the client prefers blue, do you really want to go back and rename all the classes? Or worse, live forever with a CSS declaration like .red_box { color: blue; }? Wouldn't it be better to call it .feature or .kicker regardless of its appearance?

 

What's more, part of the power of CSS is styling your content for different media, which could significantly change the look or placement of your content. So, while an area styled as #upperLeftCorner matches the web page, it could be below your main content on your printed page or in a mobile device. Name your classes by their function and not their appearance or position to avoid such inconsistencies.

Comments (0)

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