CSS tab-size 屬性

例

設置一個 <pre> 元素的 tab-size：

pre {tab-size: 16; }

pre {-moz-tab-size: 16; } /* 針對 Firefox 的代碼 */

pre {-o-tab-size: 16; } /* 針對 Opera 的代碼 */

瀏覽器支持

目前只有 Chrome 支持 tab-size 屬性。

Firefox 支持另一個可替代該屬性的屬性，即 -moz-tab-size 屬性。

Opera 支持另一個可替代該屬性的屬性，即 -o-tab-size 屬性。

目前沒有瀏覽器支持該值作為長度單位。

定義和用法

tab-size 屬性規定制表符（tab）字符的空格長度。

在 HTML 中，制表符（tab）字符通常顯示為一個單一的空格字符，除了一些元素，比如 <textarea> 和 <pre>，tab-size 屬性的結果只對這些元素有效。

默認值：	8
繼承：	是
可動畫化：	否。請參閱可動畫化（animatable）。
版本：	CSS3
JavaScript 語法：	object.style.tabSize="16"嘗試一下

CSS 語法

tab-size: number|length|initial|inherit;

屬性值

值	描述	測試
number	默認值是 8。規定每個制表符（tab）字符要顯示的空格字符的數量。	測試 ?
length	規定制表符（tab）字符的長度。幾乎所有的主流瀏覽器都不支持該屬性值。
initial	設置該屬性為它的默認值。請參閱 initial。	測試 ?
inherit	從父元素繼承該屬性。請參閱 inherit。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

編寫靈活、穩定、高質量的HTML代碼的規范

一、唯一定律

無論有多少人共同參與同一項目，一定要確保每一行代碼都像是唯一個人編寫的。

二、HTML

2.1 語法

（1）用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。

（2）嵌套元素應當縮進一次（即兩個空格）。

（3）對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。

（4）不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規范中明確說明這是可選的。

（5）不要省略可選的結束標簽（closing tag）（例如，</li> 或 </body>）。

2.2 Example

三、HTML5 doctype

為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現。

四、語言屬性

根據 HTML5 規范：

強烈建議為 html 根元素指定 lang 屬性，從而為文檔設置正確的語言。這將有助于語音合成工具確定其所應該采用的發音，有助于翻譯工具確定其翻譯時所應遵守的規則等等。

五、IE 兼容模式

IE 支持通過特定的 <meta> 標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 采用其所支持的最新的模式。

六、字符編碼

通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。

七、引入 CSS 和 JavaScript 文件

根據 HTML5 規范，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認值。

八、實用為王

盡量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標簽并保持最小的復雜度。

九、屬性順序

9.1 從大到小

HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。

（1）class

（2）id, name

（3）data-*

（4）src, for, type, href, value

（5）title, alt

（6）role, aria-*

9.2 Example

9.3 說明

class 用于標識高度可復用組件，因此應該排在首位。id 用于標識具體組件，應當謹慎使用（例如，頁面內的書簽），因此排在第二位。

十、布爾（boolean）型屬性

10.1 注意

（1）布爾型屬性可以在聲明時不賦值。XHTML 規范要求為其賦值，但是 HTML5 規范不需要。

（2）元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false。

（3）如果屬性存在，其值必須是空字符串或 [...] 屬性的規范名稱，并且不要在首尾添加空白符。

簡單來說，就是不用賦值。

10.2 Example

十一、減少標簽的數量

編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現。

十二、減少 JavaScript 生成的標簽

通過 JavaScript 生成的標簽讓內容變得不易查找、編輯，并且降低性能。能避免時盡量避免。

編寫靈活、穩定、高質量的CSS代碼的規范

一、語法

1.1 注意

（1）用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。

（2）為選擇器分組時，將單獨的選擇器單獨放在一行。

（3）為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格。

（4）聲明塊的右花括號應當單獨成行。

（5）每條聲明語句之后應該插入一個空格。

（6）為了獲得更準確的錯誤報告，每條聲明都應該獨占一行。

（7）所有聲明語句都應當以分號結尾。最后一條聲明語句后面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。

（8）對于以逗號分隔的屬性值，每個逗號后面都應該插入一個空格（例如，box-shadow）。

