CSS開發規範

時間 2019-11-13

標籤 css 開發規範欄目 CSS 简体版

原文原文鏈接

CSS開發規範

概述

制定本規範的目的在於使咱們的CSS代碼更加易於維護和重用，從而提高效率執行本規範時建議的流程
建議使用D(esign)C(oding)D(ebug)V(alidate)R(oundup)，即DCDVR的流程。首先須要規劃樣式並分爲共有樣式和頁面個性化樣式，而後纔開始編碼，編碼的同時進行Debug，Validate和代碼片段的總結，而不是在全部模板都完成後才進行這三個步驟。 css

1、selector 命名

命名除 .fn- , .ui- , .sl- 外，可自定義命名。請慎用 selected current disabled first last success error。
通常狀況下，若是命名比較通用，好比 current，請限定在相應的上下文環境中。好比其父節點ID爲#parent 等比較通用的命名，建議寫成 #parent .current{}，而非 .current{}，即便是爲了重用，也應該注意。只有在很是明確不會影響到其餘組件工做，而且其餘人不會寫這種命名的狀況下，才讓它變成全局通用的。
做爲JS接口的class或者ID，必須是以 J- 前綴開頭的。除 JS 接口命名外，其餘命名一概使用小寫字母。

2、CSS文件註釋

組件註釋

/**
 * @name: 組件名
 * @overview: 組件介紹
 * @require: 依賴的樣式
 * @author: 小魚(sofish@163.com)
 */

塊狀或行內元素，都請使用 /* comment */ 註釋，註釋文字先後端保持各有一個空格。
爲了您的體驗着想，一目瞭解的代碼，就不要註釋了，好比「display:none; /* 讓元素看不見 */」。

3、CSS文件

文件編碼必須使用utf-8（無BOM）
文件一概經過link方式引入（NOT @import）
當只是單個頁面使用時，才寫在<head>的<style>中。

4、hack規則

通常狀況下，不要使用 IE 條件註釋： <!-[if IE]><![endif]->
通用 Hack

.all-IE{property:value\9;}
.gte-IE-8{property:value\0;}
.lte-IE-7{*property:value;}
.IE-7{+property:value;}
.IE-6{_property:value;}
.not-IE{property//:value;}
@-moz-document url-prefix() { .firefox{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:value;} }
@media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit{property:value;} }

固然，強烈建議你使用更優雅的hack方式。那就是避免hack。或者在書寫上，作點小trick。好比：
```
.selector .child{property:value;} /* for ie-6 */
.selector > .child{property:value;} /* except ie-6 */
```
關於Hack: 在firefox寫完，IE有問題？仍是其餘瀏覽器也出現了。你知道IE Hack 能解決。我想，你也可能知道，用其餘方法也能繞過。建議少用Hack。

5、CSS書寫規範

1.以下寫法爲例: html

第一種方式：（強烈推薦）

/* 區域模塊-1 */
.tech, .ued{
    background:#f60 url(xxx/orange.png) no-repeat 0 0;
}
/* 區域模塊-2 */
.tech{
    width:950px;
    margin:0 auto;
}
.tech .wd{
    width:620px;
    float:left;
}

第二種方式：(若是讓其餘人看，請先格式化)

/* 區域模塊-3 */
.ued{width:100%;padding:30px 50px;}
.ued .visual{display:inline-block;font:700 normal 12px/1.5 arail;}

2.須要很是注意的點 web

區域模塊間用空行分隔
多個選擇器寫一塊兒時，逗號（,）後緊跟一個空格
避免行內樣式，即便是JS，也應該儘可能使用class/ID來決定顯示，而非行內樣式。
避免使用低效選擇器，參考http://code.google.com/intl/zh-CN/speed/page-speed/docs/rendering.html
儘可能使用縮寫，好比 font:700 normal 12px/1.5 arial; 通常不要寫成
```
font-weight:600;
font-style:normal;
font-size:12px;
line-height:1.5;
font-family:arial;
```
一般須要使用縮寫規則的: express

padding: top right bottom left; <--> padding: top-bottom right+left; <--> padding: top left-right bottom; <--> padding: top-right-bottom-left; 如：padding:1px 2px 3px 4px;
margin: 同上
color: red; color;#FFF; color:#ABCABC （顏色名>16進制寫法；顏色名採用小寫，16進制使用大寫；寫3位，仍是6位，自便）
background: color imageUrl repeat attachment position; 如：background:#ddd url(wd.png) no-repeat scroll 10px 20px;
border: size style color; 如: border:1px solid #ddd;
font: weight variant style size/lineHeight family; 如 font:700 small-caps italic 12px/1.5 "Courier New"; font-weight 統一用 500 代替 normal, 用 700 代替 bold;
list-style: type position image; 如：list-style: square inside url(wd.png); 不過，一般咱們要使用的是 list-style:none;

