BEM


Posted by TempuraEngineer on 2022-05-08

BEM是甚麼

BEM(Block Element Modifier)是Class name的設計模式,優點是看class就能知道依賴關係

B & E & 各是甚麼

BEM-view
▲take credit fromWhat is BEM?

BEM-css
take credit from Boost Your CSS with BEM Naming and SASS Nesting

  1. Block(區塊)

    • component

      A logically and functionally independent page component, the equivalent of a component in Web Components. A block encapsulates behavior (JavaScript), templates, styles(CSS)

    • 巢狀,block裡面可以包block或element
    • 複用性
  2. Element(元素)

    • block的child node

      A constituent part of a block that can't be used outside of it.

    • block名 + __ + element名 (ex:menu__item)
  3. Modifier(修飾符)

    • 類似SMACSS的state概念。描述行為或外觀的詞
    • block名 (+ __element名) + --形容詞 (ex:menu__item--active)


📖

Sass教學 (33) - BEM 設計模式
What is BEM?
Boost Your CSS with BEM Naming and SASS Nesting
BEM official site - FAQ


#BEM







Related Posts

MTR04_1208

MTR04_1208

Python基礎入門 | 時間類型轉換 (Times type convert)

Python基礎入門 | 時間類型轉換 (Times type convert)

[ CSS 04 ] 圖片設定相關

[ CSS 04 ] 圖片設定相關


Comments