: Element naming conventions / inspiration 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

@Cooney243

For a better understanding of historical terminology on which to base your naming convention I would second The Elements of Typographic Style. An ambitious soul has been slowly working through the application of this text to the web: The Elements of Typographic Style Applied to the Web

I would also add The Form of the Book by Jan Tschichold, which is a much quicker read and quite technical in it's typographic terminology.

The ever valuable Grid Systems in Graphic Design by Muller-Brockman was the precursor to templatized divs of the CSS era. It would provide you with a useful vocabulary concerning layout areas. This site mirrors his thoughts in many ways: The Grid System

Vote Up Vote Down

@XinRu324

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 : 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.

Vote Up Vote Down

@Marchetta832

If you work with a web developer, it can be very helpful to maintain a naming convention so he knows what you are intending things for and you know how he builds it. Also keep in mind, would someone else opening your files know what is what without your help? Keep it short and simple.

Resources: googling "naming convention css" brings up a lot of results on how people structure their work.

Vote Up Vote Down