🧑🏻🎨 CSS, CSS in CSS, CSS in JS
- CSS
- 모든 스타일이 global에 선언되어 중복되지 않는 class 이름을 적용해야 합니다.
- css의 가장 대표적인 문제점으로 어디에 선언하더라도 항상 global namespace를 가진다. - CSS 로드 순서에 따라 스타일 우선 순위가 달라지는 문제가 있습니다.
- 기능 추가, 변경, 삭제 과정에서 불필요한 CSS를 제거하기 어려운 문제가 있습니다.
이러한 문제점 등으로 CSS 전처리기가 등장합니다.
- CSS in CSS
2-1. SASS
CSS 전처리기(CSS Preprocessor)는 모듈별로 특별한 Syntax를 가지고 있고 여기에 믹스인(mixin), 중첩 셀렉터(nesting selector), 상속 셀렉터(inheritance selector) 등 Programmatically 한 요소를 접목해 방대해지는 CSS 문서의 양을 효율적으로 처리하고 관리해 주는 통합적인 단어를 말한다. 이 CSS 전처리기(CSS Preprocessor) 자체만으로는 웹 서버가 인지하지 못하기 때문에 각 CSS 전처리기에 맞는 Compiler를 사용해야 하고 컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환이 된다.
- 개념 : Syntax에 맞게 코드를 작성하고 컴파일러를 통해서 css 파일로 결과물이 나오는 구조입니다.
- CSS의 문제점을 프로그래밍 방식, 즉 변수·함수·상속 등 일반적인 프로그래밍 개념을 사용하여 보완합니다.
- 공통 요소나 반복적인 항목을 변수 또는 함수로 대체 가능합니다.
- 중첩, 상속과 같은 요소로 인해 구조화된 코드로 유지 및 관리가 용이합니다.
- 어떤 CSS가 적용될 지 예측하기가 어렵습니다.
- 단점 :
CSS 전처리기(CSS Preprocessor)는 Programmatically 한 요소를 접목했기 때문에 분기문 처리, 변수의 이해, mixin의 이해 등 개발적인 요소를 알아야 하기 때문이다. Learning curve가 낮다는 장점은 순전히 개발자에 한해서이다.
2-2. CSS Modules
- 개발자가 클래스명이 겹치지 않도록 관리해야 하는 SASS나 BEM의 단점을 극복할 수 있습니다.
- 모든 스타일에 동적으로 파일에 선언된 CSS 선택자에 고유한 해시 문자열을 추가하여 CSS 속성이 겹치지 않게 만드는 방식입니다.
- 컴포넌트를 작성할 때 한 곳에서 모든 것을 작성하지 않고, 따로 CSS 파일을 만들어줘야 하며 관리하는데 어려움이 있습니다.
- CSS in JS
- 말 그대로 자바스크립트 코드에서 CSS를 작성하는 방식을 말합니다.
- 하나의 컴포넌트에 CSS를 작성하여 컴포넌트를 더욱 쉽게 관리할 수 있습니다.
- class명이 build time에 유니크한 해시값으로 변경되기 때문에 별도의 명명 규칙이 필요하지 않습니다.
- CSS가 컴포넌트 단위로 추상화되기 때문에 CSS 파일(모듈)간 의존성을 신경쓰지 않아도 됩니다.
- JS에 CSS 코드를 작성하므로 컴포넌트의 상태에 따른 동적 코딩이 가능하여 활용성이 높습니다.
- props 기능을 통해 변수를 넘겨받고 받은 변수에 따라 스타일 속성이 가능합니다.
결론
- CSS in JS는 파일이 컴파일 될 때 CSS로 변환해주는 장치가 필요합니다. 라이브러리가 추가되면서 번들의 크기가 커집니다. 때문에 초기 진입이 느려지고, JS가 모두 로딩된 뒤에 CSS코드가 생성되기 때문에 더욱 느려질 수 있습니다.
- 웹 서비스의 용도에 따라 어떤 스타일 스크립트 언어를 사용할 지 고민해보는 과정이 필요하다는 것을 느꼈습니다.
참고 :
https://kdydesign.github.io/2019/05/12/css-preprocessor/
https://www.samsungsds.com/kr/insights/web_component.html
뚜벅뚜벅