OOCSS, BEM class 작명법

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

• 아마 두개의 button에 이렇게 넣는 경우
• 중복된 코드가 4줄이 존재를 합니다.
• 버튼이 5가지 색이면? 10가지 색이면?
• CSS 파일에 용량이 커지면 웹사이트 로딩 속도를 저하시키는 원인이 됩니다.

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

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

• 이 코드는 어떤가요?
• 뼈과 살이 분리하는 방법입니다.
• 버튼의 동일한 속성은 하나로 만들고 다른 점만 따로 class로 분리를 한것입니다.
• HTML에서는 이렇게 작성이 되겠죠

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

 

 

 

1.1 코드를 분리해서 얻는 이점

• 중복된 스타일을 재사용가능합니다.
  •  CSS 파일용량도 줄어들고 코딩 시간도 절약
• 유지보수가 편리해집니다.
  • 사이트의 모든 버튼의 크기나 폰트를 바꿀 경우 한곳만 건드리면 됩니다.
• 코드 작성에 빨라집니다.
  • .bg-red 이렇게 색깔의 class들을 전문 용어로 utility class라고 합니다.

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

• 버튼 만들때 class명 2~3개만 선택하면 되기 때문에, css 파일을 열지 않고 빠르게 코드 작성이 됩니다.

 

• 폰트 역시 쉽게 변화 시킬 수 있습니다.
  • 요즘 반응형 웹으로 스마트폰 화면, 태블릿 화면, pc 화면에 속하는 글꼴 크기도 빠르게 할수있죠.

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

 

 

 

2. BEM class 작명법

• 아래 코드는 쉽게 파악이 되지 않습니다.

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

 

 

 

 

2.1 클래스명으로 손쉽게 파악을 하는 방법이 있습니다.

• class를 작명할 땐 우선 덩어리이름으로 시작하는게 좋습니다.
• 태그마다 다른 class명을 부여하려면 __태그명을 뒤에 붙입니다.
  • img 태그는 profile_img, button 태그는 profile__button 등등
• 같은 태그들의 디자인을 구분하려면 --
  • 빨간 버튼은 --red, 파란 버튼은 --blue 등등

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