欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

全面總結(jié)CSS代碼的編寫(xiě)規(guī)范及優(yōu)化建議

極客學(xué)院   發(fā)布時(shí)間：2016-02-23 10:56:18   作者：佚名   我要評(píng)論
這篇文章主要介紹了全面總結(jié)CSS代碼的編寫(xiě)規(guī)范及優(yōu)化建議,從最基本的代碼塊格式到模塊化再到性能優(yōu)化,整理得相當(dāng)詳細(xì),十分推薦!需要的朋友可以參考下

結(jié)構(gòu)、樣式、行為分離
盡量確保文檔和模板只包含 HTML 結(jié)構(gòu)，樣式都放到樣式表里，行為都放到腳本里。

縮進(jìn)
統(tǒng)一兩個(gè)空格縮進(jìn)（總之縮進(jìn)統(tǒng)一即可），不要使用 Tab 或者 Tab、空格混搭。

文件編碼
使用不帶 BOM 的 UTF-8 編碼。

在 HTML 中指定編碼<meta charset="utf-8">；
無(wú)需使用@charset 指定樣式表的編碼，它默認(rèn)為 UTF-8；
一律使用小寫(xiě)字母

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!-- Recommended -->   
  2. <img src="google.png" alt="Google">   
  3.   
  4. <!-- Not recommended -->   
  5. <A HREF="/">Home</A>   
  6. /* Recommended */  
  7. color: #e5e5e5;   
  8.   
  9. /* Not recommended */  
  10. color: #E5E5E5;  

省略外鏈資源 URL 協(xié)議部分
省略外鏈資源（圖片及其它媒體資源）URL 中的 http / https 協(xié)議，使 URL 成為相對(duì)地址，避免 Mixed Content 問(wèn)題，減小文件字節(jié)數(shù)。

其它協(xié)議（ftp 等）的 URL 不省略。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!-- Recommended -->   
  2. <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>   
  3.   
  4. <!-- Not recommended -->   
  5. <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>   
  6. /* Recommended */  
  7. .example {   
  8.   background: url(//www.google.com/images/example);   
  9. }   
  10.   
  11. /* Not recommended */  
  12. .example {   
  13.   background: url(http://www.google.com/images/example);   
  14. }  

CSS 注釋

組件塊和子組件塊以及聲明塊之間使用一空行分隔，子組件塊之間三空行分隔；

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* ==========================================================================  
  2.    組件塊  
  3.  ============================================================================ */  
  4.   
  5. /* 子組件塊  
  6.  ============================================================================ */  
  7. .selector {   
  8.   padding: 15px;   
  9.   margin-bottom: 15px;   
  10. }   
  11.   
  12. /* 子組件塊  
  13.  ============================================================================ */  
  14. .selector-secondary {   
  15.   display: block; /* 注釋*/  
  16. }   
  17.   
  18. .selector-three {   
  19.   display: span;   
  20. }  


代碼組織
以組件為單位組織代碼段；
制定一致的注釋規(guī)范；
組件塊和子組件塊以及聲明塊之間使用一空行分隔，子組件塊之間三空行分隔；
如果使用了多個(gè) CSS 文件，將其按照組件而非頁(yè)面的形式分拆，因?yàn)轫?yè)面會(huì)被重組，而組件只會(huì)被移動(dòng)；
良好的注釋是非常重要的。請(qǐng)留出時(shí)間來(lái)描述組件（component）的工作方式、局限性和構(gòu)建它們的方法。不要讓你的團(tuán)隊(duì)其它成員 來(lái)猜測(cè)一段不通用或不明顯的代碼的目的。

