개인프로젝트를 하면서 페이지를 만들다 보니 요소들의 이름을 너무 규칙성 없게 짓는 것 같아서 프론트쪽에서 일하셨던 동료분에게 물어보니 회사마다 쓰는 규칙으로 하셨다고 하는데 난 그런게 아니니까 네이밍 규칙이 있는지 검색해보다가 BEM 방법론이 있길래 정리해본다.
● BEM
"Block, Element, Modifier"의 약자로, CSS를 구조화하고 유지보수하기 쉽게 만들기 위한 방법론이다. BEM은 웹 개발에서 CSS 클래스의 네이밍 규칙을 일관성 있게 정의하여 코드의 가독성을 높이고 스타일 시트를 보다 예측 가능하게 만들려는 목적을 가지고 있다.
ㆍ블록 (Block)
블록은 페이지나 앱의 독립적인 구성 요소를 나타낸다. 클래스명은 단일 단어로 표기하며, 중첩되거나 연결된 단어는 하이픈(-)을 사용한다.
ㆍ엘리먼트 (Element)
블록 내의 부분적인 구성 요소를 나타낸다. 블록 이름과 뒤에 두 개의 밑줄(__)을 사용하여 정의한다.
ㆍ 모디파이어 (Modifier)
블록이나 엘리먼트의 상태나 모양을 나타낸다. 블록이나 엘리먼트 이름과 뒤에 두 개의 하이픈(--)을 사용하여 정의한다.
간단히 정리하면 다음과 같다.
ㆍ두 개의 언더바(__)는 하위 요소를 의미
ㆍ단어가 이어지는 경우 하이픈(-)으로 연결
ㆍ두 개의 하이픈(--)은 상태 변형을 의미 → 속성의 기능이나 목적에 의미를 두고 작성 (가시성X)
ex. active, required, highlight, focus 등
<!DOCTYPE html>
<head>
<title>BEM</title>
</head>
<body>
<div class="header">
<div class="logo"></div>
<ul class="nav">
<li class="nav__item"><a href="#" class="nav__link">Home</a></li>
<li class="nav__item nav__item--active"><a href="#" class="nav__link nav__link--highlight">About</a></li>
<li class="nav__item"><a href="#" class="nav__link">Contact</a></li>
</ul>
</div>
</body>
</html>
위 코드에서 BEM은 다음과 같다.
ㆍBlock
.header
.logo
.nav
ㆍElement
.nav__item
.nav__link
ㆍModifier
.nav__item--active
.nav__link--highlight
'99. etc (분류 애매, 작성중)' 카테고리의 다른 글
| [MyBatis]CDATA (0) | 2023.12.12 |
|---|---|
| [CSS]flex (0) | 2023.12.04 |
| 01. 자료구조 (0) | 2023.11.25 |
| NaN (Not A Number) (0) | 2023.11.23 |
| 이진법 (binary) (0) | 2023.11.23 |
