CSS || 功能分類

xuhong 發布于2019-08-29 12:13 / 2171人閱讀

摘要：組件的外觀可以通用，但是位置卻不能。總結出現上述問題的愿意一個承擔的樣式太多。在使用等簡寫屬性時，注意其中關于位置和布局的樣式等布局和位置由多帶帶的布局類或多帶帶容器元素構成。降低現有類名沖突使用規則進行命名。

CSS模塊化規則

CSS模塊的設計原則：

可重用

可維護

可擴展

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 取舍

CSS中盡可能少的包含HTML結構：少使用嵌套層次深的選擇器；

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

對于抽象的樣式可以定義在容器中

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操作

GPU云服務器云服務器索引分類網絡分類網站分類無限分類

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111756.html

css 命名分類排序方法

摘要：功能類和皮膚類樣式為表現化的樣式，請不要濫用以上順序可以按需求適當調整。 CSS內部的分類及其順序1、重置（reset）和默認（base）（tags）：消除默認樣式和瀏覽器差異，并設置部分標簽的初始樣式，以減少后面的重復勞動！你可以根據你的網站需求設置！統一處理：建議在這個位置統一調用背景圖（這里指多個布局或模塊或元件共用的圖）和清除浮動（這里指通用性較高的布局、模塊、元件內的清除）等...

saucxs 2019-08-29 12:32 評論0 收藏0
思考 CSS 架構

摘要：思考一個好的架構一個好的架構是具有良好的可擴展性。定義手風琴的展開或收起，鏈接的有效或無效，元素的隱藏或顯示。的命名規范命名組件的方式是非常流行特別有幫助的規范。目前該領域最豐富的思想領袖之一。你有沒有在一個逐漸膨脹的 CSS 項目中感到混亂呢？保持樣式風格統一和 HTML 的影響是比較困難的：盡管修改一個較小的問題，都可能創建更多丑陋的 hack，也可能 CSS 的小改變會影響 J...

yvonne 2019-08-30 13:12 評論0 收藏0
動態數據的表格頁面展示

摘要：而由于沒有后端的數據支持，所有的數據都在表格中展示，所以需要將表格中的數據轉為數據，再通過讀取，然后用模板引擎渲染到頁面上。 showImg(https://segmentfault.com/img/bV3N8M?w=1574&h=692);如圖所示，是一個動態的表格，內容數量不定第一層分類是專業大類的分類，第二層分類的國家的分類，第三層分類是具體專業名的分類（就是不同的色塊欄），甚至...

joywek 2019-08-30 13:57 評論0 收藏0
動態數據的表格頁面展示

摘要：而由于沒有后端的數據支持，所有的數據都在表格中展示，所以需要將表格中的數據轉為數據，再通過讀取，然后用模板引擎渲染到頁面上。 showImg(https://segmentfault.com/img/bV3N8M?w=1574&h=692);如圖所示，是一個動態的表格，內容數量不定第一層分類是專業大類的分類，第二層分類的國家的分類，第三層分類是具體專業名的分類（就是不同的色塊欄），甚至...

selfimpr 2019-08-26 11:42 評論0 收藏0