CSS || 功能分類

CSS模塊化規則

CSS模塊的設計原則：

1. 可重用

2. 可維護

3. 可擴展

1 常見的問題

1.1 基於父組件直接修改樣式

.widget {  
  background: yellow;  
  border: 1px solid black;  
  color: black;  
  width: 50%;  
}  
 
#sidebar .widget {  
  width: 200px;  
}  
 
body.homepage .widget {  
  background: white;  
}

• 應用其他編程語言中類的概念，直接修改父組件的樣式至關於修改類的定義，違反了開/閉原則：對擴展開放；對修改閉合

1.2 使用複雜的選擇器

#main-nav ul li ul li div { }  
#content article h1:first-child { }  
#sidebar > div > h3 + p { }

• 依靠選擇器與HTML元素標籤組合，HTML代碼很乾淨，可是CSS卻變得凌亂，而且增長了CSS與HTML結構的耦合

1.3 一個CSS選擇器作的事情太多

.widget {  
  position: absolute;  
  top: 20px;  
  left: 20px;  
  background-color: red;  
  font-size: 1.5em;  
  text-transform: uppercase;  
}

• .widget選擇器同時設置了組件的位置、外觀。組件的外觀能夠通用，可是位置卻不能。

1.4 總結

出現上述問題的願意：一個class承擔的樣式太多。

項目的總體複雜度是必定的，但各個模塊的複雜度不一樣。

• 使用複雜的選擇器、一個class承擔許多功能，能夠簡化開發的流程；可是維護與重用卻很麻煩

• 模塊劃分會增長CSS開發的複雜度，可是卻同時下降CSS維護與重用的麻煩

2 取捨

1. CSS中儘量少的包含HTML結構：少使用嵌套層次深的選擇器；

2. CSS只定義模塊外觀樣式，在HTML頁面上進行調用：更少的CSS被更多的HTML結構調用

3. 對於抽象的樣式能夠定義在容器中

3 推薦

3.1 專一

使用類選擇器定義元素樣式，將class應用在元素上便可；不要寫嵌套深的CSS選擇器

/* Grenade */ 
#main-nav ul li ul { }  
 
/* Sniper Rifle */ 
.subnav { }

3.2 模塊化

一個組織結構良好的組件層能夠解決HTML與CSS的耦合關係。CSS定義組件的外觀，不定義位置和佈局。在使用background、font等簡寫屬性時，注意其中關於位置和佈局的樣式（background-position等）

佈局和位置由單獨的佈局類或單獨容器元素構成。

3.3 命名空間與修飾符

對組件每一個子元素都使用命名空間，每一個元素在不一樣語境使用修飾符擴展。下降現有類名衝突

使用BEM（Block__Element--Modifier）規則進行命名。

.btn
.btn__item
.btn__item--info
.btn__item--danger

3.4 將CSS組織成邏輯結構

在《SMACSS》中提到，CSS能夠被分紅4中不一樣的類：基礎base、佈局layout、模塊modules和狀態state

• 基礎base：包括復位原則和元素的初始值；

• 佈局layout：對整個站點內元素進行定位（相似網格系統）

• 模塊modules：可重用的視覺元素

• 狀態state：不一樣狀態觸發的樣式（經過JavaScript實現開啓和關閉）

3.5 根據樣式與風格使用類名

在Web前端中，class類名的做用有四種：HTML樣式、JavaScript的hook、功能檢測和自動化測試

爲區別不一樣功能的class，建議爲其增長前綴：js-用於JavaScript操做