雖然寫(xiě)過(guò)很多css代碼，但每次動(dòng)手寫(xiě)都讓我痛苦不堪，如何組織好那一堆堆的代碼，如何提高代碼復(fù)用率，甚至如何命名類(lèi)，這些都讓我糾結(jié)。下面的淺顯的談一談在看了《編寫(xiě)高質(zhì)量代碼》中的html和css部分以及搜索網(wǎng)絡(luò)上一些相關(guān)資料對(duì)編寫(xiě)高質(zhì)量的HTML和CSS的一些基本認(rèn)識(shí)。

HTML

在說(shuō)css之前必須先說(shuō)說(shuō)html ，沒(méi)有它c(diǎn)ss是浮云。就像是要建棟別墅，光有那些裝飾品（css）沒(méi)有房子基本的結(jié)構(gòu)（html）是不可能造出真正好看又實(shí)用的別墅的。其實(shí)html結(jié)構(gòu)并不是簡(jiǎn)單的table或一堆堆的div，真正的高質(zhì)量的html是具有良好語(yǔ)義化結(jié)構(gòu)的，html5的header、nav和footer等這些新增的標(biāo)簽也是為良好語(yǔ)義化結(jié)構(gòu)而生的吧。這就像讓人鼻子是鼻子，眼睛是眼睛，而不是一頓亂放。

標(biāo)簽語(yǔ)義化

擁有良好語(yǔ)義化結(jié)構(gòu)的前提是使用正確的標(biāo)簽。每一個(gè)html標(biāo)簽都有它自己的意義，下面是html的一張HTML標(biāo)簽語(yǔ)義對(duì)照表：

div——division 分隔
span——span 范圍
ol——ordered list 有序列表
ul——unordered list 無(wú)序列表
li——list item 列表項(xiàng)目
dl——definition list 定義列表
dt——definition term 定義術(shù)語(yǔ)
dd——definition description 定義描述
a——achlor 錨
strong——strong 加重
em——emphasized 加重
b——bold 加粗
i——italic 斜體
big——big 變大
small——small 變小
p——paragraph 段落
h1-h6——header 標(biāo)題1到標(biāo)題6
hr——horizontal rule 水平尺
sup——superscripted 上標(biāo)
sub——subscripted 下標(biāo)
font——font 字體
del——delete 刪除
ins——inserted 插入
u——underlined 下劃線
s——Strikethrough 刪除線
fieldset——fieldset 域集
legend——legend 圖標(biāo)
caption——caption標(biāo)題
abbr——abbreviation 縮寫(xiě)詞
address——address 地址
var——varaiable 變量
pre——preformatted 預(yù)定義格式
blockquote——block quotation 區(qū)塊引用語(yǔ)

HTML5新增標(biāo)簽

<article> 標(biāo)記定義一篇文章
<aside> 標(biāo)記定義頁(yè)面內(nèi)容部分的側(cè)邊欄
<audio> 標(biāo)記定義音頻內(nèi)容
<canvas> 標(biāo)記定義圖片
<command> 標(biāo)記定義一個(gè)命令按鈕
<datalist> 標(biāo)記定義一個(gè)下拉列表
<details> 標(biāo)記定義一個(gè)元素的詳細(xì)內(nèi)容
<dialog> 標(biāo)記定義一個(gè)對(duì)話框(會(huì)話框)
<embed> 標(biāo)記定義外部的可交互的內(nèi)容或插件
<figure> 標(biāo)記定義一組媒體內(nèi)容以及它們的標(biāo)題<footer> 標(biāo)記定義一個(gè)頁(yè)面或一個(gè)區(qū)域的底部
<header> 標(biāo)記定義一個(gè)頁(yè)面或一個(gè)區(qū)域的頭部
<hgroup> 標(biāo)記定義文件中一個(gè)區(qū)塊的相關(guān)信息
<keygen> 標(biāo)記定義表單里一個(gè)生成的鍵值
<mark> 標(biāo)記定義有標(biāo)記的文本
<meter> 標(biāo)記定義 measurement within a
predefined range
<nav> 標(biāo)記定義導(dǎo)航鏈接
<output> 標(biāo)記定義一些輸出類(lèi)型
<progress> 標(biāo)記定義任務(wù)的過(guò)程
<rp> 標(biāo)記是用在Ruby annotations 告訴那些不支持 Ruby元素的瀏覽器如何去顯示
<rt> 標(biāo)記定義對(duì)ruby
annotations的解釋
<ruby> 標(biāo)記定義 ruby annotations.
<section> 標(biāo)記定義一個(gè)區(qū)域
<source> 標(biāo)記定義媒體資源
<time> 標(biāo)記定義一個(gè)日期/時(shí)間
<video> 標(biāo)記定義一個(gè)視頻

現(xiàn)在我知道了每個(gè)標(biāo)簽的含義，那我怎么知道我的html語(yǔ)義是否良好？最好的辦法是去掉css，去掉樣式，看結(jié)構(gòu)是否良好。可以在給網(wǎng)頁(yè)布局時(shí)先把html寫(xiě)好，再去寫(xiě)相應(yīng)的樣式。沒(méi)有樣式的網(wǎng)頁(yè)應(yīng)該也具有良好的可讀性。

