CSS 編碼規(guī)范

AbnerMing 發(fā)布于2019-08-29 17:27 / 599人閱讀

摘要：一書寫規(guī)范縮進(jìn)使用個(gè)空格做為一個(gè)縮進(jìn)層級(jí)。盡量最多控制在級(jí)以內(nèi)。數(shù)值當(dāng)數(shù)值為之間的小數(shù)時(shí)，省略整數(shù)部分的。長(zhǎng)度長(zhǎng)度為時(shí)須省略單位。二命名規(guī)范類名使用小寫字母，以中劃線分隔。采用駝峰式命名等中的變量函數(shù)混合采用駝峰式命名。

一、CSS 書寫規(guī)范 縮進(jìn)

使用 4 個(gè)空格做為一個(gè)縮進(jìn)層級(jí)。

.selector {
    margin: 0;
    padding: 0;
}

空格

1.選擇器與 "{" 之間要包含空格；
2.屬性名與之后的 ":" 之間不允許包含空格， ":" 與屬性值之間要包含空格；
3.列表型屬性值書寫在單行時(shí)，"," 后要跟一個(gè)空格；
4.注釋 "/*" 后和 "*/" 前要有一個(gè)空格。

/* good */
.selector {
    margin: 0;
    font-family: Arial, sans-serif;
}

5.">、+、~ "選擇器的兩邊各保留一個(gè)空格。

main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

分號(hào)

每個(gè)屬性聲明末尾都要加分號(hào)。

.element {
    width: 20px;
    height: 20px;

    background-color: red;
}

空行

1."}" 后最好跟一個(gè)空行，包括 scss、less等中嵌套的規(guī)則；
2.屬性之間需要適當(dāng)?shù)目招小?/p>

.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

換行

1."{" 后和 "}" 前；
2.每個(gè)屬性獨(dú)占一行；
3.多個(gè)規(guī)則的分隔符 "," 后。

.element {
    color: red;
    background-color: black;
}

.element,
.dialog {
    ...
}

引號(hào)

1.最外層統(tǒng)一使用雙引號(hào)；
2.url的內(nèi)容要用引號(hào)；
3.屬性選擇器中的屬性值需要引號(hào)。

.element:after {
    content: "";
    background-image: url("logo.png");
}

li[data-type="single"] {
    ...
}

選擇器

1.避免出現(xiàn)過多的祖先選擇器，各瀏覽器會(huì)有性能差異，消耗在選擇器的時(shí)間也不盡相同。
盡量最多控制在3級(jí)以內(nèi)。

/* bad */
ul.example {}
.example1 .example2 .example3 .example4 {}

/* good */
.example {}

.example1,
.example2 {}

2.非必要的情況下不要使用元素標(biāo)簽名和 id 或 class 進(jìn)行組合。

/* bad */
ul#example {}
div.error {}

/* good */
#example {}
.error {}

屬性書寫順序

1.同一 rule set 下的屬性在書寫時(shí)，應(yīng)按功能進(jìn)行分組，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相關(guān)） > Visual（視覺效果）的順序書寫，以提高代碼的可讀性;
2.Formatting Model 相關(guān)屬性包括：position / top / right / bottom / left / float / display / overflow 等；
Box Model 相關(guān)屬性包括：border / margin / padding / width / height 等；
Typographic 相關(guān)屬性包括：font / line-height / text-align / word-wrap 等；
3.Visual 相關(guān)屬性包括：background / color / transition / list-style 等；
4.另外，如果包含 content 屬性，應(yīng)放在最前面。

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ffffd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}

數(shù)值

當(dāng)數(shù)值為 0 - 1 之間的小數(shù)時(shí)，省略整數(shù)部分的 0。

panel {
    opacity: .8;
}

長(zhǎng)度

長(zhǎng)度為 0 時(shí)須省略單位。 (也只有長(zhǎng)度單位可省)

body {
    padding: 0 5px;
}

顏色

1.rgb 顏色值使用十六進(jìn)制記號(hào)形式 #rrggbb。不要使用 rgb()；
2.帶有 alpha 的顏色信息可以使用 rgba()。使用 rgba() 時(shí)每個(gè)逗號(hào)后必須保留一個(gè)空格。

.success {
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

3.顏色值可以縮寫時(shí)，使用縮寫形式。

/* good */
.success {
    background-color: #aca;
}

/* bad */
.success {
    background-color: #aaccaa;
}

4.顏色值不要使用命名色值。

/* good */
.success {
    color: #90ee90;
}

/* bad */
.success {
    color: lightgreen;
}

5.顏色值中的英文字符采用小寫。如不用小寫也需要保證同一項(xiàng)目?jī)?nèi)保持大小寫一致。