提示：通過(guò)配置編輯器，可以提供快捷鍵來(lái)輸出一致認(rèn)可的注釋模式。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* ==========================================================================  
  2.    組件塊  
  3.  ============================================================================ */  
  4.   
  5. /* 子組件塊  
  6.  ============================================================================ */  
  7. .selector {   
  8.   padding: 15px;   
  9.   margin-bottom: 15px;   
  10. }   
  11.   
  12. /* 子組件塊  
  13.  ============================================================================ */  
  14. .selector-secondary {   
  15.   display: block; /* 注釋*/  
  16. }   
  17.   
  18. .selector-three {   
  19.   display: span;   
  20. }  

Class 和 ID

使用語(yǔ)義化、通用的命名方式；
使用連字符 - 作為 ID、Class 名稱(chēng)界定符，不要駝峰命名法和下劃線(xiàn)；
避免選擇器嵌套層級(jí)過(guò)多，盡量少于 3 級(jí)；
避免選擇器和 Class、ID 疊加使用；
出于性能考量，在沒(méi)有必要的情況下避免元素選擇器疊加 Class、ID 使用。

元素選擇器和 ID、Class 混合使用也違反關(guān)注分離原則。如果 HTML 標(biāo)簽修改了，就要再去修改 CSS 代碼，不利于后期維護(hù)。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* Not recommended */  
  2. .red {}   
  3. .box_green {}   
  4. .page .header .login #username input {}   
  5. ul#example {}   
  6.   
  7. /* Recommended */  
  8. #nav {}   
  9. .box-video {}   
  10. #username input {}   
  11. #example {}  

聲明塊格式

選擇器分組時(shí)，保持獨(dú)立的選擇器占用一行；
聲明塊的左括號(hào) { 前添加一個(gè)空格；
聲明塊的右括號(hào) } 應(yīng)單獨(dú)成行；
聲明語(yǔ)句中的 : 后應(yīng)添加一個(gè)空格；
聲明語(yǔ)句應(yīng)以分號(hào) ; 結(jié)尾；
一般以逗號(hào)分隔的屬性值，每個(gè)逗號(hào)后應(yīng)添加一個(gè)空格；
rgb()、rgba()、hsl()、hsla()或 rect()括號(hào)內(nèi)的值，逗號(hào)分隔，但逗號(hào)后不添加一個(gè)空格；
對(duì)于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）；
十六進(jìn)制值應(yīng)該全部小寫(xiě)和盡量簡(jiǎn)寫(xiě)，例如，#fff 代替 #ffffff；
避免為 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;；

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*  Not recommended  */  
  2. .selector, .selector-secondary, .selector[type=text] {   
  3.   padding:15px;   
  4.   margin:0px 0px 15px;   
  5.   background-color:rgba(0, 0, 0, 0.5);   
  6.   box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF  
  7. }   
  8.   
  9. /* Recommended */  
  10. .selector,   
  11. .selector-secondary,   
  12. .selector[type="text"] {   
  13.   padding: 15px;   
  14.   margin-bottom: 15px;   
  15.   background-color: rgba(0,0,0,.5);   
  16.   box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;   
  17. }  

聲明順序

相關(guān)屬性應(yīng)為一組，推薦的樣式編寫(xiě)順序

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

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .declaration-order {   
  2.   /* Positioning */  
  3.   position: absolute;   
  4.   top: 0;   
  5.   rightright: 0;   
  6.   bottombottom: 0;   
  7.   left: 0;   
  8.   z-index: 100;   
  9.   
  10.   /* Box model */  
  11.   display: block;   
  12.   box-sizing: border-box;   
  13.   width: 100px;   
  14.   height: 100px;   
  15.   padding: 10px;   
  16.   border: 1px solid #e5e5e5;   
  17.   border-radius: 3px;   
  18.   margin: 10px;   
  19.   float: rightright;   
  20.   overflow: hidden;   
  21.   
  22.   /* Typographic */  
  23.   font: normal 13px "Helvetica Neue", sans-serif;   
  24.   line-height: 1.5;   
  25.   text-align: center;   
  26.   
  27.   /* Visual */  
  28.   background-color: #f5f5f5;   
  29.   color: #fff;   
  30.   opacity: .8;   
  31.   
  32.   /* Other */  
  33.   cursor: pointer;   
  34. }  

