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

【JS幼幼班】Step.04 基本語法:變數

【JS幼幼班】Step.04 基本語法:變數

各種開源協議

各種開源協議

[Java 筆記] Array 陣列

[Java 筆記] Array 陣列


Comments