HTML5微格式和相關(guān)屬性值命名

id和class屬性名稱必須反映元素的功能或內(nèi)容，而不是反映了介紹。 所以出了header并再來(lái)branding; 出了footer并再取而代之的是site-info。

Naming should take on almost an XML style structure.命名將要承擔(dān)幾乎整個(gè)XML式結(jié)構(gòu)。因此，內(nèi)部content來(lái)了 content-main , content-sub 和 content-supp 。

這些約定為我服務(wù)的很好，我所做的，幾乎沒(méi)有改變他們的核心。毫無(wú)疑問(wèn)，他們都使我的工作速度更快，更一致和更有益。 他們使建立產(chǎn)品更容易，以及更容易用我的思維方式培養(yǎng)與我共事的人。命名約定起作用。

微格式和相關(guān)的屬性名稱

讓我們面對(duì)它，微格式，如hCard，hCalendar，hAtom和其他草案帶來(lái)了如此多的屬性值，以至于常常沒(méi)有必要考慮哪一個(gè)構(gòu)建文件或提供了哪一個(gè)約束CSS模式的掛鉤這些更多的屬性值?，F(xiàn)在我使用微格式達(dá)到這種程度，以至于我甚至不使用class屬性（微格式伴隨的class屬性除外）發(fā)展整個(gè)頁(yè)面。

在難得的場(chǎng)合，我需要添加一個(gè)新元素（假設(shè)布局目的的一個(gè)劃分）我首先想到的是延伸微格式中已經(jīng)存在的。我將給您舉個(gè)使用hAtom模式的例子：

<div class="hentry">
<h2 class="entry-title">Title</h2>

<div class="entry-content">
Main content
</div>

<div class="entry-related">
Related content
</div>
</div>

如果您正在保持微格式的優(yōu)勢(shì)，你已經(jīng)注意到， entry-related不是 hAtom 模式的一部分，但在這種的情況下，我絕對(duì)地，明確地不得不有一個(gè)額外的因素，如何組成一個(gè)像related-sidelinks這樣的屬性值呢？

什么時(shí)候延伸微格式的命名模式看起來(lái)更合邏輯呢？

HTML5
在這個(gè)章節(jié)的開(kāi)始，我應(yīng)該坦率的說(shuō)，此時(shí)此刻，我對(duì)HTML5的關(guān)注不能較少。不過(guò)，這不是問(wèn)題的關(guān)鍵。HTML5引入了一些潛在的非常有用的新元素，例如：

section
一個(gè)普通的文件或應(yīng)用程序部分。章節(jié) ，在這方面，是內(nèi)容的一個(gè)主題分類。

article
由文章組成的頁(yè)面的一部分，構(gòu)成文檔、網(wǎng)頁(yè)或網(wǎng)站的一個(gè)獨(dú)立部分。 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.這可能是一個(gè)論壇，雜志，報(bào)紙文章，網(wǎng)絡(luò)日志，用戶提交的評(píng)論，或任何其他的內(nèi)容的獨(dú)立項(xiàng)目。

aside
由內(nèi)容組成的頁(yè)面的一部分，與aside 元素相關(guān)的內(nèi)容無(wú)關(guān)，并可以被認(rèn)為是從內(nèi)容中分離出來(lái)的。 這些部分，經(jīng)常表現(xiàn)為印刷排版?zhèn)冗厵凇?/P>

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?由于對(duì)微格式的發(fā)明者來(lái)說(shuō)，在現(xiàn)有的規(guī)范上發(fā)展他們的模式是合乎邏輯的，當(dāng)然，現(xiàn)在對(duì)我以適應(yīng)我的命名約定去跟隨HTML5很有意義？當(dāng)然，我還不能使用：

<section>
<h2> Title</h2>

<article>
Main content
</article>

<aside>
Related content
</aside>
</section>
 

但現(xiàn)在我可以使用id和class屬性值來(lái)幫助我熟悉的HTML5，帶著我的文檔朝它更進(jìn)一步。

<div class="section">
<h2> Title</h2>

<div class="article">
Main content
</div>

<div class="aside">
Related content
</div>
</div>
 
我覺(jué)得對(duì)我來(lái)說(shuō)是一個(gè)合乎邏輯的下一步。因此，看看這個(gè)示范文件，我已經(jīng)采取了HTML5元素為我的命名約定的基礎(chǔ)。除了我剛才提到的，留意，我已經(jīng)確定了分類和導(dǎo)航的方式（nav ），用colgroup和col構(gòu)建字段 ，把一個(gè)無(wú)序列表轉(zhuǎn)換為網(wǎng)格，用datagrid。

HTML5的標(biāo)記規(guī)范還包括details ， dialog和figure ，我同樣地可以當(dāng)做屬性值使用。

如果今天我可以實(shí)現(xiàn)一個(gè)愿望，這個(gè)愿望將是所有的CSS框架的開(kāi)發(fā)將采取相同的命名約定（而且也廣泛地嵌入微格式），以便初學(xué)意義豐富的標(biāo)記和CSS的人們有個(gè)正確的出發(fā)點(diǎn)，使用的更有意義，更合邏輯，而不是表象的id和class屬性。