[HTML/CSS] 코드양이 줄어드는 class 작명법 (OOCSS, BEM)

🐳Coding apple HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, 고급 animation 까지 강의를 보고 정리한 글입니다 🐳

💫 OOCSS(Object Oriented CSS)

똑같이 생겼는데 색만 빨강/파랑으로 다른 버튼 2개 만들기
버튼의 뼈대와 살을 분리
1. 버튼의 기본 스타일 정의 class 생성
2. 버튼 색깔 스타일 class 생성
→ CSS

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

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

→ HTML

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

• 장점

1. 중복된 스타일 재사용가능
2. 유지보수 편리
3. 코드 빨리 짤 수 있음

💫 utility class

utility class(위 예제 .bg-red 같은 class)를 많이 만들어 두면 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;
}

font-size, width, margin, padding, text-align 등을 조정하는 utility class 많이 만들어두면 편리

💫 BEM

class 작명할 때 BEM 이라는 작명법을 따르면 생각 안해도 되어서 편리
1. class를 작명할 땐 우선 컴포넌트명으로 시작하는게 좋습니다.
2. 태그마다 다른 class명을 부여하려면 태그명을 뒤에 붙입니다.
ex) 컨포넌트명태그이름
3. 같은 태그들의 디자인을 구분하려면 --
ex) 빨간 버튼은 --red