Atitit.css 規範 bem 項目中 CSS 的組織和管理

時間 2020-05-29

標籤 atitit.css atitit css 規範 bem 項目組織管理欄目 CSS 简体版

原文原文鏈接

Atitit.css 規範 bem 項目中 CSS 的組織和管理css

1. 什麼是BEM？1html

1.1. 塊（Block）2前端

1.2. 元素（Element）2編程

1.3. BEM樹（和DOM樹相似）。3瀏覽器

1.4. 修飾符（modifier）的3編程語言

2. 塊的獨立性4ide

3. 獨立的CSS4模塊化

3.1. 爲獨立的CSS類命名5工具

4. BEM爭議最大的就是它的命名風格 6post

5. OOCSS6

6. ACSS6

7. CSS 組織和管理結論attilax總結7

8. Atibem7

8.1. Modifier 不用bem方式，太繁瑣。使用咱們經常寫的 .current .active 等表達狀態7

8.2. Block的命名很是好。7

8.3. Element的命名8

9. 是否使用 SASS 或 LESS 這種 CSS 預處理語言來編寫？？？8

10. 參考8

1. 什麼是BEM？

BEM表明塊（Block），元素（Element）。修飾符（Modifier）。這些術語的含意將在本文進一步闡述。

編程方法論中一個最多見的樣例就是面向對象編程（OOP）。這一編程範例出現在不少語言中。在某種程度上，BEM和OOP是類似的。它是一種用代碼和一系列模式來描寫敘述現實狀況的方法。它僅僅考慮程序實體而無所謂使用什麼編程語言。

Yandex是一個大公司（在俄羅斯）。它使用BEM方法論來開發它的服務。

BEM 是一種前端項目開發的方法學，由 Yandex 公司提出。

BEM 的名稱來源於該方法學的三個組成部分的英文首字母，各自是塊（Block）、元素（Element）和修飾符（Modifier）。這三個不一樣的組成部分稱爲 BEM 實體。

做者:: ★(attilax)>>> 外號:老哇的爪子（全名：：Attilax Akbar Al Rapanui 阿提拉克斯阿克巴阿爾拉帕努伊）漢字名：艾龍。 EMAIL:1466519819@qq.com

轉載請註明來源： http://blog.csdn.net/attilax

1.1. 塊（Block）

一個塊是一個獨立的實體，就像應用的一塊「積木」。一個塊既可以是簡單的也可以是複合的（包括其它塊）。

塊

塊便是一般所說的 Web 應用開發中的組件或模塊。

每個塊在邏輯上和功能上都是相互獨立的。塊中封裝了組件相關的 JavaScript、CSS 代碼和 HTML 模板。由於塊是獨立的。可以在應用開發中進行復用，從而減小代碼反覆並提升開發效率。塊可以放置在頁面上的不論什麼位置，也可以互相嵌套。

同一個塊可以在頁面上存在多個實例。塊的不一樣實例具備類似的結構。

一個典型的塊的演示樣例是菜單。

一個項目中可以有多個不一樣的菜單。詳細類似的結構和樣式。

元素

元素是塊中的組成部分。

元素不能離開塊來使用。BEM 不推薦在元素中嵌套其它元素。

在菜單塊中，每個菜單項是塊中的元素。

1.2. 元素（Element）

一個元素是塊的一部分，具備某種功能。

元素是依賴上下文的：它們僅僅有處於他們應該屬於的塊的上下文中時纔是有意義的。

好比一個輸入域和一個button是Search塊的中的元素。

一個Block下的所有Element無論相互層級怎樣,都要攤開扁平的屬於Block
因此 BEM 最多僅僅有 B+E+M 三級,不可能出現 B+E+E+..+E+M 超長class名,也要求E不能同名

1.3. BEM樹（和DOM樹相似）。

經過把模板轉換（使用XSL或是JavaScript）應用到BEM樹上生成終於的瀏覽器標籤。

1.4. 修飾符（modifier）的

爲了不開發一個和現有的塊僅僅略微有點不一樣的還有一個塊，咱們引入修飾符（modifier）的概念。

修飾符做爲一個塊或是一個元素的一種屬性，表明這個塊或這個元素在外觀或是行爲上的改變。

一個修飾符有一個名字和一個值。多個修飾符可以同一時候使用。

2. 塊的獨立性

隨着一個項目的發展，咱們常常會在頁面中加入。刪除，或者是移動一些塊。好比，你可能想要互換Logo和Auth塊，或者把Menu放到Search塊如下。

爲了讓這個過程更加簡化，塊必須是獨立的。

一個獨立的塊可以放置在頁面的任何位置，包含嵌套在其它塊裏。

3. 獨立的CSS

從CSS的角度來看：

