css-in-js 와 css-in-css

 

 

 

 

html을 꾸며주기 위해 등장한 css

 

하지만 웹이 복잡해지고 동적 기능 요구가 증가하며 html 과 css 로는 모든 스타일링을 제어하기 어렵게 되었다.

이를 해결하기위해 css-in-css 가 등장했다

 

 

 

 

 

css-in-css

 

css 모듈은 css를 모듈화하여 사용하는 방식이다.

고유한 클래스네임을 만들어서 scope를 지역적으로 제한한다

 

클래스 이름이 중복되어도 새로운 이름이 입혀지기 때문에 중복 위험성이 적다.

 

 

 

 

 

css 전처리기

 

자신만의 특별한 구문을 가지고 css를 생성하는 프로그램

 

공통 요소 또는 반복적인 항목을 함수로 대체할 수 있는 재사용성, 중첩-상속과 같은 요소로 구조화 된 코드를 유지할 수 있다는 장점이 있다.

다만 전처리기를 위한 도구가 필요하고 웹에서 동작 가능한 표준의 css로 다시 컴파일하는데 시간이 소요된다.

 

 

 

Sass & Scss

 

 

Sass 는 css 전처리기로 가장 먼저 나왔으며 선택자의 중첩, 조건문, 반복문 등 표준 css보다 많은 기능을 사용해서 편리하게 작성한다.

scss 는 sass의 3버전에서 새롭게 등장했고 sass의 모든 기능을 지원하는 상위 집합이다.

 

선택자의 유효 범위를 sass는 들여쓰기로 구분하고

scss는 {}로 범위를 구분한다.

 

 

 

 

 

css-in-js

 

자바스크립트 코드에서 css를 작성하는 방식

 

js를 css로 컴파일하며 런타임 및 서버 사이드에서 작동함

 

 

- Global namespace: 글로벌 공간에 선언된 이름의 명명 규칙 필요
- Dependencies: CSS간의 의존 관계를 관리
- Dead Code Elimination: 미사용 코드 검출
- Minification: 클래스 이름의 최소화
- Sharing Constants: JS와 CSS의 상태 공유
- Non-deterministic Resolution: CSS 로드 우선 순위 이슈
- Isolation: CSS와 JS의 상속에 따른 격리 필요 이슈

 

css 모델을 컴포넌트 레벨로 추상화하여 짧은 길이의 유니크한 클래스를 자동으로 만들어주며 필요한 컴포넌트 페이지의 css 스타일 요소만 로딩합니다.

 

 

 

 

 

 

단점

 

별도의 라이브러리를 설치해야함

사이트를 방문하는 사용자가 css-in-js 라이브러리용 자바스크립트를 다운로드 해야하기 때문에 번들 크기를 늘림

js로 읽기 때문에 css-in-css에 비해 느림

 

초기 렌더링에 필요한 css를 추출하고 이후 동적인 스타일은 runtime 환경에서 돌아가기 때문에 브라우저 부담이 커짐

ui 라이브러리 사용시 호환성 면에서 에러 날 수 있음

class name에 자동으로 이름을 부여해 클래스 네임을 겹치지 않게 하는데 이는 디자이너 협업시에 좋지 못한 경험을 줄 수 있음

(이는 라벨링 방식으로 해결할 수 있으나 코드가 늘어남) - https://emotion.sh/docs/labels

 

 

 

 

styled-components - emotion.js

 

 

대표적인 css-in-js

 

 

 

emotion.js 

 

 

 

장점

 

스타일 컴포넌트보다 크기가 작음

10버전 이상부터는 ssr 사용시 따로 설정하지 않아도 됨 (스타일 컴포넌트는 따로 설정 필요)

 

=> next.js는 프로젝트 빌드할 때 css파일을 따로 chunk 파일로 만드는데, html-js / css 따로 묶임

build 시점에 의존된 js html을 묶어 미리 html 페이지를 만들어두고 있다가 요청이 오면 html을 넘기는 방식

 

그리고 이후에 클라이언트에서 css chunk 파일을 호출하여 css 를 적용하는데

로드되는 css 데이터가 느린경우 css가 적용되지 않은 날 것의 html이 보여진다

 

이를 방지하기 위해 html head 태그에 css 파일을 import 해주어야함

 

 

 

단점

 

emotion의 jsx 문법으로 읽으라는 JSX Pragma를 작성해주어야함

 

 

 

 

 

 

 

 

 

 

 

느낀점

 

 

 

 

 

단순히

 

클래스 네임 겹칠 위험 없고

조건부 렌더링하기 편하고

컴포넌트 단위로 코드를 작성할 수 있어 가독성이 좋다~

 

정도로만 알고 css-in-js 를 썼었고

당연하게 css-in-js 써야하는 거 아닌가~ 하는 생각을 했었는데

 

css-in-css 가 좀 더 빠르기 때문에 프로젝트에서 UI 라이브러리를 사용한다면

굳이 css-in-js 를 가져갈 이유가 없다는 생각이 들었다

 

 

역시 스택은 프로젝트 특징에 따라 쓰는게 맞는 거 같다 👍

 

 

 

 

 

 

 

 

참고자료 

https://heropy.blog/2018/01/31/sass/

https://www.samsungsds.com/kr/insights/web_component.html

https://ideveloper2.dev/blog/2019-05-05--thinking-about-emotion-js-vs-styled-component/