雖然寫過很多css代碼，但每次動手寫都讓我痛苦不堪，如何組織好那一堆堆的代碼，如何提高代碼復用率，甚至如何命名類，這些都讓我糾結。下面的淺顯的談一談在看了《編寫高質量代碼》中的html和css部分以及搜索網絡上一些相關資料對編寫高質量的HTML和CSS的一些基本認識。

HTML

在說css之前必須先說說html ，沒有它css是浮云。就像是要建棟別墅，光有那些裝飾品（css）沒有房子基本的結構（html）是不可能造出真正好看又實用的別墅的。其實html結構并不是簡單的table或一堆堆的div，真正的高質量的html是具有良好語義化結構的，html5的header、nav和footer等這些新增的標簽也是為良好語義化結構而生的吧。這就像讓人鼻子是鼻子，眼睛是眼睛，而不是一頓亂放。

標簽語義化

擁有良好語義化結構的前提是使用正確的標簽。每一個html標簽都有它自己的意義，下面是html的一張HTML標簽語義對照表：

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

HTML5新增標簽

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

現在我知道了每個標簽的含義，那我怎么知道我的html語義是否良好？最好的辦法是去掉css，去掉樣式，看結構是否良好。可以在給網頁布局時先把html寫好，再去寫相應的樣式。沒有樣式的網頁應該也具有良好的可讀性。

CSS

最開始寫css就是看見什么寫什么，從來不會想它還需要好好組織，最后代碼一堆一堆，自己看著就頭暈，發現兼容問題也是這里補補那里補補，毫無章法可言。現在才發現，css也是一門大學問。

css結構

如何組織好css讓代碼結構更清晰、復用率更高？這需要有良好的css結構。 比較常見組織css的方法：base.css+common.css+page.css base層位于三者的最底層，提供CSS Reset和粒度最小的通用類——原子類，這一層的css可以被任何網站應用。 common層定義組件類，像button、標題欄這樣特定的樣式，這些組件類可以供整個網站使用. page層是相對于網站某個頁面特有的樣式，像主頁可能就跟其他頁面的樣式有很大不同，你可以定義一個專用于首頁的css（如index.css）。 不過話說回來，如果網站規模不大，我們也就沒有必要把這些css分成三個文件（這樣會增加請求數），可以把所有css統一放在一個文件里甚至html頭部。不過我們還是需要規規矩矩地把它按照base、common、page這樣的層級排列，并寫上相應注釋。

css模塊化

css模塊化的目的是把具有相同樣式的css組織起來，提高css的重用率。劃分模塊應該保證類的單一職責。模塊應在保證數量盡可能少的原則下，做到盡可能的簡單，以提高重用率。 舉個例子： 我們來看一下新浪博客首頁的四個列表，我們可以把這四個列表劃分成兩個完全一樣的兩大塊（方形和圈）；但是我們發現其實這兩大塊中間的列表部分的樣式其實是一樣的，所以可以做如下調整。

看下圖，我們按照圈、箭頭和方形所標注的三塊內容就劃分了三個不同的模塊，這樣每個模塊的樣式幾乎是一樣的（當然除了每個列表的名稱），把列表作為一個模塊單獨出來。

css命名

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

css編碼風格——多行式和一行式

多行式的編碼風格可讀性更強，但增加了css文件行數增大文件大小。一行式可讀性稍差，但有效減少文件行數有利于提高開發速度。

css兼容問題

我經常感覺被IE6“坑”，它會時不時給你些小驚喜。其實不止IE6，每個瀏覽器都有它特殊的一面。

補充閱讀： 《IE6下的幾大靈異事件》 《最全的CSS瀏覽器兼容問題》 《主流瀏覽器的Hack寫法》

轉載于:https://www.cnblogs.com/human/p/3357054.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。