✍BEM

• Block element modifier의 약자
• css 방법론 중 하나

우리는 코드를 작성할 때 내가 아닌 누가 봐도 읽기 쉬운 코드를 작성하기 위해 노력한다. 협업하는데 있어서 일관적이고 효율적인 업무를 처리 할 수 있기 때문이다.

BEM은 우리가 CSS 클래스명을 짓는데 있어서 명확한 체계를 만들어 주기 때문에 일관된 구조를 갖게 해주는데 큰 도움이 된다.

BEM규칙은 아래와 같다.

Block__element--modifier

만약 content라는 부모태그아래 h1와 p라는 태그가 있다고 해보자.
여기서 부모태그는 문단전체를 감싸고 있는 컨테이너이다.

<div class="content">
	<h1>title</h1>
   	<p>paragraph</p>	
</div>

BEM규칙을 적용한다면,
h1태그에는 content__title
p태그에는 content__text 와 같이 만들어 볼 수 있겠다.

만약 content태그가 여러개 있고 각각의 h1과 p가 스타일링이 달라져야 한다면
h1태그에는 content__title--red
p태그에는 content__text--gray
뒤에--를 사용해 작성해 주면 되겠다.

id가 아닌 css에만 적용할 수 있다는 것을 꼭 유의해야한다.