CSS_OOCSS, BEM

Adrian·2022년 1월 21일

코드의 양을 줄이는 class 두가지 작명법인 OOCSS와 BEM을 알아보자.

CSS파일을 가독성있게 쓰는 것은 두가지 이점을 준다.

심미적으로 가독성이 뛰어나다.

용량이 작기 때문에 웹사이트의 빠른 로딩속도를 보장한다.

▶️ OOCSS(Object-Oriented CSS)

우리가 빨간 버튼과 파란 버튼을 만든다고 가정해보자.

  .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;
  }

이렇게 만든다면, 중복된 코드가 너무 많아진다. 따라서 아래와 같이 작성한다.

  .main-btn {
    font-size : 20px;
    padding : 15px;
    border : none;
    cursor : pointer;
  }

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

뼈대와 살을 분리하여 작성한다. 기본스타일을 정의하는 뼈대인 main-btn과 색상을 지정하는 용도의 클래스만 따로 여러개를 만들어준다.

이렇게 뼈와 살을 각각의 class로 분리해주면 1. 중복된 스타일을 재사용할 수 있고, 2. 유지보수가 편리해지며, 3. 코드를 짜는 속도가 빨라진다.

위 예시처럼 색상, 크기 등 뼈대에 붙일 살 역할을 하는 class들을 utility class 라고 부른다.

  .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를 많이 만들어두면 편리하다.

▶️ BEM

작명하기가 어려울 경우 다음과 BEM을 사용한다.

Profile 소개 섹션을 다시 만든다고 가정해보자.

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

BEM룰에 따라 클래스를 작명해보자.

1. 덩어리 이름으로 시작하기 (Block)

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

2. 태그마다 다른 class 명을 부여하려면 __태그를 붙인다. (Element)

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

3.같은 태그들의 디자인을 구분하려면-- (Modifier)

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