成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS || 功能分類

xuhong / 2183人閱讀

摘要：組件的外觀可以通用，但是位置卻不能?？偨Y(jié)出現(xiàn)上述問題的愿意一個(gè)承擔(dān)的樣式太多。在使用等簡(jiǎn)寫屬性時(shí)，注意其中關(guān)于位置和布局的樣式等布局和位置由多帶帶的布局類或多帶帶容器元素構(gòu)成。降低現(xiàn)有類名沖突使用規(guī)則進(jìn)行命名。

CSS模塊化規(guī)則

CSS模塊的設(shè)計(jì)原則：

可重用

可維護(hù)

可擴(kuò)展

1 常見的問題 1.1 基于父組件直接修改樣式 
.widget {  
  background: yellow;  
  border: 1px solid black;  
  color: black;  
  width: 50%;  
}  
 
#sidebar .widget {  
  width: 200px;  
}  
 
body.homepage .widget {  
  background: white;  
}

應(yīng)用其余編程語(yǔ)言中類的概念，直接修改父組件的樣式相當(dāng)于修改類的定義，違反了開/閉原則：對(duì)擴(kuò)展開放；對(duì)修改閉合

1.2 使用復(fù)雜的選擇器 
#main-nav ul li ul li div { }  
#content article h1:first-child { }  
#sidebar > div > h3 + p { }

依靠選擇器與HTML元素標(biāo)簽組合，HTML代碼很干凈，但是CSS卻變得凌亂，并且增加了CSS與HTML結(jié)構(gòu)的耦合

1.3 一個(gè)CSS選擇器做的事情太多 
.widget {  
  position: absolute;  
  top: 20px;  
  left: 20px;  
  background-color: red;  
  font-size: 1.5em;  
  text-transform: uppercase;  
}

.widget選擇器同時(shí)設(shè)置了組件的位置、外觀。組件的外觀可以通用，但是位置卻不能。

1.4 總結(jié) 
出現(xiàn)上述問題的愿意：一個(gè)class承擔(dān)的樣式太多。

項(xiàng)目的整體復(fù)雜度是一定的，但各個(gè)模塊的復(fù)雜度不同。

使用復(fù)雜的選擇器、一個(gè)class承擔(dān)許多功能，可以簡(jiǎn)化開發(fā)的流程；但是維護(hù)與重用卻很麻煩

模塊劃分會(huì)增加CSS開發(fā)的復(fù)雜度，但是卻同時(shí)降低CSS維護(hù)與重用的麻煩

2 取舍

CSS中盡可能少的包含HTML結(jié)構(gòu)：少使用嵌套層次深的選擇器；

CSS只定義模塊外觀樣式，在HTML頁(yè)面上進(jìn)行調(diào)用：更少的CSS被更多的HTML結(jié)構(gòu)調(diào)用

對(duì)于抽象的樣式可以定義在容器中

3 推薦 3.1 專注 
使用類選擇器定義元素樣式，將class應(yīng)用在元素上即可；不要寫嵌套深的CSS選擇器
/* Grenade */ 
#main-nav ul li ul { }  
 
/* Sniper Rifle */ 
.subnav { }
3.2 模塊化 
一個(gè)組織結(jié)構(gòu)良好的組件層可以解決HTML與CSS的耦合關(guān)系。CSS定義組件的外觀，不定義位置和布局。在使用background、font等簡(jiǎn)寫屬性時(shí)，注意其中關(guān)于位置和布局的樣式（background-position等）


布局和位置由多帶帶的布局類或多帶帶容器元素構(gòu)成。
3.3 命名空間與修飾符 
對(duì)組件每個(gè)子元素都使用命名空間，每個(gè)元素在不同語(yǔ)境使用修飾符擴(kuò)展。降低現(xiàn)有類名沖突


使用BEM（Block__Element--Modifier）規(guī)則進(jìn)行命名。


.btn
.btn__item
.btn__item--info
.btn__item--danger
3.4 將CSS組織成邏輯結(jié)構(gòu) 
在《SMACSS》中提到，CSS可以被分成4中不同的類：基礎(chǔ)base、布局layout、模塊modules和狀態(tài)state

基礎(chǔ)base：包括復(fù)位原則和元素的初始值；

布局layout：對(duì)整個(gè)站點(diǎn)內(nèi)元素進(jìn)行定位（類似網(wǎng)格系統(tǒng)）

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

狀態(tài)state：不同狀態(tài)觸發(fā)的樣式（通過JavaScript實(shí)現(xiàn)開啟和關(guān)閉）

3.5 根據(jù)樣式與風(fēng)格使用類名 
在Web前端中，class類名的作用有四種：HTML樣式、JavaScript的hook、功能檢測(cè)和自動(dòng)化測(cè)試

為區(qū)別不同功能的class，建議為其增加前綴：js-用于JavaScript操作

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111756.html

相關(guān)文章

  • css 命名 分類排序方法

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

    saucxs 評(píng)論0 收藏0

  • 思考 CSS 架構(gòu)

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

    yvonne 評(píng)論0 收藏0

  • 動(dòng)態(tài)數(shù)據(jù)的表格頁(yè)面展示

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

    joywek 評(píng)論0 收藏0

  • 動(dòng)態(tài)數(shù)據(jù)的表格頁(yè)面展示

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

    selfimpr 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<