구조적인 CSS 작성 방법의 발전

기술의 발달과 함께 사용자들이 인터넷을 사용하는 환경이 다양해졌다.

그리고 그에 따라 개발자들의 CSS 작성 방식도 꾸준히 진화해 오고 있다.

프로젝트의 규모, 복잡도 등이 점점 커짐에 따라 패턴이 없는 CSS 코드는 개발자들에게 스트레스를 안겨줬고,

CSS 코드를 구조화 하기 위한 CSS 전처리기(CSS Preprocessor)라는 개념이 등장했다.

이는 반복적인 코드를 작성하는 등의 수고를 변수, 함수 등 우리가 익숙한 방식으로 처리할 수 있게 도와주는 도구이다.

하지만 CSS 전처리기 자체만으로는 웹에서 인지하지 못하기 때문에,

각 CSS 전처리기에 맞는 컴파일러를 통해 컴파일 해줘야한다.

CSS 전처리기도 만능은 아니었다.

CSS 전처리기 중 가장 유명한 스크립팅 언어인 SASS(Syntactically Awesome Style Sheets)는

CSS의 구조화를 해결해주는 장점보다 다른 문제점들이 더 많았다.

전처리기 내부에서 어떤 작업이 진행되는지 알지 못한 채,

눈 앞에 보이는 문제만을 해결하기 위해 단순한 계층 구조를 만들어 해결하기 시작했고,

그 결과, compiled된 파일의 용량이 어마어마하게 커지게 되었다.

그리고 또 다시 이러한 문제점을 해결하기 위해 BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두되었다.

방법론의 공통 지향점
- 재사용
- 간결화
- 확장성
- 예측성(클래스명 등으로 의미 예측)

대표적인 방법론인 BEM(Block, Element, Modifier)은,

Block, Element, Modifier로 구분해 클래스명을 작성하며, -과_로 구분한다.

BEM을 통해 일관되며, 재사용이 가능한 코딩 구조를 만들어줬다.

그러나 BEM도 완벽하진 않았다.

클래스명 선택자의 길이가 너무 길어져 마크업이 불필요하게 커지는 등의 문제가 발생했다.

결국 현대의 해결책으로는 컴포넌트에 CSS를 불러들이기 위해 탄생한 CSS-in-JS가 제시된다.

(CSS-in-JS 관련 대표적인 라이브러리는 Styled Component가 있다.)

	특징	장점	단점
CSS	기본적인 스타일링 방법	-	일관된 패턴 X !important 남용
SASS (Preprocessor)	프로그래밍 방법론을 도입, Compiled된 CSS를 만드는 전처리기	변수/함수/상속 개념을 활용하여 재사용 가능 CSS 구조화	전처리 과정 필요 디버깅 어려움 Compiled한 파일 거대함
BEM	CSS 클래스명 작성에 일관된 패턴을 강제하는 방법	네이밍으로 문제 해결 전처리 과정 X	선택자가 장황해진다. 클래스 목록이 과다해진다.
Styled-Component (CSS-in-JS)	컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리	CSS를 컴포넌트 안으로 캡슐화 네이밍, 최적화 신경 쓸 필요 X	빠른 페이지 로드에 불리