코드양이 줄어드는 class 작명법 (OOCSS, BEM)

조 은길·2022년 3월 10일

CSS TIL

Html & CSS

목록 보기

28/66

CSS 초보와 고수의 차이

초보

그때그때 필요한 class를 새로 만들어서 쓴다.

고수

이미 만들어둔 class를 재활용한다.
재활용했는데 스타일이 더 필요하면, class를 하나 더 추가하면 됨!!

코드 양을 줄이는 CSS 작성법 (OOCSS)

예를 들어, 빨간 버튼과 파란 버튼을 만든다고 해보자!!

<button>빨간버튼</button>
<button>파란버튼</button>

초보자 수준에서 할 수 있는 가장 간단한 방법은

.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를 만들어서 스타일을 주는 것이다.

여기서는 class를 두 개 만들어서, 각각 <button>에 집어넣는 거다.

그럼 빨간 버튼 파란 버튼 완성이지만, 중복된 코드가 매우 많이 발생하고 있다.

4줄이나 똑같다.

그럼 다른 색의 버튼 10개 만들어오라고 하면 똑같은 40줄의 코드가 복붙이 되겠군.

이 경우 CSS 파일이 매우 길어지기 때문에 보기 싫다.

그리고 용량이 큰 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를 여러개 만들어두는 거다.

그럼 이제 html에 사용할 때

<button class="main-btn bg-red">빨간버튼</button>
<button class="main-btn bg-blue">파란버튼</button>

이렇게 쓰면 아까랑 똑같은 버튼이 탄생한다.

이렇게 뼈와 살을 각각의 class로 분리하는 방법의 장점은
1. 중복된 스타일을 재사용가능하다.
덕분에 CSS 파일용량도 줄어들고 코딩 시간도 절약된다.
2. 유지보수가 편리해진다.
사이트의 모든 버튼의 font-size를 약간 줄여야한다면 이 경우엔 한 곳만 건드리면 모든 버튼이 다 수정되겠죠? 편리하다.
3. 코드 개빨리 짤 수 있다.
.bg-red 이렇게 색깔놀이용 class들을 전문용어로 utility class라고 부른다.

이걸 미리 많이 만들어두면,

.bg-red {
  background : red;
}
.bg-green {
  background : green;
}
.bg-blue {
  background : blue;
}

앞으로 버튼만들 때 class명을 두세개 고르기만 하면 되니까

css 파일 열지않고도 다양한 스타일을 빠르게 만들 수 있다.

(class명을 미리 외워두면...)

font 변경이 많다면??

.font-small {
  font-size : 12px;
}
.font-medium {
  font-size : 16px;
}
.font-lg {
  font-size : 20px;
}

글씨 font-size 변경이 잦다면 이런 식으로 utility class 들을 많이 만들어두고

글자 스타일링할 때 가져다 쓰면 코드짜는게 매우 빨라질 수 있다.

특히 width, margin, padding, text-align 이런 것들 조정하는 utility class 많이 만들어두면 편리하다.

지금까지 설명한 뼈와 살을 분리하는 CSS 작성방식을 Object Oriented CSS 라고 부른다.

어떤 아저씨가 옛날에 주장한건데 장점이 많아 실제 개발시 자주 사용한다.

이걸 잘 쓰는 라이브러리가 Bootstrap인데 나중에 알아보자.

class 작명할 때 창의력이 딸려서 어렵다면??

이것도 방법이 하나 있다. BEM 이라는 작명법을 따르면, 생각안해도 되어서 편리하다.
배우기 위해 예제를 하나 가져왔는데, Profile 소개 섹션을 만든다고 가정하자.

<div>
  <img>
  <h4>이름</h4>
  <p>소개글</p>
  <button>빨간버튼</button>
  <button>파란버튼</button>
</div>

HTML은 이렇게 생겼을듯요

그럼 여기에 있는 모든 HTML 요소에 class명을 한번 작명해보자.

class를 6개나 작명해야하기 때문에 창의력이 딸릴 수 있는데, BEM 룰을 적용해보면 작명이 쉬워진다.

<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를 작명할 땐 우선 덩어리이름으로 시작하는게 좋습니다.

덩어리를 전문용어로 컴포넌트라고 하니까 그렇게 부르자.

아무튼 필자는 프로필 소개하는 html 컴포넌트를 만들 것이기 때문에,
거기 안에 있는 모든 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 태그는 profile__img

그니까 profile 안에 있는 button 태그는 profile__button

이렇게 __태그이름 으로 작명하라는 것이다.

이러면 작명할 때 생각 깊게 안해도 되겠죠?

태그 이름 쓰기 싫으면 필자처럼 content 이런 식으로 작명해도 봐드림

<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>