（9）不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的逗號后面插入空格。這樣利于從多個屬性值（既加逗號也加空格）中區分多個顏色值（只加逗號，不加空格）。

（10）對于屬性值或顏色參數，省略小于 1 的小數前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。

（11）十六進制值應該全部小寫，例如，#fff。在掃描文檔時，小寫字符易于分辨，因為他們的形式更易于區分。

（12）盡量使用簡寫形式的十六進制值，例如，用 #fff 代替 #ffffff。

（13）為選擇器中的屬性添加雙引號，例如，input[type="text"]。只有在某些情況下是可選的，但是，為了代碼的一致性，建議都加上雙引號。

（14）避免為 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;。

1.2 Example

二、聲明順序

2.1 相關屬性一組

相關的屬性聲明應當歸為一組，并按照下面的順序排列：

（1）Positioning

（2）Box model

（3）Typographic

（4）Visual

2.2 說明

（1）由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。

（2）盒模型排在第二位，因為它決定了組件的尺寸和位置。

（3）其他屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，因此排在后面。

2.3 Example

三、不要使用 @import

3.1 不用原因

與 <link> 標簽相比，@import 指令要慢很多，不光增加了額外的請求次數，還會導致不可預料的問題。

3.2替代方法

（1）使用多個 <link> 元素

（2）通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯為一個文件

（3）通過 Rails、Jekyll 或其他系統中提供過 CSS 文件合并功能

3.3 Example

四、媒體查詢（Media query）的位置

4.1 相關規則附近

將媒體查詢放在盡可能相關規則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。

4.2 Example

五、帶前綴的屬性

5.1 垂直對齊

當使用特定廠商的帶有前綴的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向對齊，這樣便于多行編輯。

5.2 Example

六、單行規則聲明

6.1 放在一行

對于只包含一條聲明的樣式，為了易讀性和便于快速編輯，建議將語句放在同一行。對于帶有多條聲明的樣式，還是應當將聲明分為多行。

6.2 錯誤檢測

這樣做的關鍵因素是為了錯誤檢測 -- 例如，CSS 校驗器指出在 100 行有語法錯誤。如果是單行單條聲明，你就不會忽略這個錯誤；如果是單行多條聲明的話，你就要仔細分析避免漏掉錯誤了。

6.3 Example

七、簡寫形式的屬性聲明

7.1 濫用簡寫

在需要顯示地設置所有值的情況下，應當盡量限制使用簡寫形式的屬性聲明。常見的濫用簡寫屬性聲明的情況如下：

（1）padding

（2）margin

（3）font

（4）background

（5）border

（5）border-radius

7.2 說明

大部分情況下，我們不需要為簡寫形式的屬性聲明指定所有值。例如，HTML 的 heading 元素只需要設置上、下邊距（margin）的值，因此，在必要的時候，只需覆蓋這兩個值就可以。過度使用簡寫形式的屬性聲明會導致代碼混亂，并且會對屬性值帶來不必要的覆蓋從而引起意外的副作用。

7.3 Example

八、Less 和 Sass 中的嵌套

8.1 盡量不嵌套

避免不必要的嵌套。這是因為雖然你可以使用嵌套，但是并不意味著應該使用嵌套。只有在必須將樣式限制在父元素內（也就是后代選擇器），并且存在多個需要嵌套的元素時才使用嵌套。

8.2 Example

九、Less 和 Sass 中的操作符

為了提高可讀性，在圓括號中的數學計算表達式的數值、變量和操作符之間均添加一個空格。

十、注釋

10.1 注意

代碼是由人編寫并維護的。請確保你的代碼能夠自描述、注釋良好并且易于他人理解。好的代碼注釋能夠傳達上下文關系和代碼目的。不要簡單地重申組件或 class 名稱。

對于較長的注釋，務必書寫完整的句子；對于一般性注解，可以書寫簡潔的短語。

10.2 Example

十一、class 命名

11.1 規范

（1）class 名稱中只能出現小寫字符和破折號（dashe）（不是下劃線，也不是駝峰命名法）。破折號應當用于相關 class 的命名（類似于命名空間）（例如，.btn 和 .btn-danger）。

（2）避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達任何意思。