引號(hào)使用

url()、屬性選擇符、屬性值使用雙引號(hào)。 參考 Is quoting the value of url() really necessary?

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* Not recommended */  
  2. @import url(//www.google.com/css/maia.css);   
  3.   
  4. html {   
  5.   font-family: 'open sans', arial, sans-serif;   
  6. }   
  7.   
  8. /* Recommended */  
  9. @import url("//www.google.com/css/maia.css");   
  10.   
  11. html {   
  12.   font-family: "open sans", arial, sans-serif;   
  13. }   
  14.   
  15. .selector[type="text"] {   
  16.   
  17. }  

媒體查詢(xún)（Media query）的位置

將媒體查詢(xún)放在盡可能相關(guān)規(guī)則的附近。不要將他們打包放在一個(gè)單一樣式文件中或者放在文檔底部。如果你把他們分開(kāi)了，將來(lái)只會(huì)被大家遺忘。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .element { ... }   
  2. .element-avatar { ... }   
  3. .element-selected { ... }   
  4.   
  5. @media (max-width: 768px) {   
  6.   .element { ...}   
  7.   .element-avatar { ... }   
  8.   .element-selected { ... }   
  9. }  

不要使用 @import

與<link>相比，@import 要慢很多，不光增加額外的請(qǐng)求數(shù)，還會(huì)導(dǎo)致不可預(yù)料的問(wèn)題。

替代辦法：

使用多個(gè) 元素；
通過(guò) Sass 或 Less 類(lèi)似的 CSS 預(yù)處理器將多個(gè) CSS 文件編譯為一個(gè)文件；
其他 CSS 文件合并工具；
參考 don’t use @import；

鏈接的樣式順序：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. a:link -> a:visited -> a:hover -> a:active（LoVeHAte）  

無(wú)需添加瀏覽器廠商前綴

使用 Autoprefixer 自動(dòng)添加瀏覽器廠商前綴，編寫(xiě) CSS 時(shí)不需要添加瀏覽器前綴，直接使用標(biāo)準(zhǔn)的 CSS 編寫(xiě)。

Autoprefixer 通過(guò) Can I use，按兼容的要求，對(duì)相應(yīng)的 CSS 代碼添加瀏覽器廠商前綴。

模塊組織
任何超過(guò) 1000 行的 CSS 代碼，你都曾經(jīng)歷過(guò)這樣的體驗(yàn)：

這個(gè) class 到底是什么意思呢？
這個(gè) class 在哪里被使用呢？
如果我創(chuàng)建一個(gè) xxoo class，會(huì)造成沖突嗎？
Reasonable System for CSS Stylesheet Structure 的目標(biāo)就是解決以上問(wèn)題，它不是一個(gè)框架，而是通過(guò)規(guī)范，讓你構(gòu)建更健壯和可維護(hù)的 CSS 代碼。

Components（組件）
2016223111356545.png (703×166)

從 Components 的角度思考，將網(wǎng)站的模塊都作為一個(gè)獨(dú)立的 Components。

Naming components （組件命名）

Components 最少以?xún)蓚€(gè)單詞命名，通過(guò) - 分離，例如：

點(diǎn)贊按鈕 (.like-button)
搜索框 (.search-form)
文章卡片 (.article-card)
Elements（元素）
2016223111440481.png (703×166)

Elements 是 Components 中的元素

Naming elements（元素命名）

Elements 的類(lèi)名應(yīng)盡可能僅有一個(gè)單詞。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .search-form {   
  2.    > .field { /* ... */ }   
  3.    > .action { /* ... */ }   
  4.  }  

