CSS 방법론

📢CSS 방법론이란?

CSS에서 클래스 네임을 지을 때 작성하는 방식

 

 

 

📌OOCSS (Object Oriented CSS)

 

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

공통된 부분을 찾아 어디서나 재활용 할 수 있다는 장점이 있지만 다중 클래스 사용으로 인해 코드의 가독성이 떨어질 수 있다.

<a class="btn instagram"></a>
<a class="btn facebook"></a>

 

 

 

📌BEM (Block Element Modifier)

 

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

 

Block = 독립적으로 의미 있는 컨포넌트

Element = 블록에 속하는 부분, 하위 요소

Modifier = 블록이나 엘리먼트의 상태, 해당 요소의 스타일 변경 

 

각 부분을  _ 로 구분하여 짓는다. 엄격한 네이밍 규칙을  따르며 클래스명이 용도와 형태를 잘 표현해주어 직관적으로 알 수 있는것이 장점이나, 클래스명이 길고 복잡해 질 수 있다.

.header
.header_tab
.header_content
.header_content_logo

 

 

 

📌SMACSS(Scalable and Modular Architecture for CSS)

 

SMACSS는 CSS를 범주화로 패턴화하고자 하는 방법론

작성할 CSS를 비슷한 종류끼리 모아 5가지 스타일로 나누고 각 유형애 맞는 선택자와 작명법, 코딩기법을 제시

base / layout / module / state / theme