Seonglae ChoBlock, Element, Modifier
BEM is a CSS naming methodology that uses
__ to separate blocks from elements and -- to separate modifiers. It's particularly useful when working with SASS, as it provides clear structure and reduces selector nesting.Basic Structure
In this example:
header is the Block, navigation is the Element, and navi-text is the Modifier.Block
A block is an independent, reusable component that can stand alone. Blocks can be nested within other blocks and maintain their independence regardless of context.
Element
An element is a constituent part of a block that cannot be used independently. Unlike blocks, elements are context-dependent and only have meaning within their parent block.
Element nesting: When elements are nested in the DOM, you don't need to reflect the full hierarchy in class names. Always reference the root block directly.
Correct approach:
Incorrect approach:
Modifier
A modifier defines the appearance, state, or behavior of a block or element. Modifiers allow you to create variations without duplicating code.
Advantages
- Perfect integration with SASS parent selector (&)
- Class names reveal markup structure at a glance
- Easy to locate elements in SASS files
- Prevents excessive selector nesting in SASS
Disadvantages
- Class names can become very long
![[CSS 방법론] BEM 방식](https://www.notion.so/image/https%3A%2F%2Fnykim.work%2Ffavicon.ico?table=block&id=18489e76-9920-4ae1-8258-2c20bf3c0357&cache=v2){kind=small}
![[CSS 방법론] BEM 방식](https://www.notion.so/image/https%3A%2F%2Fimg1.daumcdn.net%2Fthumb%2FR800x0%2F%3Fscode%3Dmtistory2%26fname%3Dhttps%253A%252F%252Ft1.daumcdn.net%252Fcfile%252Ftistory%252F9959B6425EC140520F?table=block&id=18489e76-9920-4ae1-8258-2c20bf3c0357&cache=v2)
![[CSS 방법론] BEM 방식](https://www.notion.so/image/https%3A%2F%2Fnykim.work%2Ffavicon.ico?table=block&id=d6ee14fc-d1fc-468b-b002-30c0948dce7a&cache=v2){kind=small}
![[CSS 방법론] BEM 방식](https://www.notion.so/image/https%3A%2F%2Fimg1.daumcdn.net%2Fthumb%2FR800x0%2F%3Fscode%3Dmtistory2%26fname%3Dhttps%253A%252F%252Ft1.daumcdn.net%252Fcfile%252Ftistory%252F9959B6425EC140520F?table=block&id=d6ee14fc-d1fc-468b-b002-30c0948dce7a&cache=v2)