On multiple words （多個(gè)單詞）
對(duì)于倘若需要兩個(gè)或以上單詞表達(dá)的 Elements 類(lèi)名，不應(yīng)使用中劃線(xiàn)和下劃線(xiàn)連接，應(yīng)直接連接。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .profile-box {   
  2.   > .firstname { /* ... */ }   
  3.   > .lastname { /* ... */ }   
  4.   > .avatar { /* ... */ }   
  5. }  

Avoid tag selectors（避免標(biāo)簽選擇器）

任何時(shí)候盡可能使用 classnames。標(biāo)簽選擇器在使用上沒(méi)有問(wèn)題，但是其性能上稍弱，并且表意不明確。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .article-card {   
  2.   > h3    { /* ✗ avoid */ }   
  3.   > .name { /* ✓ better */ }   
  4. }  

Variants（變體）
2016223111600412.png (703×284)

Components 和 Elements 可能都會(huì)擁有 Variants。

Naming variants（變體命名）

Variants 的 classname 應(yīng)帶有前綴中劃線(xiàn) -

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .like-button {   
  2.   &.-wide { /* ... */ }   
  3.   &.-short { /* ... */ }   
  4.   &.-disabled { /* ... */ }   
  5. }  

Element variants（元素變體）

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .shopping-card {   
  2.   > .title { /* ... */ }   
  3.   > .title.-small { /* ... */ }   
  4. }  

Dash prefixes（中劃線(xiàn)前綴）

為什么使用中劃線(xiàn)作為變體的前綴？

它可以避免歧義與 Elements
CSS class 僅能以單詞和 _ 或 - 開(kāi)頭
中劃線(xiàn)比下劃線(xiàn)更容易輸出


Layout （布局）
2016223111621734.png (703×320)

Avoid positioning properties（避免定位屬性）

Components 應(yīng)該在不同的上下文中都可以復(fù)用，所以應(yīng)避免設(shè)置以下屬性：

Positioning (position, top, left, right, bottom)
Floats (float, clear)
Margins (margin)
Dimensions (width, height) *


Fixed dimensions（固定尺寸）

頭像和 logos 這些元素應(yīng)該設(shè)置固定尺寸（寬度，高度...）。

Define positioning in parents（在父元素中設(shè)置定位）

倘若你需要為組件設(shè)置定位，應(yīng)將在組件的上下文（父元素）中進(jìn)行處理，比如以下例子中，將 widths 和 floats 應(yīng)用在 list component(.article-list)當(dāng)中，而不是 component(.article-card)自身。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .article-list {   
  2.   & {   
  3.     @include clearfix;   
  4.   }   
  5.   
  6.   > .article-card {   
  7.     width: 33.3%;   
  8.     float: left;   
  9.   }   
  10. }   
  11.   
  12. .article-card {   
  13.   & { /* ... */ }   
  14.   > .image { /* ... */ }   
  15.   > .title { /* ... */ }   
  16.   > .category { /* ... */ }   
  17. }  

Avoid over-nesting（避免過(guò)分嵌套）

當(dāng)出現(xiàn)多個(gè)嵌套的時(shí)候容易失去控制，應(yīng)保持不超過(guò)一個(gè)嵌套。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* ✗ Avoid: 3 levels of nesting */  
  2. .image-frame {   
  3.   > .description {   
  4.     /* ... */  
  5.   
  6.     > .icon {   
  7.       /* ... */  
  8.     }   
  9.   }   
  10. }   
  11.   
  12. /* ✓ Better: 2 levels */  
  13. .image-frame {   
  14.   > .description { /* ... */ }   
  15.   > .description > .icon { /* ... */ }   
  16. }  

Apprehensions（顧慮）

中劃線(xiàn)-是一坨糟糕的玩意：其實(shí)你可以選擇性的使用，只要將 Components, Elements, Variants 記在心上即可。
我有時(shí)候想不出兩個(gè)單詞唉：有些組件的確使用一個(gè)單詞就能表意，比如 aleter。但其實(shí)你可以使用后綴，使其意識(shí)更加明確。
比如塊級(jí)元素：

