溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關怎么在CSS中利用methodologies實現模塊化，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
一、什么是 CSS methodologies
CSS methodologies，可以理解成 設計模式，也可以理解成 css 規范，市面使用情況如下圖：
二、常見的 CSS methodologies
1、OOCSS
面向對象的 CSS（Object-Oriented CSS，簡稱 OOCSS ），由 Nicole Sullivan 于 2008 年提出，這基于她在雅虎的工作。
（1）規則
1、不要使用 ID 用 Class
直接使用class來設定樣式，這樣寫不只是可以增加語義，同時也降低css對html的依賴。
2、結構和樣式分離
雖然早期 html 和 css 實現了結構和樣式的分離，但 css 內部同樣存在兩種類型的樣式：
結構樣式（例如長寬、距離）
皮膚樣式（例如顏色、陰影）
所以 OOCSS 建議把這兩種樣式拆開。
比如有三種按鈕，白色的/綠色的/紅色的，可分別定義為：
class="btn btn-default" class="btn btn-green" class="btn btn-red"
如果你真的有很多個具有紫色按鈕，則可以創建一個單獨的紫色按鈕類。這樣可以大大減少CSS代碼的數量。
3、容器和內容分離
內容絕不應該限制于特定的容器，為了重用，得分離開。
# 錯誤寫法
.header .action {
}
.header .action .login {
}
.header .action .register {
}
# 正確寫法
.header{
}
.action{
}
.login {
}
.register {
}繼承選擇符是有用的，它可以減少因相同命名引發的樣式沖突（常發生于多人協作開發）。但是，我們不應過度使用。
（2）利弊
好處：
模塊化，可重用
減少代碼重復
提高可拓展性、可維護性、可讀性
缺點：
雖減少了深層的嵌套選擇器，但是多了更多的類
如果代碼中沒有大量重復的視覺模式，比如一些小項目，則應用OOCSS可能不切實際
（3）實例
Bootstrap 就是用的 OOCSS。
例如：
html
<div class='header'> <ul class='menu'> <li class='menu-item active'>1</li> <li class='menu-item'>2</li> <li class='menu-item'>3</li> </ul> <div class="action"> <button class="btn btn-login">login</button> <button class="btn btn-register">register</button> </div> </div>
css：
.header {
}
.menu {
}
.menu-item {
}
.item.active {
}
.action {
}
.btn {
}
.btn-login {
}
.btn-register{
}2、BEM
BEM - Block Element Modfier（塊元素編輯器）。誕生于2009年。
（1）內容
BEM 包括三個：
Block - 塊，如 header
Element - 子元素，如 塊menu 下的 item
Modfier - 狀態，如.current、.active
（2）規則
1、命名規范
-中劃線 ：僅作為連字符使用，表示某個塊或者某個子元素的多單詞之間的連接記號。
__ 雙下劃線：用來連接塊和塊的子元素。
-- 雙中劃線：用來描述一個塊或者塊的子元素的一種狀態。
在某些公司（如騰訊）的規范里，雙中劃線被單下劃線（_）替代。
例如：.block-name__element--modifier
demo - html：
<div class='header'> <ul class='header__menu'> <li class='header__menu-item--active'>1</li> <li class='header__menu-item'>2</li> <li class='header__menu-item'>3</li> </ul> <div class="header__action"> <button class="header__btn--login">login</button> <button class="header__btn--register">register</button> </div> </div>
demo - less:
.header {
&__menu {}
&__menu-item {}
&__action {}
&__btn {
&--login {}
&--register {}
}
}2、避免嵌套
BEM 最多只有 B+E+M 三級。
所以請避免 .block__el1__el2 的格式，直接改為 .block_el2。
這里的 block 就很像命名空間了。
（3）利弊
好處：
層級關系一目了然，具有可讀性
不需要依靠層級選擇器來限定約束作用域，可避免跨組件的樣式污染。
缺點：
命名方式長而難看，書寫不便（可以通過 less/sass 來簡化書寫）
在較小的組件中，BEM 格式可能顯得雞肋。但對于公共的、全局性的模塊樣式定義，還是推薦使用 BEM 格式。（尤其對外發布的公共組件）
其他：
BEM 命名會使得 Class 類名變長，但經過 gzip 壓縮后這個帶寬開銷可以忽略不計。
BEM是不允許用標簽選擇器的，哪怕最簡單的 li 也得寫成 .menu-item。
（4）實踐
餓了么的框架elementUI就是BEM的一種，或者你也可以研究網站company.yandex.ru/。
3、SMACSS
SMACSS（Scalable & Modular Architecture CSS ，即 CSS 的可擴展性和模塊化架構）。Jonathan Snook 于 2011 年提出，當時他在雅虎工作，為 Yahoo Mail 編寫 CSS。
（1）規則
1、Categorizing CSS Rules（CSS 分類規則）
它將 CSS 分為5個不同的類別：
Base 基本規范
例如 CSS Reset 和 CSS Normalize。
Layout 布局規范
例如左右分欄、柵格系統。
Module 模塊
例如一個產品列表，一個導航條。可重用。
State 狀態規范
例如選中狀態。
Theme 樣式規范
2、Naming Rules（命名規則）
為類名添加前綴：
Base 不需要前綴。而且是用標簽而不是 class 和 ID。
l- 用作 Layout 的前綴：l-inline
m- 用作 Module 的前綴：m-callout。但也可以不用前綴。
is- 用作 State 的前綴：is-collapsed
Theme 一般會新建個 theme.css，用之前存在的類名。如果想用單獨的類名，可用 theme- 前綴。
例子：
<div class="l-box m-profile m-profile--is-pro-user"> <img class="m-avatar m-profile__image" /> <p class="m-profile__bio">...</p> </div>
（2）實例
在線 demo：https://codepen.io/savemuse/pen/gWVpvd
4、 Atomic CSS
Atomic CSS 也是雅虎提出的，可以從字面意思理解成原子 CSS。
（1）示例
<div className="P(10px) M(20%) Pos(f) Start(50%) Bgc(#fff)" />
會有專門的 Atomic css 工具，幫助將上面 html 中的 class name 解析成正常的 css。（略）
（2）利弊
好處：將 CSS style 最小元件化，重用性最大化。
壞處：這根本就是在寫 inline-style，只是我們用 class name 的方式來表示而已。
（3）總結
這種做法真的很激進。我暫時無法接受。
三、總結
拋開激進的Atomic，我對剩下的 OOCSS / BEM / SMACSS 有如下建議：
他們各自的思想有互補也有沖突，在實際開發中可以有取舍的使用
他們都可以結合 CSS 預處理器（如 less/sass ）獲得更好的效率
把上文分別介紹他們的好處列舉在一起對比匯總，發現他們解決的核心問題就是：模塊化
上述就是小編為大家分享的怎么在CSS中利用methodologies實現模塊化了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
