學(xué)好WEB前端之CSS規(guī)范
CSS 指層疊樣式表 (Cascading Style Sheets)，定義如何顯示 HTML 元素，但由于 CSS 天生全局性，隨著項目復(fù)雜度增加，極易出現(xiàn)樣式覆蓋以及其它的問題。
成都創(chuàng)新互聯(lián)客戶idc服務(wù)中心，提供德陽機房托管、成都服務(wù)器、成都主機托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價的產(chǎn)品以及開放、透明、穩(wěn)定、高性價比的服務(wù)，資深網(wǎng)絡(luò)工程師在機房提供7*24小時標準級技術(shù)保障。
1. 通用規(guī)范
文件編碼
為了避免內(nèi)容亂碼，統(tǒng)一使用
UTF-8編碼保存。樣式文件第一行設(shè)置字符集為 UTF-8
@charset 'UTF-8'; /* 注意字符集說明應(yīng)在第一行 */
縮進規(guī)范
統(tǒng)一使用
兩個空格縮進
web前端開發(fā)直播教程Q-q-u-n： 767273102 ，內(nèi)有免費開發(fā)工具，零基礎(chǔ)，進階視頻教程，希望新手少走彎路
2. 初始化規(guī)范
各瀏覽器廠商的初始樣式都不一樣，為了消除不同瀏覽器對 HTML 文本呈現(xiàn)的差異，我們常引入一些初始化樣式，如 normalize.css、reset.css 等，當對于這些樣式的引入我們需要注意下面幾種情況：
不使用 UI 框架，由零開始搭建
從零開始搭建的情況下，進行樣式初始化，在項目最開始的時候就引入，不要在開發(fā)中途引入，避免不可預(yù)知的樣式?jīng)_突。不使用 UI 框架，但使用了部分插件
插件往往都帶有自己特有的樣式，如富文本插件，在開發(fā)中途使用初始化樣式有可能導(dǎo)致樣式錯亂，所以不建議大范圍的初始化，只需簡單進行初始化即可。
* {
padding: 0;
margin: 0;
}
-
已使用 UI 框架
在明確知道需要使用 UI 框架的時候，不使用第三方初始化樣式，不管是在項目開始前還是進行中，因為 UI 框架一般都自帶初始化，額外引入了反而會影響原有效果。
3. 代碼規(guī)范
命名規(guī)范
class 應(yīng)以功能或內(nèi)容命名，不以表現(xiàn)形式命名
class 與 id 單詞字母小寫，多個單詞組成時，采用中劃線-分隔
使用唯一的 id 作為 Javascript hook, 同時避免創(chuàng)建無樣式信息的 class
代碼風格
統(tǒng)一使用
展開格式，不推薦緊湊格式/* 展開格式 */ .test { color: red; font-size: 12px; }/* 緊湊格式 */ .test { color: red; font-size: 12px; }統(tǒng)一
兩個空格縮進屬性聲明結(jié)尾加分號
選擇器與左括號之間一個空格，屬性冒號后一個空格
/* 推薦 */ .test { color: red; font-size: 12px; }/* 不推薦 */ .test { color: red; font-size: 12px; }不要為 0 指明單位
顏色值和屬性值十六進制數(shù)值能用簡寫的盡量用簡寫
/* 推薦 */ .test { color: #fff; }/* 不推薦 */ .test { color: #ffffff; }引號使用
url() 、屬性選擇符、屬性值使用
單引號。清除浮動
當元素需要撐起高度以包含內(nèi)部的浮動元素時，通過對偽類設(shè)置 clear 或觸發(fā) BFC 的方式進行 clearfix。盡量不使用增加空標簽的方式。
觸發(fā) BFC 的方式很多，常見的有：
- float 非 none
- position 非 static
- overflow 非 visible
字體規(guī)范
-
對外商用網(wǎng)站，不要用
font-face引入微軟雅黑字體，避免侵權(quán)（包括圖片內(nèi)容） -
需要在 Windows 平臺顯示的中文內(nèi)容，其字號應(yīng)不小于
12px
網(wǎng)站上使用 微軟雅黑 字體有三種形式： 1、【侵權(quán)】圖片中使用 微軟雅黑 字體，比如網(wǎng)站頭圖 2、【安全】網(wǎng)站 CSS 用 font-family 聲明網(wǎng)站使用 微軟雅黑 字體，比如文章標題和正文 3、【侵權(quán)】網(wǎng)站通過 font-face 引用 微軟雅黑 ，這種方式不常見
選擇器規(guī)范
在嚴格遵照 BEM(Block Element Modifier) 時，建議只使用類選擇器，但 BEM 書寫麻煩，所以建議如下
- 禁用通用選擇器 *
不使用無具體語義定義的標簽選擇器
web前端開發(fā)直播教程Q-q-u-n： 767273102 ，內(nèi)有免費開發(fā)工具，零基礎(chǔ)，進階視頻教程，希望新手少走彎路
屬性順序
CSS 屬性順序是 CSS 良好編碼風格的一部分，有助于提高代碼可讀性，便于發(fā)現(xiàn)代碼問題，有利于團隊合作，但在項目中發(fā)現(xiàn)部分同學(xué)在書寫屬性順序時較為隨意，想到一個屬性就寫一個。
建議使用下列順序進行書寫
- 定位屬性（position、display、float、left、right）
- 尺寸屬性（width、height、padding、margin、border）
- 字體屬性（color、font、text-align）
- 其他屬性（background、cursor、outline）
目的是在瀏覽代碼時，能逐步清晰目標元素的效果。
.test {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-size: 12px;
color: #333;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
4. 注釋規(guī)范
單行注釋
注釋以
/*
開始，以
*/
結(jié)束,注釋內(nèi)不能嵌套注釋，注釋內(nèi)容
前后空一個空格
。
/* 推薦的單行注釋 */
/*不推薦的單行注釋*/
注：在 sass 和 less 等預(yù)處理語言上也可以使用雙斜線注釋，但編譯后注釋內(nèi)容不會出現(xiàn)在 css 文件中，所以建議統(tǒng)一使用
/* */
注釋。
模塊注釋
有時候我們需要對一個模塊(一段代碼塊)進行功能性說明，并希望能明顯區(qū)分其它代碼，我們可以模塊注釋的方式。
注釋以
/*
開始，以
*/
結(jié)束，
前后空一個空格
，第一行填寫
描述
，最后一行行填寫
分割線
。
/* 推薦的模塊注釋 ---------------------------------------------------- */
/* 不推薦的模塊注釋 ---------------------------------------------------- */
*
文件信息注釋
如果需要對一個文件進行功能性說明，方便其他人快速明白該文件的作用，推薦在文件開頭(字符集說明下)寫入下列注釋，注釋內(nèi)容包括文件描述、創(chuàng)建人、創(chuàng)建時間等。
@charset "UTF-8"; /** * @desc 文件功能描述，方便其他人快速理解 * @author 創(chuàng)建人 * @date 創(chuàng)建時間 */
5. 覆蓋規(guī)范
-
盡可能
少用importent -
vue 單文件組件統(tǒng)一使用 css/less/sass
scoped -
每個頁面/組件需要有一個
全局唯一的標識 id/class，屬于它下面的樣式都需要加上該唯一標識 - 避免全局修改已有樣式，必須具體到頁面上(通過權(quán)重)
-
禁用全匹配
*選擇器（特殊情況除外，如初始化）
vue 單文件組件修改樣式不生效可使用
/deep/
或
>>>
6. 媒體查詢
對于內(nèi)部管理系統(tǒng)，商務(wù)多使用 ThinkPad 筆記本，屏幕分辨率為
1366*768
。建議使用
Resolution Test
瀏覽器拓展進行瀏覽器窗口大小調(diào)試。
下載地址： www.cnplugins.com/devtool/res…
常用尺寸如下
| 大小 | 描述 |
|---|---|
| ≥1366px | 大屏幕 大桌面顯示器 |
| ≥1200px | 中等屏幕 桌面顯示器 |
| ≥992px | 中等屏幕 桌面顯示器 |
| ≥768px | 小屏幕 平板 |
| <768px | 超小屏幕 手機 |
優(yōu)先 PC 端
默認按最大尺寸進行布局，當尺寸縮小時逐步變成移動端布局
body {
background: gray;
}
@media screen and (max-width: 1366px) {
body {
background: red;
}
}
@media screen and (max-width: 1200px) {
body {
background: yellow;
}
}
@media screen and (max-width: 920px) {
body {
background: green;
}
}
@media screen and (max-width: 768px) {
body {
background: black;
}
}
優(yōu)先移動端
默認按最小尺寸進行布局，當尺寸放大時逐步變成 PC 端布局
body {
background: gray;
}
@media (min-width: 768px) {
body {
background: red;
}
}
@media (min-width: 920px) {
body {
background: green;
}
}
@media (min-width: 1200px) {
body {
background: yellow;
}
}
@media (min-width: 1366px) {
body {
background: red;
}
}
如果需要做打印樣式進行適配，需要使用@media print
@media print {
body {
background: #fff;
}
}
7. 單位規(guī)范
CSS 單位有兩種，分別是
絕對單位
和
相對單位
。
常用絕對單位
- px：像素 (計算機屏幕上的一個點)
- cm：厘米
- in：英寸
- pt：磅 (1 pt 等于 1/72 英寸)
常用相對單位
- %：父元素百分比
- vw：視口寬度百分比
- vh：視口高度百分比
- em：當前字體倍數(shù)
- rem：根元素字體倍數(shù)
-
*rpx：微信小程序?qū)Ｓ?，?guī)定屏幕寬為 750rpx
使用較多的單位有 px、%、rem 三種，
建議 PC 端用 px 單位、移動端用 rem，需要具體控制尺寸還是使用 px
備注：如果需要計算不同單位下的值，可以使用 css3 方法 calc()_
web前端開發(fā)直播教程Q-q-u-n： 767273102 ，內(nèi)有免費開發(fā)工具，零基礎(chǔ)，進階視頻教程，希望新手少走彎路
8. 兼容性規(guī)范
私有屬性的使用
正是由于瀏覽器廠商的不同，導(dǎo)致了一些樣式需要加前綴才生效，下面的常見的瀏覽器內(nèi)核和前綴
| 瀏覽器 | 內(nèi)核 | 前綴 |
|---|---|---|
| Firefox | Gecko | -moz- |
| Chrome | WebKit | -webkit- |
| IE | Trident | -ms- |
| Safari | WebKit | -webkit- |
| Opera | Presto | -o- |
| 國內(nèi)知名瀏覽器 | WebKit | -webkit- |
| 常見手機瀏覽器 | WebKit | -webkit- |
CSS3 瀏覽器私有前綴在前，標準前綴在后
.test {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
備注：在 webpack 環(huán)境下，可以使用 postcss-loader 自動添加私有前綴_
本文名稱：學(xué)好WEB前端之CSS規(guī)范
標題路徑：http://m.jiaotiyi.com/article/iioesh.html