[Web] CSS를 어떻게 작성해야 할까?

CSS..

쉽지만 쉽지 않은 순간이 있고,

어려울땐 한없이 어려운 CSS

 

작성방법

 - CSS 파일에 작성

 - CSS-in-JS

 - Utility-First 등등

 

기존 CSS 작성 시 문제점

 - Global namespace: 모든 스타일을 global에 선언하기 때문에 별도의 class 네이밍 규칙을 적용해야함 ex) BEM

 - Dependencies: 하나의 element에 여러 CSS룰이 적용되기 때문에 모든 스타일을 개발자가 기억해야 하는 문제

 - Dead Code Elimination: CSS가 JS와 분리되어 관리되기 때문에 기능 변경에 따른 동기화 문제 발생

 - Minification: 중복 제거를 위해 긴 클래스 이름 사용해 문서 사이즈 커질 수 있음

 - Sharing Constants: CSS가 분리되어 있어 JS의 상태 값을 공유하기 어려움

 - Non-deterministic Resolution: CSS 로드 순서에 따라 우선순위가 달라지기 때문에 CSS 로드 순ㄴ서를 기억해야 함

 - Isolation: CSS는 부모로부터 스타일을 상속하므로 하위 컴포넌트가 영향을 받음

 

CSS-in-JS가 위의 문제점 해결

 - Global namespace: class 명이 빌드 타임에 유니크하게 변경되기 때문에 별도의 네이명규칙이 필요 없음

 - Dependencies: CSS가 컴포넌트 단위로 추상화되기 때문에 CSS간 의존성 고려할 필요 없음

 - Dead Code Elimination: 주로 컴포넌트와 CSS가 동일한 파일내에 존재하기 때문에 수정 및 삭제가 용이

 - Minification: 빌드 타임에 짧은 길이의 유니크한 클래스를 자동으로 생성하여 문서의 볼륨을 낮춰줌

 - Sharing Constants: CSS 코드가 JS에 작성되므로 컴포넌트 상태 공유가 가능

 - Non-deterministic Resolution: CSS가 컴포넌트 스코프로 적용되므로 우선순위에 따른 문제가 최소화

 - Isolation: CSS가 컴포넌트에 격리되어 있기 때문에 상속 문제가 없음

 

처음에는 환호했지만, 단점이 보이기 시작함

-> 기존 스타일과 디자인 시스템을 재사용해야하는 필요성이 있음을 발견 

-> 전통방식은 '분업에 용이하다' 라는 장점이 있음

-> CSS Module도 대체 가능한 옵션 (CSS-in-JS처럼 컴포넌트 단위로 추상화 가능)

-> 렌더링 속도에 영향을 줌, CSS-in-JS 방식은 자바스크립트에 CSS코드가 입력되기 때문에, 페이지 로딩 시 구문 분석 과정이 필요하다. 반면, CSS Module 방식은 빌드타임에 온전한 css파일로 변환되므로 추가적인 구문 분석이 필요하지 않는다. 

 

CSS Module vs styled-components 

조건

첫 페이지에서 두 번째 페이지로 넘어갈 때 소요시간 측정

 - main번들의 소요 시간 때문

 - 대부분의 컴포넌트는 두 번째 페이지에 존재

 - 크롬의 성능탭에서 CPU 성능 6x 감속

 

결과

Scripting에서 2배 가까운 차이가 발생함 (styled-components: 483ms, CSS Module: 265ms)

CSS-in-JS 방식은 CSS코드를 변환하는 과정이 필요하기 때문, 동적으로 CSS가 추가되는 구조라면 아무래도 느릴 수 밖에 없음

 

상황에 따라 적절하게 선택하자

 

 

 

 

https://fe-developers.kakaoent.com/2022/220210-css-in-kakaowebtoon/

카카오웹툰은 CSS를 어떻게 작성하고 있을까? | 카카오엔터테인먼트 FE 기술블로그