코드 양을 줄이는 CSS 작명법 (OOCSS)
만약 똑같이 생겼는데 단순히 색깔만 다른 버튼을 만든다고 가정하면 어떻게 만들까? 가장 간단한 방법은 이러할 것이다.
.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 태그에 직접 넣는 것이다. 그럼 빨간 버튼, 파란 버튼은 완성이 되지만 중복된 코드가 무척 많이 발생하고 있다. 그렇다고 색만 다른 버튼을 10개나 만들라 하면 저렇게 만들기엔 너무 겹치지 않을까.
이 경우 CSS 파일이 매우 길어지기 때문에 가시성이 떨어질 수 밖에 없다. 그리고 용량이 큰 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로 분리하는 장점은
1. 중복된 스타일을 재사용이 가능하다.
CSS 용량이 줄어들고 코딩 시간도 절약된다.
2. 유지보수가 편리해진다.
사이트의 모든 버튼이 자그마한 것들만 수정한다면 한 곳만 건들여도 모든 버튼이 수정이 되기에 더욱 편리하다.
- 코드를 더욱 빨리 짤 수 있다.
.bg-red 같이 색깔놀이용 class utility class라고 부른다. 이것들을 미리 만들어두게 되면 일일히 코드를 가져올 필요 없이 간단하게 작성이 가능하다.
.bg-red {
background : red;
}
.bg-green {
background : green;
}
.bg-blue {
background : blue;
}
.font-small {
font-size : 12px;
}
.font-medium {
font-size : 16px;
}
.font-lg {
font-size : 20px;
}이처럼 뼈와 살을 분리하는 CSS 작성 방식을 Object Oriented CSS 라고 부른다.
class 작명할 때 창의력이 부족하다면
Bem이라는 작명법을 따르면 훨씬 쉽게 class 명을 정할 수 있다.
<div class="profile">
<img class="profile">
<h4 class="profile">이름</h4>
<p class="profile">소개글</p>
<button class="profile">빨간버튼</button>
<button class="profile">파란버튼</button>
</div>1. class를 작명할 땐 우선 덩어리 이름으로 시작하자.
덩어리를 전문 용어로 컴포넌트라 부르는데 저 위의 경우에 profile이라는 큰 덩어리인 컴포넌트로 작명한다.
<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>2. 태그마다 다른 class 명을 부여하려면 __ 태그명을 뒤에 붙인다.
즉 profile 안에 있는 img 태그는 profileimg, profile 안에 있는 button 태그는 profilebutton으로 정하면 된다. 이러한 방법이면 훨씬 쉽게 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>3. 같은 대그들의 디자인을 구분하려면 --을 붙인다.
버튼이 색깔별로 구분이 된다면 빨간 버튼은 --red, 파란 버튼은 --blue
따라서, BEM룰을 쉽게 외우려면 Block__Element--Modifier 방식으로 기억하자.
