#1 BEM이란?
HTML과 CSS 클래스명을 위한 명명법이다. Block Element Modifier의 약자다. HTML 태그만을 보고도 어떤 스타일을 적용할 수 있는지 알 수 있다.
#2 문법
/* Block component */
.btn {}
/* Element that depends upon the block */
.btn__price {}
/* Modifier that changes the style of the block */
.btn--orange {}
.btn--big {}#3 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Kokoa-talk</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="status-bar">
<div class="status-bar__column">
<span>No Service</span>
</div>
<div class="status-bar__column">
<span>18:43</span>
</div>
<div class="status-bar__column">
<span>11%</span>
</div>
</div>
</body>
</html>상태표시바 안에 여러 태그들을 만들었다. 각 태그들은 상태표시바의 컬럼이다.