css名方法-命名的模塊化

vincent_xyb 發布于2019-08-02 15:59 / 2836人閱讀

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

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

BEM

Block-Element-Modifier

SUIT CSS

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

.nav-button { }

.nav-button--primary { }

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

.button { }

.button.is-disables { }

OOCSS

抽象公共類，把復用度高的樣式抽取出來。
過提高復用性，減少命名的需要，因為有的樣式直接用公共類名就能實現，不需要額外命名。

.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

針對數量龐大的類名

Base：基礎的樣式規則

Layout：用于布局的樣式規則

Module：可復用的模塊樣式規則

State：狀態樣式

Theme：UI樣式

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

ITCSS

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

Settings：簡單的說就是在SCSS中預設好變量

Tools：簡單的說就是在SCSS中預設好mixins和functions

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

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

Objects：使用OOCSS抽象公共類

Components：UI組件的樣式

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

GPU云服務器云服務器模塊名命名空間目錄名 idc數據中心用到的光模塊公司前10名 js命名多個變量名 hadoop主機名一般命名方式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54478.html

css名方法-命名的模塊化

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

Flands 2019-08-29 13:58 評論0 收藏0
css名方法-命名的模塊化

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

sixleaves 2019-08-21 17:57 評論0 收藏0
CSS Modules詳解及React中實踐

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

wemall 2019-08-30 15:45 評論0 收藏0
CSS命名規范

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

includecmath 2019-08-30 13:17 評論0 收藏0