[CSS] CSS의 변화 과정 - CSS in CSS, CSS in JS, Atomic CSS

  웹 페이지의 컨텐츠와 스타일링을 분리하기 위해 등장한 CSS는 여러 가지 문제점을 가지고 있었다. 그 중 대표적인 문제점들은 다음과 같았다.

(1) Global namespace : 모든 스타일이 Global로 처리되기 때문에 중복되지 않는 클래스명을 사용해야 함

(2) Dependencies : CSS 파일 사이의 의존 관계를 관리하기 힘듦

(3) Dead code elimination : 기능을 추가, 삭제, 변경할 때 관련된 CSS 코드를 처리하는 것이 번거롭다.

(4) Sharing constants : CSS와 JS간 값을 공유할 수 없는 문제 (data 속성을 활용하는 방법이 있기는 하지만 현실적인 사용을 위해서는 제약이 많다.)

(5) Non-deterministic Resolution : CSS 로드 순서에 따라 다른 스타일이 적용될 수 있다. (스타일 우선순위 변경 가능)

 

  이러한 CSS의 문제점들을 극복하기 위해서 여러 가지 방법들이 등장하게 되었다. 가장 먼저 소개할 방법들은 CSS 전처리기와 CSS Module로 이루어진 CSS in CSS 방식이다.

 

1. CSS in CSS

(1) CSS 전처리기 (CSS Preprocessor)

  CSS 전처리기는 중첩문, 조건문, 반복문 등의 기능을 제공함으로써 더욱 편리하게 스타일링을 구현할 수 있게 해준다. CSS 전처리기는 Sass, Less, Stylus가 있으며 널리 알려진 Scss는 Sass의 모든 기능을 지원하는 CSS의 슈퍼셋이다. 물론 웹은 CSS 전처리기로 작성된 코드를 인식하지 못하기 때문에 컴파일을 통해 웹이 인식할 수 있는 일반 CSS로 변환하는 과정이 필요하다.

 

(2) CSS Module

  CSS 모듈은 각 컴포넌트에서 CSS를 불러와서 해당 컴포넌트 내에서만 적용되게 하는 방법이다. 처음으로 CSS와 JS를 결합하려 했다는 점, 그리고 CSS의 고질적인 문제점 중 하나였던 클래스 이름짓기와 관련된 문제를 극복해줬다는 점에서 의의를 가진다. (더 이상 개발자들은 BEM과 같은 방법론에 의존하지 않아도 됐다.)

 

 

2. CSS-in-JS

  CSS의 글로벌 범위, 기능 변화에 따른 수정 등은 CSS 자체의 한계로 인해 극복이 어려운 문제점들이었다. 그래서 개발자들은 발상을 바꿔보기로 했다. JS에서 CSS를 구현하면 어떨까? 그렇게 등장한 styled-components, Emotion과 같은 CSS-in-JS 방식은 번거롭게 selector을 다룰 필요 없이 property와 value만을 지정하며 전처리기가 제공하는 utility 등의 기능에서 뛰어난 모습을 보여주면서 큰 인기를 끌게 되었다. 

 

 

3. Atomic CSS

  Atomic CSS는 CSS 시작으로 거슬러 올라가 애초에 스타일링과 컨텐츠를 분리한 것에 대해 문제 제기를 하는 방식이다. Atomic CSS에서는 따로 클래스명을 고민할 필요 없이 미리 정해둔 단일 목적의 클래스명을 활용함으로써 스타일링을 수행한다. Atomic CSS 방식은 클래스명 고민을 할 필요도 없으며 한 번 CSS를 작성하면 서비스의 확장에도 CSS 파일을 추가로 작성하거나 변경할 필요가 없다는 점에서 장점을 가진다. (이는 유지보수 측면에서도 그렇지만 CSS 리소스의 크기가 증가하지 않는다는 점에서도 장점이 된다.)

  대표적인 Atomic CSS 방식의 프레임워크인 Tailwind CSS는 모든 스타일링에 대해 Atomic CSS를 적용함으로써 편리하게 스타일링을 수행할 수 있게 해주었다. 하지만 Tailwind CSS는 이미 프레임워크에서 제공하는 스타일링만을 이용할 수 있었기 때문에 분명한 한계가 존재한다는 평가를 받기 시작했다.

  그래서 등장하게 된 것이 On-Demand Atomic CSS이다. On-Demand Atomic CSS 방식은 값을 입력하면 그에 해당하는 CSS를 생성해주는 Atomic CSS 방식이다. 대표적인 On-Demand Atomic CSS 엔진으로는 unocss가 있다.

 

 

4. CSS의 진화

  이렇게 많은 CSS 대체재들이 등장하고 있는데 CSS라고 가만히 있을 수는 없다. CSS 자체도 자신이 가진 한계를 극복하기 위해 몇 가지 기능들을 추가로 가져왔다. 가장 대표적인 예로 변수 기능, Grid 레이아웃 등이 있다. Grid 레이아웃의 경우 인터넷 익스플로러와의 호환 이슈, 진입 장벽, Flex로도 대체 가능함 여러 가지 이유로 시장에서 바로 환영받지는 못했지만 점점 그 활용도가 올라가는 추세이다. 이러한 CSS의 발전으로 인해 CSS 전처리기만이 독자적으로 가지는 강점은 많이 사라져가는 추세이다.