[CSS] CSS-in-CSS vs CSS-in-JS
개인 학습 과정에서 작성한 markdown 문서로 잘못된 내용이 존재할 수 있습니다.
잘못된 내용 또는 개선 방안을 말씀해주시면 수정하겠습니다.
CSS-in-CSS 와 CSS-in-JS
CSS 관련 학습 중 CSS-in-CSS 와 CSS-in-JS 라는 개념을 듣게 되어 학습 및 정리하게 되었습니다.
'웹 컴포넌트 스타일링 관리: CSS-in-JS vs CSS-in-CSS (우창균님)' 글을 참고하여 학습 및 정리하였습니다.
자세한 사항은 해당 게시글을 확인 부탁드립니다.
1. CSS (Cascading Style Sheets)
CSS는 1996년도에 처음 발표되어 사용되어졌는데, 이전의 웹 페이지는 HTML만으로 이루어져 디자인이 없는 투박한 모습만 보이는 웹페이지였습니다. (참고)
이후 CSS는 여러 발전을 해왔지만, 시간의 흐름에 따라 개발에 어려움을 겪게 되었습니다.
Vjeux 에 따르면 아래와 같은 사항들로 인해 CSS 작성에 어려움을 겪는다고 합니다.
아래의 사항 외에 몇가지 추가적인 내용이 있습니다.
- 모든 스타일들이 전역에 선언되어 class 이름들이 중복되지 않게 신경을 써야함
- CSS간 의존 관계를 관리하기 힘듦
- 불필요한 CSS 제거의 어려움
- JS 코드와 상태 값을 공유할 수 없는 문제
- CSS 로드 순서에 따라 스타일 우선 순위가 달라지는 문제
이러한 단점들을 보완하기 위해 CSS-in-CSS 와 CSS-in-JS 와 같은 방식을 사용하게 되었습니다.
2. CSS-in-CSS
1) CSS Module
CSS Module 은 CSS를 모듈화하여 사용하는 방식인데, 모듈화를 시키면 각 CSS 파일에서 클래스를 만들면 자동으로 고유한 클래스네임으로 만들어 줍니다.
따라서 여러 CSS 파일에서 동일한 클래스 이름을 사용해도, 고유한 이름으로 자동으로 만들어주기 때문에 이름이 겹치거나 중복되는 일을 방지할 수 있습니다.
또한, 클래스 명을 간단하게 만들 수 있고 지역적으로 제한하여 사용할 수 있다는 장점이 있습니다.
하지만, CSS 파일을 여러개로 나누어 따로 관리해야 한다는 단점이 있습니다.
2) CSS 전처리기(Preprocessor)
CSS 전처리기는 조건문, 반복문, 변수, 함수, 중첩 등 여러 기능을 제공하며 이를 통해 편리하게 CSS를 만들어냅니다.
그러나 웹에서 직접 동작이 불가하여 표준의 CSS 파일로 다시 컴파일을 진행하여야 한다는 단점이 있습니다.
대표적인 모듈로는 Sass, PostCSS, Less, Stylus 가 있습니다.
각 모듈별 사용량입니다.
Sass
전처리기 중 가장 먼저 나왔고, 초기 루비(Ruby) 언어를 기반으로 구동되었는데 루비의 한계로 컴파일 속도가 느려서 단점이 있었으나 Node.js 기반의 Node-sass 라이브러리가 나와서 많이 사용하게 되었습니다.
Less
트위터의 부트스트랩에 사용되면서 알려졌습니다.
Stylus
프로그래밍 언어의 특징을 많이 가지고 있어, 연산자나 함수, 루프 등을 자유롭게 사용할 수 있습니다.
3. CSS-in-JS
자바스크립트 코드에서 CSS를 작성하는 방식입니다.
대표적인 모듈로는 Styled-Components, jss, emotion 등이 있습니다.
npm 에서 설치 순위입니다.
참고 자료
- 블로그