.alert-box
.alert-card
.alert-block
或行內(nèi)級(jí)元素

.link-button
.link-span
Terminologies（術(shù)語(yǔ)）

RSCSS 與其他 CSS 模塊組織系統(tǒng)相似的概念

RSCSS BEM SMACSS
Component Block Module
Element Element ?
Layout ? Layout
Variant Modifier Theme & State

Summary（總結(jié)）

以 Components 的角度思考，以?xún)蓚€(gè)單詞命名（.screenshot-image）
Components 中的 Elements，以一個(gè)單詞命名（.blog-post .title）
Variants，以中劃線(xiàn)-作為前綴（.shop-banner.-with-icon）
Components 可以互相嵌套
記住，你可以通過(guò)繼承讓事情變得更簡(jiǎn)單
LESS 規(guī)范
代碼組織

代碼按以下順序組織：

@import
變量聲明
樣式聲明

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @import "mixins/size.less";   
  2.   
  3. @default-text-color: #333;   
  4.   
  5. .page {   
  6.   width: 960px;   
  7.   margin: 0 auto;   
  8. }  

@import 語(yǔ)句

@import 語(yǔ)句引用的文需要寫(xiě)在一對(duì)引號(hào)內(nèi)，.less 后綴不得省略。引號(hào)使用 ' 和 " 均可，但在同一項(xiàng)目?jī)?nèi)需統(tǒng)一。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* Not recommended */  
  2. @import "mixins/size";   
  3. @import 'mixins/grid.less';   
  4.   
  5. /* Recommended */  
  6. @import "mixins/size.less";   
  7. @import "mixins/grid.less";  

混入（Mixin）

在定義 mixin 時(shí)，如果 mixin 名稱(chēng)不是一個(gè)需要使用的 className，必須加上括號(hào)，否則即使不被調(diào)用也會(huì)輸出到 CSS 中。

如果混入的是本身不輸出內(nèi)容的 mixin，需要在 mixin 后添加括號(hào)（即使不傳參數(shù)），以區(qū)分這是否是一個(gè) className。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* Not recommended */  
  2. .big-text {   
  3.   font-size: 2em;   
  4. }   
  5.   
  6. h3 {   
  7.   .big-text;   
  8.   .clearfix;   
  9. }   
  10.   
  11. /* Recommended */  
  12. .big-text() {   
  13.   font-size: 2em;   
  14. }   
  15.   
  16. h3 {   
  17.   .big-text(); /* 1 */  
  18.   .clearfix(); /* 2 */  
  19. }  

避免嵌套層級(jí)過(guò)多

將嵌套深度限制在 2 級(jí)。對(duì)于超過(guò) 3 級(jí)的嵌套，給予重新評(píng)估。這可以避免出現(xiàn)過(guò)于詳實(shí)的 CSS 選擇器。
避免大量的嵌套規(guī)則。當(dāng)可讀性受到影響時(shí)，將之打斷。推薦避免出現(xiàn)多于 20 行的嵌套規(guī)則出現(xiàn)。


字符串插值

變量可以用類(lèi)似 ruby 和 php 的方式嵌入到字符串中，像 @{name} 這樣的結(jié)構(gòu):@base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png");

性能優(yōu)化
慎重選擇高消耗的樣式

高消耗屬性在繪制前需要瀏覽器進(jìn)行大量計(jì)算：

box-shadows
border-radius
transparency
transforms
CSS filters（性能殺手）
避免過(guò)分重排

當(dāng)發(fā)生重排的時(shí)候，瀏覽器需要重新計(jì)算布局位置與大小，更多詳情。

常見(jiàn)的重排元素:

width
height
padding
margin
display
border-width
position
top
left
right
bottom
font-size
float
text-align
overflow-y
font-weight
overflow
font-family
line-height
vertical-align
clear
white-space
min-height