CSS3 書寫規範：瀏覽器私有寫法在前，標準寫法在後。

-moz-box-shadow: 1px 2px 3px #ddd;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;

書寫順序
不強制書寫順序。但咱們應該養成良好的習慣，讓看代碼的人更易理解。易讀對於團隊協做來講是很是重要的：
1. 框架爲先，細節次之。
好比寫一個浮動容器的樣式，咱們應該先讓這個容器的框架被渲染出來，讓你們看到基本的網站框架。而後再再去渲染容器裏面的內容。最終呈現給用戶. 一般像 color font padding 之類的，寫在後面。
```
.selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;}
```
2.有因纔有果。
好比想使用」圖片替換文字「技術，一般要使用的text-indent。若是咱們使用標籤的是 span：<span>這個文字將被圖片替換</span>，那麼正確寫法：後端
```
.thepic{display:block;text-indent:-9999em;}
```
咱們應該是先將 span 變成」塊級元素「，再將文字 indent。而不是先 indent 再變成塊級的。
又如咱們，若是想讓一個 span 使用 margin, 那麼咱們應該這樣寫：瀏覽器
```
span{display:block;margin-bottom:10px;}
```
而非margin-bottom先行，由於沒有 display 以前，行內元素是沒有 margin 的。服務器

6、IE私有特性

expression

記住一句話：不管何時，都不要使用它。用 Javascript 吧。更優雅，更靈活。框架

filter

應該儘可能避免使用 AlphaImageLoader,能夠適當在投影/發光/漸變/去色方面上使用。 iphone

IE bug

7、如何規劃你的 CSS 文件結構

1.必定要有全局設置

全局設置能夠避免重複書寫一樣的東西。好比3人在一個項目中，假設項目中涉及到的連接有 10 種顏色，若是有全局重設，咱們就能夠統一設置顏色。若是沒有，咱們可能每一個都會爲本身所負責部分的連接定義相應的顏色。這樣一來就致使多處定義，且定義不統一。之後維護須要到各個地方都改。這是很麻煩的事。另外就是css文件也會所以變大。因此，在寫以前，你們應該先分析視覺稿，統一全局設置。
```
/* global reset */
body{padding:0;margin:0;font.....}
a{color:#07f;}
a:hover{color:#555;}
```
須要注意的是，通常狀況下，不要直接給標籤寫樣式。而應該使用 class。像下面這種寫法，並不合適: ide
```
h1{font-size:30px}
h2{font-size:20px}
h3{font-size:10px;}
```
若是有另一個 h2 也要使用 10px 的，而其餘的都仍使用 20px 的，那可就很差辦了。因此，推薦用這種方法：
```
/* global classes */
.text-size30{font-size:30px;}
.text-size20{font-size:20px;}
.text-size10{font-size:10px;}
...
<h2 class="text-size20">...
<h2 class="text-size10">...
```

2.必定要模塊化

有兩點須要注意的，一是，注意代碼重用的模塊化；另外一是，注意 HTML 結構的模塊化，而不是分塊。

代碼重用的模塊化：

<div class="margin-test">
        <div class="margin-2">i am 2.</div>
    </div>
    <div id="module-1" class="module">
        <h3>TITLE</h3>
        <p class="module-item">
            some text
        </p>
    </div>

    <div id="module-2" class="module">
        < h3>TITLE</h3>
        <p class="module-item">
            some text
        </p>
    </div>

    /* module, reuse style in module scrope*/
    .module{}
    .module-status{}
    .module-item{}
    .module-status .module-1-item{}

    /* customize */
    #module-1 .module-item{}
    #module-2 .module-item{}

HTML 的模塊化：
咱們應該這樣寫（他們的視覺是一體的，代碼也應該是一體的）：

<div id="module-1" class="module">
    <h3>TITLE</h3>
    <p class="module-item">
        some text
    </p>
 </div> <!-- #module .module -->

而不是這樣寫：

<h3>TITLE</h3> <!-- 第一塊 -->
<div id="module-1" class="module">
<p class="module-item">
    some text
</p>
</div> <!-- 第二塊 -->

8、值得注意的事

1.Background Color

通常咱們都會寫: background:url(path/to/image) no-repeat 0 0;
當元素背景是深色的時候，好比#000，咱們一般會選擇一種比較淺的顏色來作爲文本的顏色，好比#fff，爲了不網速緩慢致使CSS已經加載，而圖片仍未加載完成或圖片服務器掛掉時文本不可見，請儘可能使用加上CSS定義的背景顏色，如：background:#e8edef url(path/to/image) no-repeat 0 0;
2.has Layout
別用輕易使用hack，IE下不少兼容性問題都是 has Layout 引發的。試着給元素加上:
```
display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。