/* good */
.success {
    background-color: #aca;
    color: #90ee90;
}

/* good */
.success {
    background-color: #ACA;
    color: #90EE90;
}

帶前綴的屬性

當(dāng)使用特定廠商的帶有前綴的屬性時(shí)，通過縮進(jìn)的方式，讓每個(gè)屬性的值在垂直方向?qū)R，這樣便于多行編輯。

/* Prefixed properties */
.selector {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

不要使用 @import

與標(biāo)簽相比，@import 指令要慢很多，不光增加了額外的請(qǐng)求次數(shù)，還會(huì)導(dǎo)致不可預(yù)料的問題。替代辦法有以下幾種：

使用多個(gè) 元素；
通過 Scss 或 Less 類似的 CSS 預(yù)處理器將多個(gè) CSS 文件編譯為一個(gè)文件；
通過 Rails、Jekyll 或其他系統(tǒng)中提供過 CSS 文件合并功能。

二、CSS 命名規(guī)范

1.類名使用小寫字母，以中劃線分隔。
2.避免過度任意的簡(jiǎn)寫，要意義明確。.btn 代表 button，但是 .s 不能表達(dá)任何意思。
3.id采用駝峰式命名
4.scss、less等中的變量、函數(shù)、混合、placeholder采用駝峰式命名。

/* class */
.element-content {
    ...
}

/* id */
#myDialog {
    ...
}

/* 變量 */
$colorBlack: #000;

/* 函數(shù) */
@function pxToRem($px) {
    ...
}

/* 混合 */
@mixin centerBlock {
    ...
}

/* placeholder */
%myDialog {
    ...
}

附常用類 / id 命名規(guī)范：

頁　眉：header
內(nèi)　容：content
容　器：container
頁　腳：footer
版　權(quán)：copyright　
導(dǎo)　航：menu
主導(dǎo)航：mainmenu
子導(dǎo)航：submenu
標(biāo)　志：logo
標(biāo)　語：banner
標(biāo)　題：title
側(cè)邊欄：sidebar
圖　標(biāo)：icon
注　釋：note
搜　索：search
按　鈕：btn
登　錄：login
鏈　接：link
信息框：message

三、CSS 注釋

1.注釋可以統(tǒng)一用"/* */"；
2.縮進(jìn)與下一行代碼保持一致；
3.可位于一個(gè)代碼行的末尾，與代碼間隔一個(gè)空格。

/* Modal header */
.modal-header {
    ...
}

/*
 * Modal header
 */
.modal-header {
    ...
}

.modal-header {
    /* 50px */
    width: 50px;

    color: red; /* color red */
}

四、編輯器配置

將你的編輯器進(jìn)行設(shè)置，可以避免常見的代碼不一致和差異。
具體配置信息可查看這里

云服務(wù)器 GPU云服務(wù)器規(guī)范編碼編碼規(guī)范 css規(guī)范 php編碼規(guī)范

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114334.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

AbnerMing

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

軟件工程-軟件測(cè)試

閱讀 2304·2021-10-09 09:41
解決Windows10系統(tǒng)找不到「控制面板」管理菜單（快速添加還原）

閱讀 3478·2021-09-13 10:34
Compose 和 Blend（一）

閱讀 1974·2019-08-30 12:59
CSS 編碼規(guī)范

閱讀 600·2019-08-29 17:27
表格增刪改---排序 ---全選全不選反選-----金山前端面試題

閱讀 1110·2019-08-29 16:07
IMWebConf 2017 官網(wǎng)彩蛋解謎

閱讀 3009·2019-08-29 13:15
深入理解ES6之《用模塊封裝代碼》

閱讀 1359·2019-08-29 13:14
前端面試之你可能會(huì)遇到的編程題(1)

閱讀 1618·2019-08-26 12:18

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

CSS 編碼規(guī)范

相關(guān)文章

前端編碼規(guī)范之：樣式（scss）編碼規(guī)范

**前端、HTML+CSS+JS編寫規(guī)范（終極版）**

**前端、HTML+CSS+JS編寫規(guī)范（終極版）**

**前端、HTML+CSS+JS編寫規(guī)范（終極版）**

編碼規(guī)范 —— 編寫靈活、穩(wěn)定、高質(zhì)量的 HTML 和 CSS 代碼的規(guī)范

前端代碼質(zhì)量管理（一）

發(fā)表評(píng)論

0條評(píng)論

AbnerMing

男|高級(jí)講師

TA的文章

軟件工程-軟件測(cè)試

解決Windows10系統(tǒng)找不到「控制面板」管理菜單（快速添加還原）

Compose 和 Blend（一）