正確使用 Display 的屬性

Display 屬性會(huì)影響頁(yè)面的渲染，請(qǐng)合理使用。

display: inline 后不應(yīng)該再使用 width、height、margin、padding 以及 float；
display: inline-block 后不應(yīng)該再使用 float；
display: block 后不應(yīng)該再使用 vertical-align；
display: table-* 后不應(yīng)該再使用 margin 或者 float；


不濫用 Float

Float 在渲染時(shí)計(jì)算量比較大，盡量減少使用。

動(dòng)畫(huà)性能優(yōu)化

動(dòng)畫(huà)的實(shí)現(xiàn)原理，是利用了人眼的 “視覺(jué)暫留” 現(xiàn)象，在短時(shí)間內(nèi)連續(xù)播放數(shù)幅靜止的畫(huà)面，使肉眼因視覺(jué)殘象產(chǎn)生錯(cuò)覺(jué)，而誤以為畫(huà)面在 “動(dòng)”。

動(dòng)畫(huà)的基本概念：

幀：在動(dòng)畫(huà)過(guò)程中，每一幅靜止畫(huà)面即為一 “幀”；
幀率：即每秒鐘播放的靜止畫(huà)面的數(shù)量，單位是 fps(Frame per second)；
幀時(shí)長(zhǎng)：即每一幅靜止畫(huà)面的停留時(shí)間，單位一般是 ms(毫秒)；
跳幀 (掉幀 / 丟幀)：在幀率固定的動(dòng)畫(huà)中，某一幀的時(shí)長(zhǎng)遠(yuǎn)高于平均幀時(shí)長(zhǎng)，導(dǎo)致其后續(xù)數(shù)幀被擠壓而丟失的現(xiàn)象。
一般瀏覽器的渲染刷新頻率是 60 fps，所以在網(wǎng)頁(yè)當(dāng)中，幀率如果達(dá)到 50-60 fps 的動(dòng)畫(huà)將會(huì)相當(dāng)流暢，讓人感到舒適。

如果使用基于 javaScript 的動(dòng)畫(huà)，盡量使用 requestAnimationFrame。避免使用 setTimeout，setInterval。
避免通過(guò)類(lèi)似 jQuery animate()-style 改變每幀的樣式，使用 CSS 聲明動(dòng)畫(huà)會(huì)得到更好的瀏覽器優(yōu)化。
使用 translate 取代 absolute 定位就會(huì)得到更好的 fps，動(dòng)畫(huà)會(huì)更順滑。
2016223112101026.png (1000×650)

多利用硬件能力，如通過(guò) 3D 變形開(kāi)啟 GPU 加速

一般在 Chrome 中，3D 或透視變換（perspective transform）CSS 屬性和對(duì) opacity 進(jìn)行 CSS 動(dòng)畫(huà)會(huì)創(chuàng)建新的圖層，在硬件加速渲染通道的優(yōu)化下，GPU 完成 3D 變形等操作后，將圖層進(jìn)行復(fù)合操作（Compesite Layers），從而避免觸發(fā)瀏覽器大面積重繪和重排。

注：3D 變形會(huì)消耗更多的內(nèi)存和功耗。

使用 translate3d 右移 500px 的動(dòng)畫(huà)流暢度要明顯優(yōu)于直接使用 left：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .ball-1 {   
  2.   transition: -webkit-transform .5s ease;   
  3.   -webkit-transform: translate3d(0, 0, 0);   
  4. }   
  5. .ball-1.slidein{   
  6.   -webkit-transform: translate3d(500px, 0, 0);   
  7. }   
  8. .ball-2 {   
  9.   transition: left .5s ease; left：0;   
  10. }   
  11. .ball-2.slidein {   
  12.   left：500px;   
  13. }  

提升 CSS 選擇器性能

