當前位置：才華齋>設計>網頁設計>

CSS教程:語義化方法替代結構化方法介紹

網頁設計閱讀(1.09W)

CSS程式碼的命名慣例一直是大家熱門討論的話題。今天教程網想通過分析一個流行三欄佈局中的必要元素，來為大家講解關於使用語義化方法替代結構化方法來命名CSS類的建議和指導。CSS類命名的語義化VS結構化方式

一般而言，CSS類名的語義化宣告方式應當考慮你的頁面中某個相對元素的”用意”，獨立於它的”定位”或確切的特性(結構化方式)。像left-bar, red-text, small-title…這些都屬於結構化定義的例子。

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

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

換句話說，使用語義化方式的話，你在修改網站佈局的時候可以僅僅修改相關CSS類的屬性即可，而不用修改它們的類名了，如果網站的程式碼很龐大，這將節省大量的時間。

教程網會經常更新前端開發/網頁設計等相關技術及教程文章，歡迎及時瀏覽教程網的最新教程及資源。關於語義化的一些建議:

在開始之前，我想推薦兩種簡單的編寫較好的CSS程式碼的`指導方針: 為CSS類名定義的時候，儘量使用小寫字母，如果有兩個以上的單詞，在每個單詞之間使用”-”符或單詞首字母大寫(第一個單詞除外)。如:”main-content”或”mainContent”。優化CSS程式碼，僅建立關鍵主要的CSS類並重新為子元素使用符合HTML標準的標籤(h1, h2, p, ul, li, blockquote,…)，例如,不要使用這種哦你那個方式:

而要這樣寫:

…

三欄佈局中使用語義化方式的例子

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

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

#container{…}

/*—- Top section —-*/

#header{…}

#navbar{…}

/*—- Main —-*/

#menu{…}

#main{…}