（3）class 名稱應當盡可能短，并且意義明確。

（4）使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現形式（presentational）的名稱。

（5）基于最近的父 class 或基本（base） class 作為新 class 的前綴。

（6）使用 .js-* class 來標識行為（與樣式相對），并且不要將這些 class 包含到 CSS 文件中。

在為 Sass 和 Less 變量命名時也可以參考上面列出的各項規范。

11.2 Example

十二、選擇器

12.1 注意

（1）對于通用元素使用 class ，這樣利于渲染性能的優化。

（2）對于經常出現的組件，避免使用屬性選擇器（例如，[class^="..."]）。瀏覽器的性能會受到這些因素的影響。

（3）選擇器要盡可能短，并且盡量限制組成選擇器的元素個數，建議不要超過 3 。

（4）只有在必要的時候才將 class 限制在最近的父元素內（也就是后代選擇器）（例如，不使用帶前綴的 class 時 -- 前綴類似于命名空間）。

12.2 Example

十三、代碼組織

13.1 注意

（1）以組件為單位組織代碼段。

（2）制定一致的注釋規范。

（3）使用一致的空白符將代碼分隔成塊，這樣利于掃描較大的文檔。

（4）如果使用了多個 CSS 文件，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動。

13.2 Example

十四、編輯器配置

14.1 避免代碼不同

將你的編輯器按照下面的配置進行設置，以避免常見的代碼不一致和差異：

（1）用兩個空格代替制表符（soft-tab 即用空格代表 tab 符）。

（2）保存文件時，刪除尾部的空白符。

（3）設置文件編碼為 UTF-8。

（4）在文件結尾添加一個空白行。

TML

語法

- 用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。

- 嵌套元素應當縮進一次（即兩個空格）。

- 對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。

- 不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規范中明確說明這是可選的。

- 不要省略可選的結束標簽（closing tag）（例如，</li>或 </body>）。

<!DOCTYPE html>
<html>
 <head>
 <title>Page title</title>
 </head>
 <body>
 <img src="images/company-logo.png" alt="Company">
 <h1 class="hello-world">Hello, world!</h1>
 </body>
</html>

HTML5 doctype

為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現。

<!DOCTYPE html>
<html>
 <head>
 </head>
</html>

語言屬性

根據 HTML5 規范：

<html lang="en-us">
 <!-- ... -->
</html>

IE 兼容模式

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

字符編碼

<head>
 <meta charset="UTF-8">
</head>

引入 CSS 和 JavaScript 文件

根據 HTML5 規范，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript分別是它們的默認值。

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
 /* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>

屬性順序

HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。

- class

- id, name

- data-*

- src, for, type, href, value

- title, alt

- role, aria-*

class 用于標識高度可復用組件，因此應該排在首位。id 用于標識具體組件，應當謹慎使用（例如，頁面內的書簽），因此排在第二位。

<a class="..." id="..." data-toggle="modal" href="#">
 Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">

布爾（boolean）型屬性

布爾型屬性可以在聲明時不賦值。XHTML 規范要求為其賦值，但是 HTML5 規范不需要。

元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false。

如果一定要為其賦值的話，請參考 WhatWG 規范：

如果屬性存在，其值必須是空字符串或 [...] 屬性的規范名稱，并且不要在首尾添加空白符。

簡單來說，就是不用賦值。

<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
 <option value="1" selected>1</option>
</select>

減少標簽的數量

編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現。請看下面的案例：

<!-- Not so great -->
<span class="avatar">
 <img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">

JavaScript 生成的標簽

通過 JavaScript 生成的標簽讓內容變得不易查找、編輯，并且降低性能。能避免時盡量避免。

CSS

語法

- 用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。

- 為選擇器分組時，將單獨的選擇器單獨放在一行。

- 為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格。

- 聲明塊的右花括號應當單獨成行。

- 每條聲明語句的 : 后應該插入一個空格。

- 為了獲得更準確的錯誤報告，每條聲明都應該獨占一行。

- 所有聲明語句都應當以分號結尾。最后一條聲明語句后面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。

- 對于以逗號分隔的屬性值，每個逗號后面都應該插入一個空格（例如，box-shadow）。

- 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的逗號后面插入空格。這樣利于從多個屬性值（既加逗號也加空格）中區分多個顏色值（只加逗號，不加空格）。

- 對于屬性值或顏色參數，省略小于 1 的小數前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。

- 十六進制值應該全部小寫，例如，#fff。在掃描文檔時，小寫字符易于分辨，因為他們的形式更易于區分。

- 盡量使用簡寫形式的十六進制值，例如，用 #fff 代替 #ffffff。

- 為選擇器中的屬性添加雙引號，例如，input[type="text"]。只有在某些情況下是可選的，但是，為了代碼的一致性，建議都加上雙引號。

- 避免為 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;。

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
 padding:15px;
 margin:0px 0px 15px;
 background-color:rgba(0, 0, 0, 0.5);
 box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,.selector-secondary,.selector[type="text"] {
 padding: 15px;
 margin-bottom: 15px;
 background-color: rgba(0,0,0,.5);
 box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

聲明順序

相關的屬性聲明應當歸為一組，并按照下面的順序排列：

- Positioning

- Box model

- Typographic

- Visual

由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型排在第二位，因為它決定了組件的尺寸和位置。

其他屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，因此排在后面。

.declaration-order {
 /* Positioning */
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 100;
 /* Box-model */
 display: block;
 float: right;
 width: 100px;
 height: 100px;
 /* Typography */
 font: normal 13px "Helvetica Neue", sans-serif;
 line-height: 1.5;
 color: #333;
 text-align: center;
 /* Visual */
 background-color: #f5f5f5;
 border: 1px solid #e5e5e5;
 border-radius: 3px;
 /* Misc */
 opacity: 1;
}

