CSS命名的語義化和html5為語義和體驗(yàn)而生

2020-03-24 15:44:52

字體：大中小

供稿：網(wǎng)友

開篇前的一些YY曾幾何時(shí)，一個(gè)人出設(shè)計(jì)稿，出完設(shè)計(jì)稿打開DW用拖出一個(gè)頁面，再苦逼一點(diǎn)拖完頁面后自己還要寫后臺(tái)，武林人稱：美工。更苦逼的是當(dāng)每一次需求變更后，去修改一大堆發(fā)麻的，于是 div+css 被搬上了互聯(lián)網(wǎng)時(shí)代的舞臺(tái)，一夜間N多的《DIV+CSS》葵花寶典橫空出世，那時(shí)，我們活在了div+css的年代，那時(shí)，我們用上了之后，腰不酸，腿不痛，加班也帶勁了。YY結(jié)束，切入正題Ghost曾在2年前就以《頁面重構(gòu)中的語義化》一文對(duì)語義化做過講解，還有碼頭的《語義化的HTML結(jié)構(gòu)到底有什么好處？》重構(gòu)歷經(jīng)7年，也許時(shí)至今日，我們可以熟練地寫出一個(gè)頁面，但對(duì)于寫好一個(gè)頁面又談何容易？讓我們梳理一下思路，重溫下基礎(chǔ)，并結(jié)合現(xiàn)在的趨勢(shì)，再來談一下語義化這個(gè)話題，神馬是語義化？為何要語義化？重構(gòu)中的語義化基本可以分為2塊：(x)html標(biāo)簽的語義化和css命名的語義化。(x)html標(biāo)簽的語義化不廢話上案例：(圖1)圖1非語義化的實(shí)現(xiàn)方式：no_emantic_html 語義化的實(shí)現(xiàn)方式：emantic_html你對(duì)情有獨(dú)鐘嗎？拿到一個(gè)設(shè)計(jì)稿之后，不經(jīng)意間無數(shù)的已經(jīng)在你的彈指神功下落在屏幕？如果是no_emantic_html那樣，恭喜你得了戀用合理HTML標(biāo)記以及其特有的屬性去格式化文檔內(nèi)容這是舒克對(duì)語義化標(biāo)簽的解釋，能不用的地方不用是無語義的標(biāo)簽，原本單詞是division，為分隔、區(qū)塊的意思，一般只用在架構(gòu)html的地方，在(x)html以前的版本。不過怎樣才能寫出語義化的標(biāo)簽？從基礎(chǔ)入手吧，每天跟我們打交道的最多的就是div h1-h6 ul-li p之類的標(biāo)簽了，不知大家有沒有對(duì)這些標(biāo)簽做過深入的理解，來看下面這張表
以上只是列出了我們常用的一些標(biāo)簽，更多的標(biāo)簽請(qǐng)查閱w3c ，基本所有的html標(biāo)簽都是一個(gè)單詞或者詞組的縮寫，這樣其實(shí)本意是更便于我們對(duì)語義化的理解。其實(shí)所有的(x)html標(biāo)簽中，除了和2個(gè)無語義的標(biāo)簽，其他標(biāo)簽都有它存在的意義，只有知道有哪些標(biāo)簽，以及對(duì)各個(gè)標(biāo)簽的本義做一個(gè)了解才能知道去用它。你不知道何時(shí)用定義列表標(biāo)簽？又如果你不知道有標(biāo)簽？如果在一個(gè)頁面中看到的基本全是div，那么說明你對(duì)語義化標(biāo)簽的使用還不是很明白：明明是一個(gè)標(biāo)題，可以用標(biāo)簽來實(shí)現(xiàn)，卻非要用無語義的標(biāo)簽來實(shí)現(xiàn)，又或者一個(gè)段落，用標(biāo)簽是否更語義？大家都知道每年的CSS裸奔節(jié)吧？如果選用的標(biāo)簽幾乎全是不帶語義的，那么在去樣式后網(wǎng)頁中幾乎看不到任何結(jié)構(gòu)信息，可讀性非常差；如果選用的都是語義適合的標(biāo)簽，去樣式后網(wǎng)頁依然具有非常好的可讀性；各個(gè)瀏覽器有自己的默認(rèn)樣式，默認(rèn)的樣式給予了各個(gè)標(biāo)簽不同的顯示，標(biāo)簽使用的正確與否能體現(xiàn)網(wǎng)站的可用性，這也是檢驗(yàn)一個(gè)網(wǎng)站可用性的最簡(jiǎn)單的方法之一。這個(gè)推薦大家去看W3C官網(wǎng)的標(biāo)簽的使用，用web developer禁掉它的CSS看看如何？CSS命名的語義化CSS語義化的命名是指用易于理解的名稱對(duì)html標(biāo)簽附加的class或id命名。語義化的命名這里就涉及到了團(tuán)隊(duì)的命名規(guī)范，只有在團(tuán)隊(duì)的規(guī)范的基礎(chǔ)之上進(jìn)行更好的語義化命名才是王道。在我的理解，一個(gè)語義化的CSS命名至少應(yīng)遵守如下約定：盡量規(guī)避拼音命名，用英文單詞去命名單詞之間連接用三種方式：下劃線_ 、間隔符-、駝峰命名。具體使用哪種方式請(qǐng)根據(jù)團(tuán)隊(duì)的規(guī)范，但個(gè)人建議不要同時(shí)使用2種以上的連接方法同時(shí)命名單詞后不要跟無意義的數(shù)字，如logo1234 (團(tuán)隊(duì)約定好的除外)對(duì)于過長(zhǎng)單詞的連接命名可采取縮寫形式，但應(yīng)確保成員都能看懂一些約定好的單詞可以迅速的幫助大家命名：頭：header
內(nèi)容：content/container
尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
登錄條：loginbar
標(biāo)志：logo
廣告：banner
輪轉(zhuǎn)：promo
頁面主體：main
熱點(diǎn)：hot
新聞：news
下載：download
子導(dǎo)航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
版權(quán)copyright這個(gè)太多了，這里就不一一列出了，遇到不會(huì)的單詞大家再去補(bǔ)一下英文哈！更多編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：使用YUI+Ant 實(shí)現(xiàn)JS CSS壓縮

下一篇：HTML5和CSS3制作一個(gè)模態(tài)框?qū)嵗?/a>