Comment: HTML5 developing naming conventions and micro formats.
On May 29, 2004, on my retired blog and all the big talk, when I surveyed 40 designer websites to see their conventions for public page elements such as titles and banners, navigation, content and footers (results back then).
It was hardly scientific research, but in June of that year, I followed up with some of Eric Meyer's opinions and published a set of naming conventions. When I find that a website has passed these naming conventions, I am always happy that I am using it every day, even more than 4 years later.
My thoughts could be summarized as this
The id and class attribute names must reflect the function or content of the element, not the introduction. So I came out of the header and went branding again; I came out of the footer and replaced it with site-info.
Naming should take on almost an XML style structure. Naming will take on almost an XML style structure. Therefore, the internal content comes content-main , content-sub and content-supp .
These conventions serve me well, and what I do, hardly changes their core. There is no doubt that they all make my work faster, more consistent and more beneficial. They make it easier to build products and to cultivate people I work with with my mindset. The naming convention works.
Microformat and related attribute names
Let's face it, microformats such as hCard, hCalendar, hAtom and other drafts bring so many attribute values that it is often unnecessary to consider which build file or which hooks to which constraints CSS pattern are provided for these more attribute values. Now I use microformats to reach this level that I don't even use the class attributes (except the class attributes that accompany the microformat) to develop the entire page.
On rare occasions, I need to add a new element (assuming a division of layout purpose) I first think of is what already exists in the extension microformat. I will give you an example of using hAtom mode:
<div class=hentry>
<h2 class=entry-title>Title</h2>
<div class=entry-content>
Main content
</div>
<div class=entry-related>
Related content
</div>
</div>
If you are maintaining the advantages of micro formats, you have noticed that entry-related is not part of the hAtom pattern, but in this case I absolutely, explicitly, have to have an extra factor, how do I make up a property value like related-sidelinks?
When does it seem more logical to extend the naming pattern of microformats?
HTML5
At the beginning of this chapter, I should be frankly speaking, at this moment, I can't pay less attention to HTML5. However, this is not the key to the problem. HTML5 introduces some potentially very useful new elements, such as:
section
A normal file or application section. Chapters, in this regard, are a topic classification of content.
article
Part of a page composed of articles that form an independent part of a document, web page, or website. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.
aside
A part of a page composed of content is independent of content related to aside elements and can be considered separate from the content. These parts are often manifested as printed and typographic sidebars.
As it was logical for the inventors of Microformats to base their schemas on existing specifications, surely it now makes sense for me to adapt my naming conventions to follow those in HTML5? Of course, I can't use:
<section>
<h2> Title</h2>
<article>
Main content
</article>
<aside>
Related content
</aside>
</section>
But now I can use the id and class attribute values to help me familiar with HTML5, taking my documentation to go a step further towards it.
<div class=section>
<h2> Title</h2>
<div class=article>
Main content
</div>
<div class=aside>
Related content
</div>
</div>
I think it's a logical next step for me. So looking at this demonstration file, I've taken the basis of HTML5 elements for my naming convention. In addition to what I just mentioned, note that I have determined the way to classify and navigate (nav), build fields with colgroup and col, convert an unordered list into a grid, and use datagrid.
HTML5's tagging specification also includes details , dialog and figure , which I can also use as attribute values.
If I could achieve a wish today, this wish would be that all CSS framework development will adopt the same naming convention (and also widely embedded in micro formats) so that people who are beginners with meaningful tags and CSS have a correct starting point to use more meaningful and logical rather than the representational id and class attributes.