CSS 選擇器對(duì)性能的影響源于瀏覽器匹配選擇器和文檔元素時(shí)所消耗的時(shí)間，所以?xún)?yōu)化選擇器的原則是應(yīng)盡量避免使用消耗更多匹配時(shí)間的選擇器。而在這之前我們需要了解 CSS 選擇器匹配的機(jī)制， 如子選擇器規(guī)則：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #header > a {font-weight:blod;}  

我們中的大多數(shù)人都是從左到右的閱讀習(xí)慣，會(huì)習(xí)慣性的設(shè)定瀏覽器也是從左到右的方式進(jìn)行匹配規(guī)則，推測(cè)這條規(guī)則的開(kāi)銷(xiāo)并不高。

我們會(huì)假設(shè)瀏覽器以這樣的方式工作：尋找 id 為 header 的元素，然后將樣式規(guī)則應(yīng)用到直系子元素中的 a 元素上。我們知道文檔中只有一個(gè) id 為 header 的元素，并且它只有幾個(gè) a 元素的子節(jié)點(diǎn)，所以這個(gè) CSS 選擇器應(yīng)該相當(dāng)高效。

事實(shí)上，卻恰恰相反，CSS 選擇器是從右到左進(jìn)行規(guī)則匹配。了解這個(gè)機(jī)制后，例子中看似高效的選擇器在實(shí)際中的匹配開(kāi)銷(xiāo)是很高的，瀏覽器必須遍歷頁(yè)面中所有的 a 元素并且確定其父元素的 id 是否為 header 。

如果把例子的子選擇器改為后代選擇器則會(huì)開(kāi)銷(xiāo)更多，在遍歷頁(yè)面中所有 a 元素后還需向其上級(jí)遍歷直到根節(jié)點(diǎn)。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #header  a {font-weight:blod;}  

理解了 CSS 選擇器從右到左匹配的機(jī)制后，明白只要當(dāng)前選擇符的左邊還有其他選擇符，樣式系統(tǒng)就會(huì)繼續(xù)向左移動(dòng)，直到找到和規(guī)則匹配的選擇符，或者因?yàn)椴黄ヅ涠顺觥Ｎ覀儼炎钣疫呥x擇符稱(chēng)之為關(guān)鍵選擇器。

1.避免使用通用選擇器

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* Not recommended */  
  2. .content * {color: red;}  

瀏覽器匹配文檔中所有的元素后分別向上逐級(jí)匹配 class 為 content 的元素，直到文檔的根節(jié)點(diǎn)。因此其匹配開(kāi)銷(xiāo)是非常大的，所以應(yīng)避免使用關(guān)鍵選擇器是通配選擇器的情況。

2.避免使用標(biāo)簽或 class 選擇器限制 id 選擇器

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* Not recommended */  
  2. button#backButton {…}   
  3. /* Recommended */  
  4. #newMenuIcon {…}  

3.避免使用標(biāo)簽限制 class 選擇器

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* Not recommended */  
  2. treecell.indented {…}   
  3. /* Recommended */  
  4. .treecell-indented {…}   
  5. /* Much to recommended */  
  6. .hierarchy-deep {…}  

4.避免使用多層標(biāo)簽選擇器。使用 class 選擇器替換，減少 css 查找

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* Not recommended */  
  2. treeitem[mailfolder="true"] > treerow > treecell {…}   
  3. /* Recommended */  
  4. .treecell-mailfolder {…}  

5.避免使用子選擇器

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* Not recommended */  
  2. treehead treerow treecell {…}   
  3. /* Recommended */  
  4. treehead > treerow > treecell {…}   
  5. /* Much to recommended */  
  6. .treecell-header {…}  

6.使用繼承

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* Not recommended */  
  2. #bookmarkMenuItem > .menu-left { list-style-image: url(blah) }   
  3. /* Recommended */  
  4. #bookmarkMenuItem { list-style-image: url(blah) }  

相關(guān)文章

最新評(píng)論