CSS 방법론 - BEM

CSS 방법론에는 OOCSS, BEM, SMACSS 등이 있습니다. 그 중 BEM 방식!! 1. BEM의 기본 구조 BEM은 Block, Element, Modifier를 뜻한다. 이 세 가지로 구성된 이름을 짓는 것을 말한다. 그리고 각각 __ 와 -- 로 구분한다. .header__navigation--navi-test{ color: red; } 위 코드에서 header는 Block, navigation은 Element, navi-text는 Modifier가 된다. BEM은 기본적으로 ID를 사용하지 않으며, class만을 사용한다. 또 '어떻게 보이는가'가 아니라 '어떤 목적인가'에 따라 이름을 짓는다. 예를 들어, 에러 메시지를 띄우는 P 태그에게는 .red가 아닌, .error 라는 이름을 줘야..

2022.05.09