BEM Methodology

BEM Methodology

Created

Created

2021 Apr 21 3:18

Editor

Editor

Seonglae Cho

Creator

Creator

Seonglae Cho

Edited

Edited

2025 Nov 11 15:43

Refs

Refs

Block, 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 방식

오늘은 CSS 방법론 을 다뤄보겠습니다 ;-) 말이 거창하긴 한데 쉽게 풀어쓰면 'CSS 클래스네임을 어떻게 지으면 좋을지' 고민해보는 거죠. 방법론에는 여러 가지가 있는데, 최근 BEM을 실무에 도입하면서 매력을 느끼고 있어요! 그래서 이번 포스트는 BEM에 대한 내용입니다. 한 번 읽어 보시면 도움이 되리라 생각합니다. (*이 포스트의 틀린 부분이나 고칠 점이 있다면 알려주세요!

https://nykim.work/15

[CSS 방법론] BEM 방식

[CSS 방법론] BEM 방식

오늘은 CSS 방법론 을 다뤄보겠습니다 ;-) 말이 거창하긴 한데 쉽게 풀어쓰면 'CSS 클래스네임을 어떻게 지으면 좋을지' 고민해보는 거죠. 방법론에는 여러 가지가 있는데, 최근 BEM을 실무에 도입하면서 매력을 느끼고 있어요! 그래서 이번 포스트는 BEM에 대한 내용입니다. 한 번 읽어 보시면 도움이 되리라 생각합니다. (*이 포스트의 틀린 부분이나 고칠 점이 있다면 알려주세요!

https://nykim.work/15

[CSS 방법론] BEM 방식

Backlinks

Utility First CSS Framework

Recommendations

/////////