亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

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

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

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

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 成為相對地址，避免 Mixed Content 問題，減小文件字節(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ī)范；
組件塊和子組件塊以及聲明塊之間使用一空行分隔，子組件塊之間三空行分隔；
如果使用了多個 CSS 文件，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動；
良好的注釋是非常重要的。請留出時間來描述組件（component）的工作方式、局限性和構(gòu)建它們的方法。不要讓你的團隊其它成員 來猜測一段不通用或不明顯的代碼的目的。

提示：通過配置編輯器，可以提供快捷鍵來輸出一致認可的注釋模式。

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

使用語義化、通用的命名方式；
使用連字符 - 作為 ID、Class 名稱界定符，不要駝峰命名法和下劃線；
避免選擇器嵌套層級過多，盡量少于 3 級；
避免選擇器和 Class、ID 疊加使用；
出于性能考量，在沒有必要的情況下避免元素選擇器疊加 Class、ID 使用。

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

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 {}  

聲明塊格式

選擇器分組時，保持獨立的選擇器占用一行；
聲明塊的左括號 { 前添加一個空格；
聲明塊的右括號 } 應(yīng)單獨成行；
聲明語句中的 : 后應(yīng)添加一個空格；
聲明語句應(yīng)以分號 ; 結(jié)尾；
一般以逗號分隔的屬性值，每個逗號后應(yīng)添加一個空格；
rgb()、rgba()、hsl()、hsla()或 rect()括號內(nèi)的值，逗號分隔，但逗號后不添加一個空格；
對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）；
十六進制值應(yīng)該全部小寫和盡量簡寫，例如，#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)為一組，推薦的樣式編寫順序

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. }  

引號使用

url()、屬性選擇符、屬性值使用雙引號。 參考 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. }  

媒體查詢（Media query）的位置

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

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 要慢很多，不光增加額外的請求數(shù)，還會導(dǎo)致不可預(yù)料的問題。

替代辦法：

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

鏈接的樣式順序：

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

無需添加瀏覽器廠商前綴

使用 Autoprefixer 自動添加瀏覽器廠商前綴，編寫 CSS 時不需要添加瀏覽器前綴，直接使用標準的 CSS 編寫。

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

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

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

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

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

Naming components （組件命名）

Components 最少以兩個單詞命名，通過 - 分離，例如：

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

Elements 是 Components 中的元素

Naming elements（元素命名）

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

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

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

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

Avoid tag selectors（避免標簽選擇器）

任何時候盡可能使用 classnames。標簽選擇器在使用上沒有問題，但是其性能上稍弱，并且表意不明確。

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

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

Components 和 Elements 可能都會擁有 Variants。

Naming variants（變體命名）

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

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（中劃線前綴）

為什么使用中劃線作為變體的前綴？

它可以避免歧義與 Elements
CSS class 僅能以單詞和 _ 或 - 開頭
中劃線比下劃線更容易輸出


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)將在組件的上下文（父元素）中進行處理，比如以下例子中，將 widths 和 floats 應(yīng)用在 list component(.article-list)當中，而不是 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（避免過分嵌套）

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

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（顧慮）

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

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

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

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

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

Summary（總結(jié)）

以 Components 的角度思考，以兩個單詞命名（.screenshot-image）
Components 中的 Elements，以一個單詞命名（.blog-post .title）
Variants，以中劃線-作為前綴（.shop-banner.-with-icon）
Components 可以互相嵌套
記住，你可以通過繼承讓事情變得更簡單
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 語句

@import 語句引用的文需要寫在一對引號內(nèi)，.less 后綴不得省略。引號使用 ' 和 " 均可，但在同一項目內(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 時，如果 mixin 名稱不是一個需要使用的 className，必須加上括號，否則即使不被調(diào)用也會輸出到 CSS 中。

如果混入的是本身不輸出內(nèi)容的 mixin，需要在 mixin 后添加括號（即使不傳參數(shù)），以區(qū)分這是否是一個 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. }  

避免嵌套層級過多

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


字符串插值

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

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

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

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

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

常見的重排元素:

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 屬性會影響頁面的渲染，請合理使用。

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 在渲染時計算量比較大，盡量減少使用。

動畫性能優(yōu)化

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

動畫的基本概念：

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

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

多利用硬件能力，如通過 3D 變形開啟 GPU 加速

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

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

使用 translate3d 右移 500px 的動畫流暢度要明顯優(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 選擇器對性能的影響源于瀏覽器匹配選擇器和文檔元素時所消耗的時間，所以優(yōu)化選擇器的原則是應(yīng)盡量避免使用消耗更多匹配時間的選擇器。而在這之前我們需要了解 CSS 選擇器匹配的機制， 如子選擇器規(guī)則：

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

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

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

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

如果把例子的子選擇器改為后代選擇器則會開銷更多，在遍歷頁面中所有 a 元素后還需向其上級遍歷直到根節(jié)點。

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

理解了 CSS 選擇器從右到左匹配的機制后，明白只要當前選擇符的左邊還有其他選擇符，樣式系統(tǒng)就會繼續(xù)向左移動，直到找到和規(guī)則匹配的選擇符，或者因為不匹配而退出。我們把最右邊選擇符稱之為關(guān)鍵選擇器。

1.避免使用通用選擇器

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

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

2.避免使用標簽或 class 選擇器限制 id 選擇器

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

3.避免使用標簽限制 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.避免使用多層標簽選擇器。使用 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)文章

最新評論