[ CSS ] CSS 방법론

안녕하세요! 

웹파트 OB 이예림입니다!! 

1주차 과제를 진행하며 css 클래스 네이밍 관련해서 어떻게 네이밍하는 것이 효율적인지 고민하곤 했는데요,

이와 관련하여 CSS 방법론에 대해 알아보았습니다. 

 

📌 CSS 방법론

CSS에서 클래스 네임을 지을 때 작성하는 방식의 일종으로 naming convention이다.

 

: 쉽게 말해 CSS방법론이란 웹에서 CSS의 영향력이 높아지게 되면서 CSS 사용시 클래스 이름을 어떻게 작성할지, 어떠한 방식으로 스타일을 작성할지 등 CSS를 보다 효율적으로 작성하기 위해 정의된 일종의 규칙이다.

 

🤔 CSS 방법론을 사용하는 이유는?

1. 원활한 유지보수
2. 코드의 재사용성 및 확장성
3. 클래스명으로도 무슨 내용인지 예측 가능

CSS방법론에는 다양한 방법론들이 존재하지만 크게 OOCSS, BEM, SMACSS로 나뉘며, 상황에 따라 다르게 적용된다.

 

✅ OOCSS

CSS를 모듈 방식으로 작성하여 중복을 줄이는 방식의 방법

• 가장 많이 쓰이는 방법론
• 주요원리) 구조와 스타일을 분리해서 작성

장점 단점

- 중복 최소화	- 가독성 저하
- 재사용성 증가

➡️ 공통적인 부분은 추출하고 각 고유의 스타일을 지정해 사용하는 방법!

 

✅ BEM

 

블록, 요소, 상태로 구분하여 클래스 이름을 작성하는 방법론

 

1️⃣ 블록 (Block)

: 재사용성이 가능하고 기능적으로 독립이 가능한 컴포넌트

: 하나의 단어를 사용하되, 길어질 경우 - 사용

.card {}
.author-info {}

2️⃣ 요소 (Element)

: 블록을 구성하는 단위로 __를 사용한다.

.card__content {}
.author-info__image {}

3️⃣ 상태 (Modifier)

: 블록이나 요소의 속성으로 —를 사용한다.

.card--hide {}
.author-info__image--disabled {}

 

✅ SMACSS

CSS를 범주화로 패턴화 하고자 하는 방법론이다.

 

: css를 비슷한 종류끼리 모아 5가지 스타일을 나누고 각 유형에 맞는 선택자와 작명법, 코딩 기법을 제시한다.

• 범주
  • 기본 (base)
  • : Reset, Variable 등을 포함하고 !important를 쓰지 않는다.
  • 레이아웃 (layout)
  • : 주요 요소(id)와 하위 요소(class)로 구분하고 접두사를 사용한다.
  • 모듈 (module)
  • : 재사용성이 높은 구성 요소를 정의한다.
  • 상태 (state)
  • : 요소의 상태 변화를 표현하고 접두사 “is-”나 “s-”를 사용한다.
  • 테마 (theme)
  • : 사용자가 선택 가능하도록 스타일을 재선언하여 사용한다.
• 유의사항
  1. 파생된 CSS 셀렉터 사용금지
  2. Id 셀렉터 사용금지
  3. !Important 사용금지
  4. 다른 개발자들이 이해할 수 있도록 class 이름을 의미 있게 지어야 함

 

💭 CSS 방법론의 한계

하지만 이러한 방법론으로는 복잡성을 줄이거나 더 나은 생산성을 가져오는 것은 아니었고 CSS의 본질적인 한계를 극복할 수는 없었다.

 

‘어쩌면 CSS로는 태생적으로 해결할 수 없는 것이 아닐까?’

‘JS의 도움을 받아보자!’라는 생각으로

CSS 자체보다는 JS의 도움을 받는 식으로 해결을 하고자 하는 움직임이 생겨났고,

이러한 관점에서 발전된 것이 CSS Module, CSS-in-JS 등이 있다.

 

추가로 읽어보면 좋을 아티클

내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library. -Part.1 - tech.kakao.com