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

資訊專欄INFORMATION COLUMN

css名方法-命名的模塊化

sixleaves / 2980人閱讀

摘要：基本思路是確保全局空間下一級域名不沖突，那么子域名就被限定在了獨立的局部作用域中，從而保證命名的唯一性。將命名對象劃分為組件和功能。過提高復(fù)用性，減少命名的需要，因為有的樣式直接用公共類名就能實現(xiàn)，不需要額外命名。

基本思路是確保全局空間下一級域名不沖突，那么子域名就被限定在了獨立的局部作用域中，從而保證命名的唯一性。
BEM 
Block-Element-Modifier
SUIT CSS

1、將命名對象劃分為組件（component）和功能（Utility）。組件直接命名，功能額外加前綴，比如專門給js調(diào)用的類名可加上js前綴：js-button
2、規(guī)定了連字符的用法。普通隔斷用單個連字符，描述性詞匯用兩個連字符：

.nav-button { }

.nav-button--primary { }

3、狀態(tài)切換用is-state型的相鄰類名（adjoining class）

.button { }

.button.is-disables { }
OOCSS 
抽象公共類，把復(fù)用度高的樣式抽取出來。
過提高復(fù)用性，減少命名的需要，因為有的樣式直接用公共類名就能實現(xiàn)，不需要額外命名。
.mt20 { margin-top: 20px }
.tc { text-align: center }
.abs { position: absolute }
.clearfix:after { content: ‘’; display: block; clear: both; height: 0 }

缺點是濫用就可能付出代價，比如有10個組件用同一個普通類名，那么修改樣式只需要改一處CSS即可，但是在10個組件上用同一個公共類名比如mt20，意味著把mt20改成mt15，你需要改10處的class。

SMACSS 
針對數(shù)量龐大的類名

Base：基礎(chǔ)的樣式規(guī)則

Layout：用于布局的樣式規(guī)則

Module：可復(fù)用的模塊樣式規(guī)則

State：狀態(tài)樣式

Theme：UI樣式

針對不同分類，可以使用不同的前綴來劃分命名空間

ITCSS 
更像是 CSS 整體架構(gòu)方案，與 SMACSS 橫向分類不同，它綜合了以上各種方法，提出了一個縱向分層模型。(bootstrap使用)

Settings：簡單的說就是在SCSS中預(yù)設(shè)好變量

Tools：簡單的說就是在SCSS中預(yù)設(shè)好mixins和functions

Generic：簡單的說就是reset.css或normalize.css

Elements：對元素的基本格式化，如h1 { font-size: 20px }

Objects：使用OOCSS抽象公共類

Components：UI組件的樣式

Trumps：輔助性、功能性的特殊樣式，例如動畫

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

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

相關(guān)文章

  • css名方法-命名的模塊化

    摘要：基本思路是確保全局空間下一級域名不沖突，那么子域名就被限定在了獨立的局部作用域中，從而保證命名的唯一性。將命名對象劃分為組件和功能。過提高復(fù)用性，減少命名的需要，因為有的樣式直接用公共類名就能實現(xiàn)，不需要額外命名。 基本思路是確保全局空間下一級域名不沖突，那么子域名就被限定在了獨立的局部作用域中，從而保證命名的唯一性。 BEM Block-Element-Modifier SUIT C...

    vincent_xyb 評論0 收藏0

  • css名方法-命名的模塊化

    摘要：基本思路是確保全局空間下一級域名不沖突，那么子域名就被限定在了獨立的局部作用域中，從而保證命名的唯一性。將命名對象劃分為組件和功能。過提高復(fù)用性，減少命名的需要，因為有的樣式直接用公共類名就能實現(xiàn)，不需要額外命名。 基本思路是確保全局空間下一級域名不沖突，那么子域名就被限定在了獨立的局部作用域中，從而保證命名的唯一性。 BEM Block-Element-Modifier SUIT C...

    Flands 評論0 收藏0

  • CSS Modules詳解及React中實踐

    摘要：上例中打印的結(jié)果是對中的名都做了處理，使用對象來保存原和混淆后的對應(yīng)關(guān)系。結(jié)合實踐在處直接使用中名即可。如因為只會轉(zhuǎn)變類選擇器，所以這里的屬性選擇器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端領(lǐng)域中進(jìn)化最慢的一塊。由于 ES2015/201...

    wemall 評論0 收藏0

  • CSS命名規(guī)范

    摘要：本篇介紹幾種命名規(guī)范。使用的網(wǎng)站四其他命名規(guī)范等減少對結(jié)構(gòu)的依賴增加重復(fù)性的使用幾種命名規(guī)范比較與在命名上相反的點可以放心使用，以為都是在模塊內(nèi)但不推薦當(dāng)前我們的網(wǎng)站略有思想更概括，中的，相當(dāng)于的，相當(dāng)于的，相當(dāng)于的中文 本篇介紹幾種CSS命名規(guī)范。 （規(guī)范詳細(xì)請參考底部References) 一、NEC (nice easy css) 網(wǎng)易前端CSS開源項目 1.1 樣式分類 重...

    includecmath 評論0 收藏0

發(fā)表評論

0條評論

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