CSS in JS 란 무엇인가?

CSS in JS란 자바스크립트 코드 내에서 CSS를 작성하는 기술을 말한다. 

 

CSS와 자바스크립트는 분리되어야 더욱 좋다고 생각할 수 있다. 그렇다면 왜 이러한 방식이 등장했는지 살펴보자.

 

1. Global Namespace

CSS는 전역 네임스페이스를 갖는다. 즉 html의 어떤 태그나 클래스라도 css의 selector가 될 수 있고, 하나의 css rule을 여러 element가 적용 받을 수 있다. 이러한 문제를 해결하기 위해 BEM 등의 방법론이 등장 했지만 근본적인 문제는 해결하지 못한다.

 

CSS in JS는 스타일을 자바스크립트로 정의하기 때문에 lexical scope에 한정된다.

 

2. Implicit Dependencies

하나의 CSS rule은 여러 selector를 가지면서 서로다른 html element에 적용될 수 있는데, 각 html element는 여러 className과 속성을 가지면서 여러 CSS rule을 적용받을 수 있다. 이 의존관계는 N:M이다. 이 관계는 명시적이지 않기 때문에 개발자가 기억해야한다는 것이다.

 

CSS in JS는 이러한 의존 관계를 보다 명확하게 나타내준다. 

 

3. Dead Code Elimination

만약 작성된 CSS가 있는데, 사용되고 있는지, 사용되지 않고 있는지 (Dead code) 파악하기 힘들다. 이러한 dead code는 웹사이트의 퍼포먼스에 안좋은 영향을 미칠 수 있다.

 

CSS in JS는 linter혹은 minifier의 도움으로 현재 사용되지 않는 style variable을 간단히 제거할 수 있다.

 

4. Non-deterministic Resolution

CSS에서 우선순위를 결정하는 과정에서 발생하는 문제로, 동일한 스타일 규칙에 대해 다른 브라우저에서 다르게 해석될 수 있다.

먼저 CSS에서 우선순위를 결정하는 방법은 다음과 같다. (우선 순위)

1. !important 키워드가 지정된 스타일 규칙

2.인라인 스타일(style 속성으로 지정된 스타일)

3. 아이디 선택자로 지정된 스타일 규칙

4. 클래스 선택자로 지정된 스타일 규칙

5. 태그 선택자로 지정된 스타일 규칙

6. 전체 선택자로 지정된 스타일 규칙

 

그러나 문제는 다음과 같은 상황에서 발생한다.

1. 스타일 규칙의 우선순위가 같은 경우

2. 스타일 규칙이 중첩되어 있는 경우

3. 상속된 스타일이 있는 경우

 

CSS in JS는 고유한 클래스 이름을 생성하여 CSS 스타일 규칙을 동적으로 적용한다. 이에 따라 스타일 규칙을 다른 요소에 적용하는 것을 방지할 수 있다. 또한 컴포넌트에 필요한 스타일 규칙만 작성하므로 중복된 스타일 규칙을 제거하고 상속을 최소화 하는것이 가능하다. 게다가 자바스크립트의 기능을 사용하여 스타일 규칙을 동적으로 생성하므로 브라우저에서 사용하는 CSS 해석 엔진에 의존하지 않아 해당 문제를 해결할 수 있다.

---

CSS in JS 의 장단점

 

장점

1. 관심사 분리

CSS in JS는 CSS와 자바스크립트를 결합하여 사용하므로 스타일 규칙과 해당 컴포넌트를 함께 정의할 수 있다. 이를 통해 CSS와 자바스크립트의 관심사를 분리시킬 수 있다. (다른 컴포넌트와 명확한 구분)

 

2. 컴포넌트 수준의 스타일링

스타일 규칙의 범위가 컴포넌트 수준으로 제한된다. 따라서 코드의 가독성과 유지보수성이 향상된다.

 

3. 런타임에서 스타일링

스타일 규칙을 런타임에 생성하므로 동적으로 스타일 규칙을 변경할 수 있다. 이를 통해 더욱 유연하고 동적인 UI를 구현할 수 있다.

 

4. 코드분할

코드를 작은덩어리로 분할하여 불필요한 스타일 규칙이 로드되는것을 방지하고 이를 통해 페이지 로드시간을 최적화 할 수 있다.

 

단점

1. 러닝커브

CSS와 다른 방식으로 동작하므로 새로운 개념을 익혀야 하고, 그 원리를 이해해야 한다.

 

2. 성능

CSS in JS는 런타임에서 스타일 규칙을 생성하므로 브라우저에서 렌더링할 때, 일부 성능 저하가 발생할 수 있다. 이러한 성능문제를 해결하기 위해 코드를 최적화 하고 적절한 방식으로 코드를 분할해야 한다.

 

 

---

참고

https://blog.eunsukim.me/posts/introducing-css-in-js

CSS-in-JS는 왜 만들어졌나?

https://code-masterjung.tistory.com/90

CSS-in-JS