똑같이 생긴 버튼이 2가지가 있는데 단순히 색깔만 빨강색, 파란색으로 나누어서 만들라고 하면 어떻게 할까? 가장 간단한 방법은 직접 만드는 거다.
.main-btn-red {
font-size : 20px;
padding : 15px;
border : none;
cursor : pointer;
background : red;
}
.main-btn-blue {
font-size : 20px;
padding : 15px;
border : none;
cursor : pointer;
background : blue;
}class를 직접 만들어 button 태그에 집어 넣는 방법이다. 이 방법으로 만들 수는 있지만 중복된 코드도 무척 많고, CSS 파일이 길어지기 때문에 가독성도 떨어지고 용량이 커질수록 웹 사이트 로딩 속도도 저하 된다. 이러한 방법은 어떨까?
.main-btn {
font-size : 20px;
padding : 15px;
border : none;
cursor : pointer;
}
.bg-red {
background : red;
}
.bg-blue {
background : blue;
}뼈와 살을 분리하는 방법이다.
1. 버튼의 기본 스타일인 padding, font-size 같은 것들은 하나의 class로 미리 만들어둔다.
2. 버튼의 색을 담당하는 class를 별도로 만든다.
<button class="main-btn bg-red">빨간버튼</button>
<button class="main-btn bg-blue">파란버튼</button>뼈와 살을 각각의 class로 분리하는 방법은 중복된 스타일을 재사용 가능하고, 유지보수가 편리해진다. 또, 코드를 훨씬 더 빨리 작성할 수 있다는 장점을 가지고 있다.
이러한 CSS 작성 방식을 Object Oriented CSS 라고 부른다.
class를 작명할 때 창의력이 부족하다면 또 다른 방법이 있다. 그 방법은 바로 BEM
<div class="profile">
<img class="profile">
<h4 class="profile">이름</h4>
<p class="profile">소개글</p>
<button class="profile">빨간버튼</button>
<button class="profile">파란버튼</button>
</div>- class를 작명할 땐 우선 덩어리의 이름으로 시작한다.
<div class="profile">
<img class="profile__img">
<h4 class="profile__h4">이름</h4>
<p class="profile__content">소개글</p>
<button class="profile__button">빨간버튼</button>
<button class="profile__button">파란버튼</button>
</div>- 태그마다 다른 class명을 부여하려면 __태그명을 뒤에 붙인다.
<div class="profile">
<img class="profile__img">
<h4 class="profile__h4">이름</h4>
<p class="profile__content">소개글</p>
<button class="profile__button--red">빨간버튼</button>
<button class="profile__button--blue">파란버튼</button>
</div>- 같은 태그들의 디자인을 구분하려면 --을 붙여준다.
BEM 구조를 쉽게 기어갛려면 Block__Element--Modifier 라고 기억해주자.
그러나, 지금까지 설명한 OOCSS 클래스 작성 방식과, BEM 작명 방식은 HTML, CSS 파일이 크고 방대할 때 유용하지만 요즘은 React, Vue를 이용하여 웹 또는 앱을 만들 땐 크게 유용하지 않다. React 같은 경우에는 HTML 페이지 단위가 아니라 작은 컴포넌트 단위로 개발하기 때문에 class 명이 중복되어도 컴포넌트들 끼리 스타일이 간섭되지 않게 코드를 짤 수 있다. 대표적인 경우로 Style-Component, module CSS 같은 라이브러리를 이용하면 된다. 그러므로 깊게 익힌다기 보단 알아보는 정도에 그쳐도 괜찮다.
