CSS教程:語(yǔ)義化方法替代結(jié)構(gòu)化方法介紹

時(shí)間：2024-11-04 19:51:35 CSS 我要投稿

相關(guān)推薦

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

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

　　讓我們看看下面這個(gè)例子:

　　…而現(xiàn)在我們想把頁(yè)面中的元素調(diào)換一下位置，如果你使用的是結(jié)構(gòu)化方式(1)，那么你就要把所有CSS類(lèi)名重新進(jìn)行定義，因?yàn)樗鼈兊奈恢米兞恕Ｔ诓季?3)中，我們看到元素都倒轉(zhuǎn)了:right-bar 現(xiàn)在成了 “l(fā)eft-bar”，而left-content 成了 “right-content”。如果你使用語(yǔ)義化方式則避免了此類(lèi)問(wèn)題。

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

　　教程網(wǎng)會(huì)經(jīng)常更新前端開(kāi)發(fā)/網(wǎng)頁(yè)設(shè)計(jì)等相關(guān)技術(shù)及教程文章，歡迎及時(shí)瀏覽教程網(wǎng)的最新教程及資源。關(guān)于語(yǔ)義化的一些建議:

　　在開(kāi)始之前，我想推薦兩種簡(jiǎn)單的編寫(xiě)較好的CSS代碼的指導(dǎo)方針: 為CSS類(lèi)名定義的時(shí)候，盡量使用小寫(xiě)字母，如果有兩個(gè)以上的單詞，在每個(gè)單詞之間使用”-”符或單詞首字母大寫(xiě)(第一個(gè)單詞除外)。如:”main-content”或”mainContent”。優(yōu)化CSS代碼，僅創(chuàng)建關(guān)鍵主要的CSS類(lèi)并重新為子元素使用符合HTML標(biāo)準(zhǔn)的標(biāo)簽(h1, h2, p, ul, li, blockquote,…)，例如,不要使用這種哦你那個(gè)方式:

　　而要這樣寫(xiě):

　　…

　　三欄布局中使用語(yǔ)義化方式的例子

　　讓我們來(lái)通過(guò)這個(gè)簡(jiǎn)單的例子講解一下如何為經(jīng)典的三欄布局使用語(yǔ)義化方式命名:

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

　　#container{…}

　　/*—- Top section —-*/

　　#header{…}

　　#navbar{…}

　　/*—- Main —-*/

　　#menu{…}

　　#main{…}

　　#sidebar{…}

　　/*—- Footer —-*/

　　#footer{…} Container

　　“#container“就是將你頁(yè)面中的所有元素包在一起的部分，這部分你還可以命名為:“wrapper“, “wrap“, “page“. Header

　　“#header”是網(wǎng)站頁(yè)面的頭部區(qū)域，一般來(lái)講，它包含網(wǎng)站的logo和一些其他元素。這部分你還可以命名為:”top“, “l(fā)ogo“, “page-header” (或 pageHeader). Navbar

　　“#navbar“等同于橫向的導(dǎo)航欄，是最典型的網(wǎng)頁(yè)元素。這部分你還可以命名為:“nav”,“navigation”,“nav-wrapper”. Menu

　　“#Menu”區(qū)域包含一般的鏈接和菜單，這部分你還可以命名為:“sub-nav“, “l(fā)inks“. Main

　　“#Main”是網(wǎng)站的主要區(qū)域，如果是博客的話(huà)它將包含你的日志。這部分你還可以命名為:“content“, “main-content” (or “mainContent”)。 Sidebar

　　“#Sidebar”部分可以包含網(wǎng)站的次要內(nèi)容，比如最近更新內(nèi)容列表、關(guān)于網(wǎng)站的介紹或廣告元素等…這部分你還可以命名為:“sub-nav“, “side-panel“, “secondary-content“. Footer

　　“#Footer”包含網(wǎng)站的一些附加信息，這部分你還可以命名為:“copyright“.

【CSS教程:語(yǔ)義化方法替代結(jié)構(gòu)化方法介紹】相關(guān)文章：

實(shí)現(xiàn)html方法結(jié)構(gòu)化10-01

CSS教程之重置默認(rèn)樣式與IE兼容圓角的解決方法07-18

CSS閉合浮動(dòng)元素教程06-26

CSS選擇器教程06-05

CSS教程之盒模型10-17

分享Excel VBA教程 Excel多個(gè)表格匯總的方法教程05-15