不要使用 @import

與 <link> 標簽相比，@import 指令要慢很多，不光增加了額外的請求次數，還會導致不可預料的問題。替代辦法有以下幾種：

- 使用多個 <link> 元素

- 通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯為一個文件

- 通過 Rails、Jekyll 或其他系統中提供過 CSS 文件合并功能

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">
<!-- Avoid @imports -->
<style>
 @import url("more.css");
</style>

媒體查詢（Media query）的位置

將媒體查詢放在盡可能相關規則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。下面給出一個典型的實例。

.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
 .element { ...}
 .element-avatar { ... }
 .element-selected { ... }
}

帶前綴的屬性

當使用特定廠商的帶有前綴的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向對齊，這樣便于多行編輯。

在 Textmate 中，使用 Text → Edit Each Line in Selection(??A)。在 Sublime Text 2 中，使用 Selection → Add Previous Line (??↑) 和 Selection → Add Next Line(??↓)。

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

單行規則聲明

對于只包含一條聲明的樣式，為了易讀性和便于快速編輯，建議將語句放在同一行。對于帶有多條聲明的樣式，還是應當將聲明分為多行。

這樣做的關鍵因素是為了錯誤檢測 -- 例如，CSS 校驗器指出在 183 行有語法錯誤。如果是單行單條聲明，你就不會忽略這個錯誤；如果是單行多條聲明的話，你就要仔細分析避免漏掉錯誤了。

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Multiple declarations, one per line */
.sprite {
 display: inline-block;
 width: 16px;
 height: 15px;
 background-image: url(../img/sprite.png);
}
.icon { background-position: 0 0; }
.icon-home { background-position: 0 -20px; }
.icon-account { background-position: 0 -40px; }

簡寫形式的屬性聲明

在需要顯示地設置所有值的情況下，應當盡量限制使用簡寫形式的屬性聲明。常見的濫用簡寫屬性聲明的情況如下：

- padding

- margin

- font

- background

- border

- border-radius

/* Bad example */
.element {
 margin: 0 0 10px;
 background: red;
 background: url("image.jpg");
 border-radius: 3px 3px 0 0;
}
/* Good example */
.element {
 margin-bottom: 10px;
 background-color: red;
 background-image: url("image.jpg");
 border-top-left-radius: 3px;
 border-top-right-radius: 3px;
}

Less 和 Sass 中的嵌套

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// With nesting
.table > thead > tr {
 > th { … }
 > td { … }
}

Less 和 Sass 中的操作符

為了提高可讀性，在圓括號中的數學計算表達式的數值、變量和操作符之間均添加一個空格。

