Element naming conventions / inspiration [closed]

I work in front end markup so I’m constantly templating site. Does anyone know of good resources to learn some good conventions or inspiration for element names? I like names that relate to print layouts so perhaps someone could point me to a resource for naming different sections of a document/layout.

I get a bit sick of using generic names such as block, wrapper, content, header etc over and over. Things like colophon, masthead, hero etc seem to hold more meaning.

Answer

I think this is quite a common problem when writing good markup and something which I’ve encountered myself often and have tried to tackle in a few ways.

For me the first, and probably most important, way to tackle it is to try as much as possible to keep your markup as semantic as you can.

Jeremy Keith wrote an excellent book on HTML5 and a section in it focuses on semantic markup. You can read it online for free here : http://html5forwebdesigners.com/semantics/index.html#structure

Effectively, the new HTML5 tags are a big help when using markup to structure your page. Some of the main new tags are section, header, footer, aside, nav and article. There are also some more obscure tags that focus on elements like blockquote, figure, caption and more.

Basically, by trying to always structure your page using these tags instead of this:

<div class="wrapper">
  <div id="article-1" class="block">
    <div id="article-1-masthead" class="masthead">
      <div id="article-1-header" class="header">
        <h1>Main heading</h1>
        <div id"article-1-colophon" class="colophon">
          <p>Text for colophon/details here</p>
        </div>
      </div>
      <div id="article-1-content" class="content">
        <p>Text of Content here...</p>
      </div>
    </div>
  </div>
</div>

(I used this markup to try to replicate the scenario you outline in your example) you can reduce it to something more like this…

<section>
  <article id="article-1">
    <header>
      <h1>Example Heading</h1>
      <details>Text for colophon/details here</details>
    </header>
    <p>Text of Content here...</p>
  </article>
</section>

Obviously this looks much cleaner, but it is worth noting that not all browsers really understand it yet. Luckily you can use polyfills so that browsers not yet supporting the tags can still display them OK.

HTML5 Doctor is an excellent resource for understanding these tags and how to implement them.

Beyond that, for styling purposes it is good practice to try to use selectors which reduce the amount of clutter in your markup.

Using selectors such as:

#article-1 header details {
  color: red;
}

for example might reduce the need to name class or ids in your markup.

There are also attribute selectors which can be another good way to style content without the need in increase the markup.

Beyond that you might still reach a point where you still would like to know some more terms for your naming conventions.

Especially for typographic elements I would definitely recommend the classic book The Elements Of Typographic Style – which you can read online for free with that link. I’d recommend buying a copy though, if you are interested in this kind of information.

I hope that this is of interest to you and not patronising.

Basically i’m just explaining the kind of process I’ve gone through when faced with the same challenges.

At the end of it all the best result is one with the cleanest, most easily understood markup and especially for future proofing I tihnk it makes a lot of sense to really understand the HTML5 tags and use them appropriately where possible to achieve this.

Attribution
Source : Link , Question Author : JackMahoney , Answer Author : Chris

Leave a Comment