[CSS] 구조적인 CSS 작성에 대한 발전 과정

Component-Driven Development(CDD)

부품 단위로 UI컴포넌트를 만들어 나가는 개발

 

프로젝트의 규모나 복잡도가 점점 커지고 함께 작업해야할 팀원 수도 많아짐에 따라 CSS를 작성하는데 일관된 패턴이 필요해졌다.

또 다양한 디바이스들과 디스플레이를 커버해야 하기 때문에 css는 더욱 복잡해졌다.

 

이러한 문제점을 해결하기 위해 CSS 전처리기(CSS Preprocessor)라는 개념이 나타났다.

 

css를 작성할 때는 많은 반복적인 작업을 요구한다. color값을 찾는 일, tag를 닫는 일 등 뿐만 아니라 클래스의 상속과 같은 사항으로 css의 문서는 점점 양이 많아지고 유지관리에 많은 영향을 끼친다.

 

CSS 전처리기 자체만으로는 웹서버가 인지하지 못하기 때문에 각 css전처리기에 맞는  compiler를 사용해야 하고 컴파일을 하게되면 우리가 실제 사용하는 css문서로 변환된다.

 

css 전처리기 중 가장 유명한 것은 SASS(Syntactically Awesome Style Sheets, css를 확장해 주는 스크립팅 언어)이다.

자바스크립트 처럼 자주 사용하는 특정 값들을 변수로 만들어 재사용할 수 있다. 

 

https://sass-lang.com/

Sass: Syntactically Awesome Style Sheets

하지만 이런 전처리기가 내부에서 어떤 작업을 하는지는 알지 못한 채, 스타일이 겹치는 문제를 해결하기위해 단순히 계층구조를 만들어 내는 것에 의지하여 컴파일된 css의 용량은 엄청나게 커지게 된다.

 

이런 css전처리기의 문제를 보완하기 위해 css 방법론이 대두되었고, 

css 방법론은 다음과 같은 공통 지향점이 있다.

1. 코드의 재사용
2. 코드의 간결화
3. 코드의 확장성
4. 코드의 예측성

여러 팀원들과 함꼐 작업하는 상황에서 규칙을 정해두는 것은 굉장히 중요한 일이다.

 

css방법론으로는 BEM, OOCSS, SMACSS 등이 있는데, BEM을 알아보자면,

출처 : https://keepinguptodate.com/pages/2020/05/bem-visually-explained/

Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법이다. 각 사이를  - ,  _ 로 구분한다.

클래스명은 BEM방식의 이름을 여러번 반복하여 재사용할 수 있어 더 일관된 코딩 구조를 만들 수 있지만, 클래스명 선택자가 장황해지고 ,긴 클래스명 때문에 마크업이 불필요하게 커지게 된다.

 

 

그렇게 하다 CSS-in-JS 가 탄생하고 css를 컴포넌트 기반의 방식으로 만들어지게 됩니다.

출처: 코드스테이츠

끄으읕