the Future of the Web
  • Articles
  • Contact
  • Context-Sensitive Class Names

    Jul 26 2006

    Usually when assigning class names, it's most natural to assign a different class name to each uniquely styled area of the page. Often, there are common words you'll want to use as class names in more than one spot on the page such as 'date', 'section', 'title', etc.

    At first, it seems the solution is to make up unique class names like 'header-date' and 'comment-date' or 'side-section' and 'main-section.

    Instead of doing this, you can just stick to using your simple 'date' and 'section' class names but refer to them in their context. For example, if your mark-up looks something like this:

    <div class="side">
        <h2 class="title">Side Title</h2>
    </div>
    
    <div class="main">
        <h2 class="title">Main Title</h2>
    </div>
    

    Then you could define your CSS like so:

    .side .title { font-size: 1.2em }
    .main .title { font-size: 2em }
    

    Even better, you can get rid of the unnecessary class names and just define styles onto elements within different sections of the page:

    .side h2 { font-size: 1.2em }
    .main h2 { font-size: 2em }
    

    You also have the option of doing element-sensitive definitions. Perhaps an <h2> tag with a 'date' class can mean something different than an <h3> tag. Then, just do this:

    h2.date { color: blue; background: white }
    h3.date { color: green; background: red; }
    

    This is pretty simple stuff, but it opens up all sorts of possibilities for keeping your HTML as clean as possible. Just be careful not to get confused (or confuse others) by using the same class name for more than one purpose.

    Add a comment
  • Comments

    Commenting is now closed.

  • Jesse Skinner

    Jesse Skinner
    • About Me
    • Email Me
    • RSS Feed RSS Icon
    • @JesseSkinner
  • Recent Articles

    • Coding with Jesse
    • Deciphering Usability
    • Free eBook: Unobtrusive Ajax
    • Official jQuery Templating Plugin
    • jQuery Live Events
    • buttons need type="submit" to submit in IE
    • Use Arrays in HTML Form Variables
    • 5 Reasons Freelancers Can Succeed in a Shrinking Economy
    • Keeping a Live Eye on Logs
    • Using PHP's empty() Instead of isset() and count()
    • See All...
  • Categories

    • javascript (41)
    • about (17)
    • links (17)
    • web (14)
    • html (12)
    • server (11)
    • css (9)
    • browsers (8)
    • carnival (7)
    • work (5)
    • ads (4)
    • standards (4)
    • events (4)
    • design (4)
    • seo (4)
  • Older Articles

    • December 2014
    • September 2013
    • October 2010
    • February 2009
    • January 2009
    • December 2008
    • November 2008
    • October 2008
    • July 2008
    • June 2008
    • May 2008
    • April 2008
    • February 2008
    • January 2008
    • December 2007
    • November 2007
    • September 2007
    • August 2007
    • July 2007
    • June 2007
    • May 2007
    • April 2007
    • March 2007
    • February 2007
    • January 2007
    • December 2006
    • November 2006
    • October 2006
    • September 2006
    • August 2006
    • July 2006
    • June 2006
    • May 2006
    • April 2006
    • March 2006
    • February 2006
    • January 2006
    • December 2005
    • November 2005
    • October 2005
    • September 2005
    • August 2005
    • April 2005
    • See All...
Copyright © 2019 The Future of the Web