BEM是不一樣意用標籤選擇器的,一開始難以接受... .menu li 能搞定的事情需要每個 li 都寫.menu-item

· 一個塊（或者一個元素）必須有一個惟一的「名字」（一個CSS類）這樣才幹被CSS規則所做用。

· 必定不能使用ID選擇器:僅僅有類選擇器才幹知足咱們非惟一性的需求

· HTML元素不能用做CSS選擇器（如.menu td）因爲這種選擇器並非是全然上下文無關的。

· 避免使用級聯（cascading）選擇器（譯註：如.menu .item）。

3.1. 爲獨立的CSS類命名

如下是一種可能的CSS類命名方案：

一個塊的CSS類名就是這個塊的名字（block name）。

...</ul>

一個元素的CSS類名是一個塊名和一個元素名的組合，它們中間用一些符號隔開。

在一個元素的CSS類名中包括一個塊名是必要的，這樣可以讓級聯最小化。

咱們在長名稱中使用連字符分隔單詞（好比，block-name）。使用兩個下劃線來分隔塊名和元素名（block-name__element-name）。

· 可以準確地檢測到具備一樣行爲的塊，因爲它們有一樣的CSS類名:使用CSS類選擇器，可以揀選出所有一樣名字的塊。方便給它們定義動態行爲

· BEM 實體名稱全部是小寫字母或數字。

名稱中的不一樣單詞用單個連字符（-）分隔。

· BEM 元素名稱和塊名稱之間經過兩個下劃線（__）分隔。

· 布爾修飾符和其所修飾的實體名稱之間經過兩個連字符（--）來分隔。

不使用名值對修飾符。

4. BEM爭議最大的就是它的命名風格

block + element + modifier，鼓舞一級一級的寫的很是詳細，很是長。

很是違背習慣 CSS嵌套過多。超過3層就很是難閱讀了

5. OOCSS

OOCSS 表示的是面向對象 CSS（Object Oriented CSS），是一種把面向對象方法學應用到 CSS 代碼組織和管理中的實踐。面向對象方法學中的很是多理念，如模塊化、單一功能原則（Single responsibility principle）和關注點分離（Separation of concerns）等，對於需要組織和管理大量 CSS 代碼的應用也是適用的。OOCSS 提出了 CSS 對象的概念，用來表示反覆出現的可視化模式。這些模式可以被抽象成獨立的 HTML、CSS 和 JavaScript 代碼片斷，並在整個項目中共享。

OOCSS 有兩個重要的原則：

第一個原則是把結構和外觀分開。反覆出現的可視化模式應該僅僅關注外觀。而與 DOM 結構無關。

這就要求 CSS 對象中的每個組成部分都有名稱。並在 DOM 結構中經過 CSS 類名與之相應。所以在 OOCSS 中的樣式規則都是使用類別選擇器。而不依賴特定的 DOM 結構。這樣可以提升 CSS 對象的可複用性。

第二個原則是把容器和內容分開。

這就要求在 CSS 樣式中不該該出現與 DOM 樹中的位置相關的規則。

CSS 樣式應該僅僅關注內容，而不是 DOM 元素及其層次關係。

6. ACSS

ACSS 表示的是原子化 CSS（Atomic CSS），是 Yahoo 提出來的一種獨特的 CSS 代碼組織方式。應用在 Yahoo 首頁和其它產品中。ACSS 的獨特性在於它的理念與通常開發者的理解有很是大的不一樣。並挑戰了傳統意義上編寫 CSS 的最佳實踐，也就是關注點分離原則。

ACSS 以爲關注點分離原則會致使冗餘、繁瑣和難以維護的 CSS 代碼。

ACSS 的原則是把 CSS 樣式打散成儘量小的部分。每個 CSS 類僅僅相應一條樣式規則。從而達到最大化的可複用性。比方 CSS 類 M(10px)所相應的樣式規則是 margin: 10px。在應用 CSS 樣式時。僅僅需要在把所需要的原子化 CSS 類名加入到 DOM 元素上就能夠。

ACSS 提供了 Atomizer 工具來生成終於的 CSS 樣式文件。

ACSS 的優勢在於所生成的 CSS 文件僅僅包括必須的內容，而且冗餘很是少，可以下降 CSS 文件的尺寸。提升性能。

另外 CSS 類所相應的樣式規則是不變的，這使得在不一樣的項目和組件之間共享 CSS 變得很是easy。比方在使用傳統的方式時。相同是名稱爲 header 的 CSS 類，其所實際表示的樣式規則在不一樣的項目中可能全然不一樣。而在 ACSS 裏面。名稱爲 M(10px)的 CSS 類所表示的樣式規則永遠都是 margin: 10px。ACSS 可能的缺點在於它與大多數開發者所理解的最佳實踐差別很是大，可能不easy被接受。