BEM(Block Element Modifier)

<div class="l-lip c-lip">

<div class="l-lip__hollow c-lip__hollow"></div>

<div class="l-lip__fill c-lip__fill"></div>

</div>

 

이런 코드가 있으면, 수천 줄이 넘는 웹사이트의 디자인 코드를 꼬이지 않게 관리하기 위해 전 세계 개발자들이 약속한 '이름 짓기 규칙

1. 이름의 앞글자 (l-와 c-)의 의미

이 프로젝트는 **Prefix(접두사)**를 사용해서 이 클래스가 어떤 역할을 하는지 미리 알려주고 있습니다.

• l- (Layout): 전체적인 구조나 배치를 담당합니다. (예: 머리말의 위치, 여백 등)
  • l-header: 헤더의 레이아웃 틀
  • l-lip: 특정 디자인 요소(입술 모양 등)의 전체적인 위치
• c- (Component): 구체적인 디자인/스타일을 담당합니다. (예: 색상, 배경, 둥근 테두리 등)
  • c-lip: 그 요소가 어떤 색이고 어떤 모양인지 정의

2. 언더바 두 개(__)의 의미: BEM 기법

코드 중간에 l-lip__hollow처럼 언더바가 두 개 있는 것이 보이죠? 이게 BEM의 핵심입니다.

• Block (블록): l-lip (하나의 독립적인 덩어리)
• Element (요소): __hollow, __fill (블록 안에 속한 작은 부품들)

이렇게 이름을 지으면, 나중에 CSS 파일을 볼 때 "아, hollow는 lip이라는 큰 덩어리 안에 들어있는 애구나!"라고 바로 알 수 있습니다. 코드가 복잡해져도 길을 잃지 않게 해주죠.