CSS → CSS 전처리기 → BEM → CSS Module → CSS in JS

CSS가 어떻게 발전되어 왔는지 정리해보고자 한다.

 

목차

1. CSS
2. CSS 전처리기
3. BEM
4. CSS Module (CSS in CSS)
5. CSS in JS

 

 

 

 

CSS (Cascading Style Sheet)

HTML을 시각적으로 꾸미기 위해 사용하는 스타일 언어이다. 

 

단점 

- 순수 CSS의 경우 파일 간 값을 공유하지 못한다. 따라서 코드의 재사용이 어렵다.

- 중복 코드가 많다.

 

 

 

CSS

css

 

SCSS

scss

 

 

 

 

CSS 전처리기 

보통 CSS 전처리기에는 SCSS(SASS), LESS, Stylus가 있다. 그중에도 SCSS가 가장 많이 사용된다.

 

특징

CSS에 비해 중복되는 코드가 줄어든다.

import 구문을 사용하여 다른 CSS를 불러와 사용할 수 있어 유지보수성이 향상된다.

물론 CSS도 여러 파일을 사용할 수 있지만, 빌드 시에 하나의 파일로 번들링되는 전처리기와 달리 각각의 CSS 파일을 서버에 요청해야 한다.

스타일을 변수로써 사용할 수 있다.

반복되는 스타일을 묶음으로 관리할 수 있다. (mixin)

 

단점

브라우저는 SCSS를 이해할 수 없기 때문에 컴파일이 필요하다.

여러 파일에서 여러 번 같은 스타일이 선언될 수 있으므로 중첩 선언을 완벽하게 막을 수 없다. (셀렉터 중첩)

 

 

 

BEM (Block, Element, Modifier)

BEM은 네이밍 방법론이다. 각 요소의 클래스가 겹치지 않도록 관리하는 방법이다.

CSS 전처리기에서도 해결하지 못한 중첩 선언을 해결하기 위해 탄생되었다. (BEM 방법론)

 

단점

클래스 명이 길어질 수 있기 때문에 HTML 가독성이 떨어질 우려가 있다.

네이밍 규칙에 대한 이해가 필요하다.

 

 

CSS Module (CSS in CSS)

CSS in CSS는 CSS를 모듈화 하는 방식이다. 

CSS 클래스를 만들면 자동으로 고유 클래스명이 만들어져 유효 범위를 지역적으로 제한한다.

모듈화된 CSS는 번들러를 통해 고유한 클래스명으로 이루어진 객체가 반환된다.

CSS Module을 사용하면 클래스가 겹치는 것을 완벽하게 방지할 수 있다.

SCSS(SASS), BEM의 경우 클래스가 겹치지 않도록 신경써야 하는 불편함이 있다. 이를 극복하기 위해 나온 게 바로 CSS Modules다.

CRA로 만들어진 프로젝트의 경우 모듈이름.module.css의 형태로 파일을 네이밍 한다.

 

(Nav.module.css)

 

(Nav.js)

 

위와 같이 작업하면 실제 HTML 요소에는 고유의 클래스명(hash 값)이 생성된다.

 

 

단점

CSS를 각각의 파일로 관리하기 때문에 파일 개수가 많아질 경우 관리하기가 어렵다.

 

 

 

 

CSS in JS

CSS module이 파일을 관리하기 까다로워지는 것을 해결하고자 등장했다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다. 컴포넌트를 생성할 때마다 각 컴포넌트에서 사용할 CSS를 생성하여 같이 작성한다. 결과적으로 컴포넌트에 대한 CSS 관리가 쉬워졌다.

CSS in JS에는 대표적으로 Styled-components, emtion이 있다. 둘의 기능과 사용법은 거의 비슷하다.

 

CSS가 JS 내부로 들어갔기 때문에 별도의 import가 필요 없다.

CSS module과 마찬가지로 고유의 클래스명(hash 값)이 자동으로 생성된다. 따라서 중첩 선언을 방지할 수 있다.

 

단점

CSS module의 경우 JS가 아니라 CSS이기 때문에 JS 파일의 상태 변경과 상관없이 바로 적용이 가능하다. 반면에 CSS in JS는 JS 형태이기 때문에 컴포넌트의 상태가 변경되면 JS 내에 있는 CSS 코드를 읽어와서 파싱 하는 단계부터 다시 시작하므로 비교적 느리다.

CSS moudle은 별도의 설치가 필요 없지만 CSS in JS의 경우 설치 후에 사용해야 하기 때문에 번들 크기가 커질 수 있다. 결과적으로 최초 렌더링 속도가 오래 걸릴 수 있다.

 

---

참고

https://medium.com/@perezpriego7/css-evolution-from-css-sass-bem-css-modules-to-styled-components-d4c1da3a659b