武林網(wǎng)(www.survivalescaperooms.com)文章簡介：今天網(wǎng)頁教學(xué)網(wǎng)想通過分析一個流行三欄布局中的必要元素，來為大家講解關(guān)于使用語義化方法替代結(jié)構(gòu)化方法來命名CSS類的建議和指導(dǎo)。

　CSS代碼的命名慣例一直是大家熱門討論的話題。今天網(wǎng)頁教學(xué)網(wǎng)想通過分析一個流行三欄布局中的必要元素，來為大家講解關(guān)于使用語義化方法替代結(jié)構(gòu)化方法來命名CSS類的建議和指導(dǎo)。

　　一般而言，CSS類名的語義化聲明方式應(yīng)當(dāng)考慮你的頁面中某個相對元素的”用意”，獨立于它的”定位”或確切的特性(結(jié)構(gòu)化方式)。像left-bar, red-text, small-title…這些都屬于結(jié)構(gòu)化定義的例子。

讓我們看看下面這個例子:

　　…而現(xiàn)在我們想把頁面中的元素調(diào)換一下位置，如果你使用的是結(jié)構(gòu)化方式(1)，那么你就要把所有CSS類名重新進(jìn)行定義，因為它們的位置變了。在布局(3)中，我們看到元素都倒轉(zhuǎn)了: right-bar 現(xiàn)在成了 “left-bar”，而 left-content 成了 “right-content”。如果你使用語義化方式則避免了此類問題。

　　換句話說，使用語義化方式的話，你在修改網(wǎng)站布局的時候可以僅僅修改相關(guān)CSS類的屬性即可，而不用修改它們的類名了，如果網(wǎng)站的代碼很龐大，這將節(jié)省大量的時間。

　　網(wǎng)頁教學(xué)網(wǎng)會經(jīng)常更新前端開發(fā)/網(wǎng)頁設(shè)計等相關(guān)技術(shù)及教程文章，歡迎及時瀏覽網(wǎng)頁教學(xué)網(wǎng)的最新教程及資源。

　　在開始之前，我想推薦兩種簡單的編寫較好的CSS代碼的指導(dǎo)方針:

<div class=”main”>
    <div class=”main-title”>…</div>
    <div class=”main-paragraph”>…</div>
</div>

而要這樣寫:

</p>
</div>

　　讓我們來通過這個簡單的例子講解一下如何為經(jīng)典的三欄布局使用語義化方式命名:

　　　使用語義化方式為CSS命名可以像這樣:

#container{…}
/*—- Top section —-*/
    #header{…}
    #navbar{…}
    /*—- Main —-*/
    #menu{…}
    #main{…}
    #sidebar{…}
    /*—- Footer —-*/
    #footer{…}