HTML+CSS - 기초 (코드양이 줄어드는 class 작명법 OOCSS, BEM)

코드 양을 줄이는 CSS 작성법

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

class 두 개를 만들어서 각각 button에 집어넣기
❗하지만 이런 경우 CSS파일이 매우 길어지고 용량이 큰 CSS파일은 웹사이트 로딩 속도를 저하시킴

💡고수: 뼈대용 class, 살점용 class 각각 제작 (중복되는 값들은 class 하나로 묶기)

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

html에서 class 2개를 부여하면 완료!

• 장점

1. CSS양이 줄어든다
2. 유지보수가 편하다

만들어두면 편한 Utility class (스타일이 한두개만 들어있는 class)
ex)

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

2. BEM룰

class 작명할 때 창의력이 딸리면?

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>