国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS || 功能分類

xuhong / 2180人閱讀

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

CSS模塊化規(guī)則

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

可重用

可維護(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)用其余編程語言中類的概念，直接修改父組件的樣式相當(dāng)于修改類的定義，違反了開/閉原則：對擴(kuò)展開放；對修改閉合

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 一個CSS選擇器做的事情太多 
.widget {  
  position: absolute;  
  top: 20px;  
  left: 20px;  
  background-color: red;  
  font-size: 1.5em;  
  text-transform: uppercase;  
}

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

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

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

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

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

2 取舍

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

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

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

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


布局和位置由多帶帶的布局類或多帶帶容器元素構(gòu)成。
3.3 命名空間與修飾符 
對組件每個子元素都使用命名空間，每個元素在不同語境使用修飾符擴(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：對整個站點內(nèi)元素進(jìn)行定位（類似網(wǎng)格系統(tǒng)）

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111756.html

相關(guān)文章

  • css 命名 分類排序方法

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

    saucxs 評論0 收藏0

  • 思考 CSS 架構(gòu)

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

    yvonne 評論0 收藏0

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

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

    joywek 評論0 收藏0

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

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

    selfimpr 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<