CSS

最開(kāi)始寫(xiě)css就是看見(jiàn)什么寫(xiě)什么，從來(lái)不會(huì)想它還需要好好組織，最后代碼一堆一堆，自己看著就頭暈，發(fā)現(xiàn)兼容問(wèn)題也是這里補(bǔ)補(bǔ)那里補(bǔ)補(bǔ)，毫無(wú)章法可言。現(xiàn)在才發(fā)現(xiàn)，css也是一門(mén)大學(xué)問(wèn)。

css結(jié)構(gòu)

如何組織好css讓代碼結(jié)構(gòu)更清晰、復(fù)用率更高？這需要有良好的css結(jié)構(gòu)。 比較常見(jiàn)組織css的方法：base.css+common.css+page.css base層位于三者的最底層，提供CSS Reset和粒度最小的通用類(lèi)——原子類(lèi)，這一層的css可以被任何網(wǎng)站應(yīng)用。 common層定義組件類(lèi)，像button、標(biāo)題欄這樣特定的樣式，這些組件類(lèi)可以供整個(gè)網(wǎng)站使用. page層是相對(duì)于網(wǎng)站某個(gè)頁(yè)面特有的樣式，像主頁(yè)可能就跟其他頁(yè)面的樣式有很大不同，你可以定義一個(gè)專(zhuān)用于首頁(yè)的css（如index.css）。 不過(guò)話說(shuō)回來(lái)，如果網(wǎng)站規(guī)模不大，我們也就沒(méi)有必要把這些css分成三個(gè)文件（這樣會(huì)增加請(qǐng)求數(shù)），可以把所有css統(tǒng)一放在一個(gè)文件里甚至html頭部。不過(guò)我們還是需要規(guī)規(guī)矩矩地把它按照base、common、page這樣的層級(jí)排列，并寫(xiě)上相應(yīng)注釋。

css模塊化

css模塊化的目的是把具有相同樣式的css組織起來(lái)，提高css的重用率。劃分模塊應(yīng)該保證類(lèi)的單一職責(zé)。模塊應(yīng)在保證數(shù)量盡可能少的原則下，做到盡可能的簡(jiǎn)單，以提高重用率。 舉個(gè)例子： 我們來(lái)看一下新浪博客首頁(yè)的四個(gè)列表，我們可以把這四個(gè)列表劃分成兩個(gè)完全一樣的兩大塊（方形和圈）；但是我們發(fā)現(xiàn)其實(shí)這兩大塊中間的列表部分的樣式其實(shí)是一樣的，所以可以做如下調(diào)整。

看下圖，我們按照圈、箭頭和方形所標(biāo)注的三塊內(nèi)容就劃分了三個(gè)不同的模塊，這樣每個(gè)模塊的樣式幾乎是一樣的（當(dāng)然除了每個(gè)列表的名稱(chēng)），把列表作為一個(gè)模塊單獨(dú)出來(lái)。

css命名

css命名也是一門(mén)學(xué)問(wèn)。駱駝命名法和劃線命名法的結(jié)合是不錯(cuò)的選擇。駱駝命名法是從第二個(gè)單詞開(kāi)始首字母大寫(xiě)（如listItem、articleList）；劃線命名法是每個(gè)單詞用“_”或“-”分開(kāi)（如list-item、article——list）。 我們可以用：駱駝命名法用于區(qū)別不同單詞，劃線用于表明從屬關(guān)系。 item屬于list的子項(xiàng)目所以寫(xiě)成list_item的形式，articleList是指文章列表沒(méi)有從屬關(guān)系。最近看到一種BEM命名法，有興趣的童鞋可以通過(guò)這篇文章了解一下《BEM思想之徹底弄清BEM語(yǔ)法》 當(dāng)有很多相似但又不完全相同的模塊時(shí)我們是給每一塊加上不同的類(lèi)然后使用css技巧把相同的部分提取出來(lái)（繼承），還是讓多個(gè)類(lèi)組合成我們想要的效果呢？建議是多用組合，少用繼承。

css編碼風(fēng)格——多行式和一行式

多行式的編碼風(fēng)格可讀性更強(qiáng)，但增加了css文件行數(shù)增大文件大小。一行式可讀性稍差，但有效減少文件行數(shù)有利于提高開(kāi)發(fā)速度。

css兼容問(wèn)題

我經(jīng)常感覺(jué)被IE6“坑”，它會(huì)時(shí)不時(shí)給你些小驚喜。其實(shí)不止IE6，每個(gè)瀏覽器都有它特殊的一面。

補(bǔ)充閱讀： 《IE6下的幾大靈異事件》 《最全的CSS瀏覽器兼容問(wèn)題》 《主流瀏覽器的Hack寫(xiě)法》

轉(zhuǎn)載于:https://www.cnblogs.com/human/p/3357054.html

總結(jié)

以上是生活随笔為你收集整理的如何编写高质量CSS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。