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

資訊專欄INFORMATION COLUMN

css名方法-命名的模塊化

Flands / 1307人閱讀

摘要：基本思路是確保全局空間下一級(jí)域名不沖突，那么子域名就被限定在了獨(dú)立的局部作用域中，從而保證命名的唯一性。將命名對(duì)象劃分為組件和功能。過(guò)提高復(fù)用性，減少命名的需要，因?yàn)橛械臉邮街苯佑霉差惷湍軐?shí)現(xiàn)，不需要額外命名。

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

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

.nav-button { }

.nav-button--primary { }

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

.button { }

.button.is-disables { }
OOCSS 
抽象公共類，把復(fù)用度高的樣式抽取出來(lái)。
過(guò)提高復(fù)用性，減少命名的需要，因?yàn)橛械臉邮街苯佑霉差惷湍軐?shí)現(xiàn)，不需要額外命名。
.mt20 { margin-top: 20px }
.tc { text-align: center }
.abs { position: absolute }
.clearfix:after { content: ‘’; display: block; clear: both; height: 0 }

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

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

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

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

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

State：狀態(tài)樣式

Theme：UI樣式

針對(duì)不同分類，可以使用不同的前綴來(lái)劃分命名空間

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

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

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

Generic：簡(jiǎn)單的說(shuō)就是reset.css或normalize.css

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

Objects：使用OOCSS抽象公共類

Components：UI組件的樣式

Trumps：輔助性、功能性的特殊樣式，例如動(dòng)畫(huà)

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

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

相關(guān)文章

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

    摘要：基本思路是確保全局空間下一級(jí)域名不沖突，那么子域名就被限定在了獨(dú)立的局部作用域中，從而保證命名的唯一性。將命名對(duì)象劃分為組件和功能。過(guò)提高復(fù)用性，減少命名的需要，因?yàn)橛械臉邮街苯佑霉差惷湍軐?shí)現(xiàn)，不需要額外命名。 基本思路是確保全局空間下一級(jí)域名不沖突，那么子域名就被限定在了獨(dú)立的局部作用域中，從而保證命名的唯一性。 BEM Block-Element-Modifier SUIT C...

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

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

    摘要：基本思路是確保全局空間下一級(jí)域名不沖突，那么子域名就被限定在了獨(dú)立的局部作用域中，從而保證命名的唯一性。將命名對(duì)象劃分為組件和功能。過(guò)提高復(fù)用性，減少命名的需要，因?yàn)橛械臉邮街苯佑霉差惷湍軐?shí)現(xiàn)，不需要額外命名。 基本思路是確保全局空間下一級(jí)域名不沖突，那么子域名就被限定在了獨(dú)立的局部作用域中，從而保證命名的唯一性。 BEM Block-Element-Modifier SUIT C...

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

  • CSS Modules詳解及React中實(shí)踐

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

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

  • CSS命名規(guī)范

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

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

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

0條評(píng)論

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