728x90
코드는 가독성이 중요하다.
하지만 코드양이 많아지면 그만큼
클래스명도 다양해지고 구조 또한 복잡해진다.
그래서 클래스 명의 명확성과 일관성, 의미론을 유지할수 있는
CSS 표준에는 BEM 표기법이 있다.
BEM 은 Block Element Modifier 의 약자이다.
클래스 이름 안에 언더바 두개씩 있고,
마이너스 표시가 그 뒤에 두개씩 있는 경우를
접해본적이 있다면, 그게 BEM 을 활용한 클래스의 표기이다.
예시) main__item--blue
하지만 간혹 보면 BEM 표기법을
아이디에 사용하는 경우도 종종 있는데,
이는 잘못된 방법으로, 클래스에만 사용하여야 한다.
하단의 간단한 예제를 통해
BEM 의 의미를 이해하도록 하자
샘플 예제
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>BEM Sample</title>
<style>
.main {
display : flex;
flex-direction : row;
background: #dddddd;
justify-content : center;
align-items : center;
height : 40vh;
}
.main__item{
width : 80px;
height: 80px;
margin : 5px;
}
.main__item:nth-child(1){
background : red;
}
.main__item:nth-child(2){
background : red;
}
.main__item--blue {
width : 80px;
height: 80px;
margin : 5px;
background : blue;
}
.main__item:nth-child(3){
background : red;
}
</style>
</head>
<body>
<section class="main">
<div class="main__item"></div>
<div class="main__item"></div>
<div class="main__item--blue"></div>
</section>
</body>
</html>
설명
Block : <section class="main"></main>
Element : <div class="main__item"></div>
Modifier : <div class="main__item--blue"></div>
전체를 감싸고있는 회색의 블록의 클래스 이름은 main으로 하였다.
감싸져있는 내부의 엘리먼트들은 main__item
그안에서 구분하기 위한 엘리먼트는 main__item--blue
728x90
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] transform - Translate 수평, 수직 정렬 (0) | 2021.03.04 |
|---|---|
| [CSS] box-sizing border-box content-box (0) | 2021.03.04 |
| [CSS] Transform 속성 span 태그에 적용하기 (0) | 2021.02.22 |
| [프론트엔드 CSS] 엘리먼트 내 스크롤바 생성 overflow-y (0) | 2021.02.20 |
| [CSS] user-select 텍스트 선택 효과 없애기 (0) | 2021.02.17 |
댓글