[Frontend] CSS 방법론 (BEM, OOCSS, SMACSS)

CSS 에서 클래스 네임을 어떻게 지을 것인가?

-> 유지보수와 재사용성!

https://velog.io/@hahan/CSS%EB%B0%A9%EB%B2%95%EB%A1%A0OOCSS-BEM-SMACSS

CSS방법론 (OOCSS, BEM, SMACSS)

 

OOCSS

CSS를 모듈 방식으로 작성하여 중복을 줄임. 

- 구조와 스타일을 분리한다. 

- 공통적인,중복되는 디자인 요소를 따로 뺴서 작성하고, 각 고유의 스타일을 지정해사용..

 

단점 : 다중 클래스 사용으로 코드 가독성이 떨어짐.

  <!-- 기존 방식 --> 
  <a class=”instagram_btn instagram_skin”>Instagram</a>
  <a class=”facebook_btn facebook_skin”>Facebook</a>
 

  <!-- OOCSS 적용 -->
  <a class=”btn skin instagram”>Instagram</a>
  <a class=”btn skin facebook”>Facebook</a>
.btn {
	display: inline-block;
    width: 380px;
    height: 50px;
    text-align: center;
}


.skin {
	margin: 10px 5px;
}

.instagram {
	background-color: #f9f9f9;
}

.facebook {
	background-color: #45B759;
}

 

BEM

의미론 바탕의 클래스 선택자 작명 규칙.

- 블록, 요소, 상태로 구성. 각 부분을 __, --로 구분 -> 목적, 기능을 직관적으로 확인 가능. 

- css로 구조 파악 가능. scss와 사용편리.

 

- 단점: 클래스 명이 길어지고 복잡해짐.

• 블록 : 재사용성이 가능하고, 기능적으로 독립이 가능한 컴포넌트. 하나의 단어를 사용하나, 길어지면 -를 사용
• 요소 : 블록을 구성하는 단위. 하위요소.  __사용.
• 상태: 블록이나 요소의 속성(모양, 상태, 동작...)으로, -- 사용.

이름은 형태>의미>순서>상태로 작성

ex) msgbox-toggle-off

 

SMACSS

- CSS를 범주화로 패턴화.

- 기본, 레이아웃, 모듈, 상태, 테마 다섯가지의 범주 제시.

 

1. 기본: Reset, Variable을 포함하고, !important 금지.

2. 레이아웃: 주요요소(id)와 하위 요소(class)로 구분하고, 접두사 사용.

// layout => l-

// 주요 요소 작성
#header {
    width: 400px;
}
#aside {
    width: 40px;
}

// 하위 요소 작성
.l-width #header {
    width: 650px;
    padding: 10px;
}
.l-width #aside {
    width: 100px
}

3. 모듈: 재사용성이 높은 구성 요소.

4. 상태: 요소의 상태변화 표현, 접두사 'is-'나 's-'사용.

.is-error { ... }
.is-hidden { ... }
.is-disabled { ... }

5. 테마: 사용자가 선택 가능하도록 스타일 재선언하여 사용.

// base.css
.header {
    background-color: red;
}
// theme.css
.header {
    background-color: orange;
}

 

규칙

1. 파생된 CSS셀렉터 사용 금지(?이게 머슨 말이고)

2.(위에는?) id 셀렉터 사용금지

3. !Important 금지

4. 의미있는 class 이름