CSS방법론 (OOCSS, BEM,SMACSS)

CSS방법론

: CSS를 더 효율적으로 구성하기 위한 방법론. CSS에서의 클래스 네이밍 컨벤션.

-> 원활한 유지보수, 코드의 재사용성, 클래스 이름으로도 유추 가능함, 확장 가능성.

 

1.OOCSS

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

-공통적인 부분을 추출하고 각 고유한 스타일을 지정해 사용함

-스트럭쳐와 스킨 분리 / 컨테이너와 컨텐츠 분리

- 중복 최소화, 코드의 재사용성이 높음

-가독성이 떨어지고 코드가 길어진다.

-부트 스트랩, 테일윈드

 

2.SMACSS

:  CSS코드를 역할에 따라 분류 (베이스, 레이아웃, 모듈, 스테이트, 테마)

-공통된 부분을 정의하여 재사용 가능

-구조적 상황 상관없이 클래스로 스타일 구분

-공통 클래스가 많아지면 유지보수가 어렵고 가독성 떨어짐.

 

3.BEM(Block, Element, Modifier)

:컴포넌트 기반 웹 개발 접근법

Block__Element -- Modifier

-개발,디버깅, 유지보수를 위해 선택자 이름을 명확하게 만들고 소문자, 숫자만으로 작명

- 여러단어의 조합은 하이픈(-)으로 연결하여 작명한다.

- ID사용없이 클래스로만 한다

-목적이나 기능에 따라 작명

 

1)Block : 재사용이 가능한 기능적으로 독립된 컴포넌트.

2)Element : 블럭을 구성하는 단위. 블럭 내에서만 의미를 가짐.

.block > .block_element1>.block_element2와 같은 구조에서 element2는 element1의 하위 엘리먼트가 아닌 block의 엘리먼트 취급.

3)Modifier : 블럭이나 엘리먼트의 속성. 스타일이 조금 다르거나 다르게 작동하는 경우 사용.

 

-클래스 네임만으로 마크업 구조 파악 가능.

-클래스 네임이 너무 길어서 가독성 떨어지고 스크립트로 변경해야할 때 불편.

 

https://mine-it-record.tistory.com/655

[CSS] CSS 방법론이란? (ft. OOCSS / BEM / SMACSS)

https://www.slideshare.net/wonjunhwang11/css-convention-bem