Use class with symantics in mind - Quality Web Tips</h1> <link rel="stylesheet" href="http://www.w3.org/QA/2002/12/qa4.css" /> <link rel="stylesheet" href="qa4.css" /> </head> <body>  <div id="Logo"> <a href="http://www.w3.org/"><img alt="W3C" src="/Icons/WWW/w3c_home" /></a> <a href="http://www.w3.org/QA/"><img alt="QA" src="/QA/images/qa" width="130" height="48" /></a> <div><map name="introLinks" id="introLinks" title="Introductory Links"> <div class="banner"> <a class="bannerLink" title="W3C Activities" accesskey="A" href="/Consortium/Activities">Activities</a> | <a class="bannerLink" title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports</a> | <a class="bannerLink" title="Alphabetical Site Index" accesskey="S" href="/Help/siteindex">Site Index</a> | <a class="bannerLink" title="Help for new visitors" accesskey="N" href="/2002/03/new-to-w3c">New Visitors</a> | <a class="bannerLink" title="About W3C" accesskey="B" href="/Consortium/">About W3C</a> | <a class="bannerLink" title="Join W3C" accesskey="J" href="/Consortium/Prospectus/Joining">Join W3C</a></div> </map></div> </div>  <div id="Menu"> <p> <a href="#id01">Good names</a><span class="dot">·</span> <a href="#id03">Bad names</a><span class="dot">·</span> <a href="#read">Further Reading</a><span class="dot">·</span></p> <hr /> <p class="navhead">Nearby:</p> <p><a href="/QA/Tips/">Tips Index</a><span class="dot">·</span> <a href="/QA/"><abbr title="Quality Assurance">QA</abbr> Homepage</a><span class="dot">·</span> <a href="/QA/IG/">QA <abbr title="Interest Group">IG</abbr></a><span class="dot">·</span> <a href="http://validator.w3.org">Markup Validator</a><span class="dot">·</span> <a href="/QA/Tools/qa-dev">QA-dev</a><span class="dot">·</span> </p> </div>  <div id="Content"> <h1>Use <code>class</code> with symantics in mind.</h1> <p>Often people use class names like <code>bluetext</code>, or <code>redborder</code>. A much better way to name your classes is with the role a certain HTML element of that class has.</p> <h2 id="id01">Good names don't change</h2> <p>Think about <em>why</em> you want something to look a certain way, and not really about <em>how</em> it should look. Looks can always change, but the reasons for giving something a look stay the same.</p> <dl> <dt id="id02"><strong>Good names</strong></dt> <dd><code>warning</code>, <code>important</code>, <code>downloadableImage</code> and <code>submenu</code> 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.</dd> <dt id="id03"><strong>Bad names</strong></dt> <dd> <code>border4px</code>, <code>lighttext</code> and <code>prettybackground</code> 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 classes <code>lighttext</code> to <code>darktext</code> in <em>all</em> your HTML pages, you're likely to miss a few. </dd> </dl> <h2 id="read">Further Reading</h2> <ul> <li> An <a href='http://www.w3.org/2001/tag/doc/contentPresentation-26.html'>online presentation</a> about the separation of semantic and presentational markup.</li> <li>The <a href='http://www.w3.org/Style/'>Web Style Sheets</a> homepage.</li> <li><a href='http://www.w3.org/Provider/Style/StyleSheets.html'>Using stylesheets</a> style guide.</li> </ul> </div>  <hr /> <div class="disclaimer"> <a href="http://validator.w3.org/check/referer"><img src="http://validator.w3.org/images/vxhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a> <address> Created Date: 2004-03-08 by <a href="mailto:sybren@thirdtower.com">Sybren St�vel</a><br/> Last modified $Date: 2004/03/23 12:16:00 $ by $Author: ot $ </address> <p class="policyfooter"><a rel="Copyright" href="/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2000-2003 <a href="/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.lcs.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>, <a rel="Copyright" href="/Consortium/Legal/copyright-documents">document use</a> and <a rel="Copyright" href="/Consortium/Legal/copyright-software">software licensing</a> rules apply. Your interactions with this site are in accordance with our <a href="/Consortium/Legal/privacy-statement#Public">public</a> and <a href="/Consortium/Legal/privacy-statement#Members">Member</a> privacy statements.</p> </div> </body> </html>