// Bad example
.element {
 margin: 10px 0 @variable*2 10px;
}
// Good example
.element {
 margin: 10px 0 (@variable * 2) 10px;
}

注釋

對于較長的注釋，務必書寫完整的句子；對于一般性注解，可以書寫簡潔的短語。

/* Bad example */
/* Modal header */
.modal-header {
 ...
}
/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
 ...
}

class 命名

- class 名稱中只能出現小寫字符和破折號（dashe）（不是下劃線，也不是駝峰命名法）。破折號應當用于相關 class 的命名（類似于命名空間）（例如，.btn 和 .btn-danger）。

- 避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達任何意思。

- class 名稱應當盡可能短，并且意義明確。

- 使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現形式（presentational）的名稱。

- 基于最近的父 class 或基本（base） class 作為新 class 的前綴。

- 使用 .js-* class 來標識行為（與樣式相對），并且不要將這些 class 包含到 CSS 文件中。

- 在為 Sass 和 Less 變量命名時也可以參考上面列出的各項規范。

/* Bad example */
.t { ... }
.red { ... }
.header { ... }
/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

選擇器

- 對于通用元素使用 class ，這樣利于渲染性能的優化。

- 對于經常出現的組件，避免使用屬性選擇器（例如，[class^="..."]）。瀏覽器的性能會受到這些因素的影響。

- 選擇器要盡可能短，并且盡量限制組成選擇器的元素個數，建議不要超過 3 。

- 只有在必要的時候才將 class 限制在最近的父元素內（也就是后代選擇器）（例如，不使用帶前綴的 class 時 -- 前綴類似于命名空間）。

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

代碼組織

- 以組件為單位組織代碼段。

- 制定一致的注釋規范。

- 使用一致的空白符將代碼分隔成塊，這樣利于掃描較大的文檔。

- 如果使用了多個 CSS 文件，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動。

/*
 * Component section heading
 */
 .element { ... }
 /*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */
 .element { ... }
 /* Contextual sub-component or modifer */
 .element-heading { ... }

編輯器配置

- 將你的編輯器按照下面的配置進行設置，以避免常見的代碼不一致和差異：

- 用兩個空格代替制表符（soft-tab 即用空格代表 tab 符）。

- 保存文件時，刪除尾部的空白符。

- 設置文件編碼為 UTF-8。

- 在文件結尾添加一個空白行。

來源網絡，侵權聯系刪除

在線咨詢

上一篇：HTML文檔頭部的title標簽和meta有什么作用
下一篇：草圖聯盟-廣告牌店招模型庫集合

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS tab-size 屬性

編寫靈活、穩定、高質量的HTML代碼的規范

一、唯一定律

二、HTML

2.1 語法

2.2 Example

三、HTML5 doctype

四、語言屬性

五、IE 兼容模式

六、字符編碼

七、引入 CSS 和 JavaScript 文件

八、實用為王

九、屬性順序

9.1 從大到小

9.2 Example

9.3 說明

十、布爾（boolean）型屬性

10.1 注意

10.2 Example

十一、減少標簽的數量

十二、減少 JavaScript 生成的標簽

編寫靈活、穩定、高質量的CSS代碼的規范

一、語法

1.1 注意

1.2 Example

二、聲明順序

2.1 相關屬性一組

2.2 說明

2.3 Example

三、不要使用 @import

3.1 不用原因

3.2替代方法

3.3 Example

四、媒體查詢（Media query）的位置

4.1 相關規則附近

4.2 Example

五、帶前綴的屬性

5.1 垂直對齊

5.2 Example

六、單行規則聲明

6.1 放在一行

6.2 錯誤檢測

6.3 Example

七、簡寫形式的屬性聲明

7.1 濫用簡寫

7.2 說明

7.3 Example

八、Less 和 Sass 中的嵌套

8.1 盡量不嵌套

8.2 Example

九、Less 和 Sass 中的操作符

十、注釋

10.1 注意

10.2 Example

十一、class 命名

11.1 規范

11.2 Example

十二、選擇器

12.1 注意

12.2 Example

十三、代碼組織

13.1 注意

13.2 Example

十四、編輯器配置

14.1 避免代碼不同

您的項目需求