好程序員web前端學(xué)習(xí)路線分享css模塊化方案

好程序員web前端學(xué)習(xí)路線分享css模塊化方案，這篇文章主要介紹了css模塊化方案，css的模塊化方案可能和js的一樣多，下面簡單介紹幾種主要的模塊方案，非常具有實用價值，需要的小伙伴可以參考下。

創(chuàng)新互聯(lián)公司致力于成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計,成都網(wǎng)站設(shè)計,集團網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場競爭中脫穎而出。 選擇創(chuàng)新互聯(lián)公司，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！

css的模塊化方案可能和js的一樣多，下面簡單介紹幾種主要的模塊方案。
oocss
面對對象的規(guī)則，主要的原則是兩種：分離結(jié)構(gòu)和外觀，分離容器和內(nèi)容。
名詞解釋
1、分離結(jié)構(gòu)和外觀：增加可重復(fù)的設(shè)計單元，同時去推進產(chǎn)品和ui對這方面的思考，比如下面的css使用時對象模式的命名和模塊化規(guī)則。
2、分離容器和內(nèi)容：指的是樣式的使用不以元素位置唯一匹配，在任何位置你都可以使用這個樣式，如果你不適用這個樣式，會保持默認的樣式。
實例
// dom結(jié)構(gòu)
<div class="toogle simple">
??<div class="toogle-control open">
????<div class="toogle-tittle">標(biāo)題</div>
??</div>
??<div class="toogle-details "></div>
</div>

// 模塊的標(biāo)記 唯一標(biāo)識
.toggle{
}
// 皮膚樣式的寫法，如果基本結(jié)構(gòu)是一樣的，你可以用complex的一個輔助樣式
.toggle.simple{
}
// 是否做嵌套寫法 相信很多預(yù)處理器的部分會支持嵌套 然后很多人會這樣寫,不被推薦的
.toogle{
?.toogle-control{
?}
?.toogle-details{
?}
}
// 其實你會這樣組織么 不是很建議 這樣會降低查詢效率 如果能確認唯一性的時候 其實直接寫子即可
.toogle{}
.toogle-control{}
.toogle-details{}
smacss
sma和oocss有很多類似之處，但區(qū)分的地方有很多，主要是對樣式的分類。分別是：基礎(chǔ)、布局、模塊、狀態(tài)、主題
基礎(chǔ)
可以適用于任何位置，我也稱全局樣式
布局
主要是用來實現(xiàn)不同的特色布局，提高布局的復(fù)用率，
模塊
設(shè)計中的模塊化，可重復(fù)使用的一個單元，一般是dom+css的耦合綁定。
狀態(tài)
描述在特定狀態(tài)下的布局或者模塊的特殊化表現(xiàn)，在dom結(jié)構(gòu)不變的情況下，可以通過css的皮膚化實現(xiàn)樣式的改版。
主題
與狀態(tài)相比更加定制的是，我們會針對有些特殊的模塊，進行主題的設(shè)置，包括一系列的顏色、尺寸、交互等進行重度設(shè)計，參數(shù)化設(shè)計。
案例
// dom結(jié)構(gòu)
<div class="toogle toogle-simple">
??<div class="toogle-control is-active">
????<div class="toogle-tittle">標(biāo)題</div>
??</div>
??<div class="toogle-details "></div>
</div>
與oocss相比，其實大部分設(shè)計思路是一樣的，以一個類作為css的作用域（作用域就是兩個限制，1 不符合場景時限制禁止使用 2 符合場景時要正確的使用），另外的區(qū)別就是針對皮膚和狀態(tài)的不同書寫規(guī)則。
bem
bem就是塊、元素、修飾符的思維去寫樣式。它不涉及具體的css結(jié)構(gòu)，只是建議你如何命名css.
案例
// dom結(jié)構(gòu)
<div class="toogle toogle--simple">
??<div class="toogle_control toogle_control--active">
????<div class="toogle_tittle">標(biāo)題</div>
??</div>
??<div class="toogle_details "></div>
</div>
解釋
1、塊級：所屬組件的名稱
2、元素：元素在組件里的名稱
3、修飾符：任何與元素修飾相關(guān)的類
這種命名方式的缺點，樣式名會很長，但實際上在smacss以及oocss中都會一定程度的使用，命名很語義化，在不清楚模塊時，我們可以根據(jù)樣式名得出對應(yīng)的結(jié)構(gòu)可能是如何的。
選擇合適的方案
無論哪種方案，關(guān)鍵是哪種是最合適團隊的，我們目前的方式是：bem和smacss集合的方式。

網(wǎng)頁標(biāo)題：好程序員web前端學(xué)習(xí)路線分享css模塊化方案
網(wǎng)站路徑：http://muchs.cn/article6/pphoog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站排名、外貿(mào)建站、全網(wǎng)營銷推廣、軟件開發(fā)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)