[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 가 있습니다.

 

각 모듈별 사용량입니다.

https://2021.stateofcss.com/ko-KR/technologies/pre-post-processors

Sass

전처리기 중 가장 먼저 나왔고, 초기 루비(Ruby) 언어를 기반으로 구동되었는데 루비의 한계로 컴파일 속도가 느려서 단점이 있었으나 Node.js 기반의 Node-sass 라이브러리가 나와서 많이 사용하게 되었습니다.

 

Less

트위터의 부트스트랩에 사용되면서 알려졌습니다.

 

Stylus

프로그래밍 언어의 특징을 많이 가지고 있어, 연산자나 함수, 루프 등을 자유롭게 사용할 수 있습니다.

 

 

3. CSS-in-JS

자바스크립트 코드에서 CSS를 작성하는 방식입니다.

대표적인 모듈로는 Styled-Components, jss, emotion 등이 있습니다.

 

npm 에서 설치 순위입니다.

https://www.npmtrends.com/emotion-vs-glamorous-vs-jss-vs-styled-components-vs-radium

---

참고 자료

- 게시글
- 블로그

- 블로그