CSS-in-JS 의 대안 (Css-in-CSS + Tailwind)

제가 처음 웹개발을 시작할때만 해도 HTML 문서에서, 순수하게 CSS 로 작업을 했었는데요. 프론트엔드 개발 환경이 발전하면서 CSS 도 프로그래밍 스럽게 관리할수 있는 CSS 모듈을 활용한 전처리기 Pre-Processor (sass, less) 가 인기를 얻었습니다. 그러다가 컴포넌트 개발 방식이 도입 되면서 최근에는 많은 프로젝트 에서 emotion 이나 styled-components 같은 CSS-in-JS 를 많이 사용하고 있는데요. CSS-in-JS 는 자바스크립트로 CSS 를 관리할수 있습니다. JSX 는 마크업과 스크립트 를 동시에 작성할수 있게 하여서 '컴포넌트' 유닛으로 관심사를 분리하였는데요. CSS-in-JS 는 JSX 에 더해서 CSS 까지 포함할수 있게 해줍니다. (JSX + C? 흠.. 적다보니 vue 스럽기도 하군요) CSS in JS 는 어떤 장단점이 있을까요? 장점. 1. Locally-scoped styles(좁은 지역 범위 스타일) : CSS 는 전역적으로 관리 되어서 중복 적용 되어 실수할 가능성이 큽니다. 이를 해결하기 위해 더 긴 클래스 이름이나 구체적인 css selector 를 사용해야 하는데요. 이는 개발자의 몫이고 어렵지는 않지만 조금 번잡스러울수 있습니다. 하지만 Css-in-JS 는 Local 범위로 구성이 되기 때문에 이러한 문제를 해결해줍니다. 2. Co-location: 코드를 구성하는좋은 방법중 하나는, 단일 구성 요소와 관련된 파일을 같은 위치에 포함하는 것입니다. CSS 는 위치에 관계없이 전역적으로 적용 되기 때문에 Co-location 을 구현하기 어렵습니다. CSS-in-JS 는, JavaScript 로 관리 되기 때문에 컴포넌트 레벨에서 모듈화가 가능합니다. 3. Sharing Constants: JavaScript 와 CSS 간에 상태나 함수 공유가 가능합니다. 4. Dead Code Elimination: JavaScript 로 개발하기 때문에, 미사용 코드 검출 용이 합니다. CSS 는 사용되지 않는 코드를 검출 하지 못합니다. 5. HTML, CSS, JavaScript 와 같이 커다란 단위의 목적을 기준으로의 분리가 아닌, 스타일을 포함한 컴포넌트 단위로 분리가 가능합니다. 단점. 1. Runtime overhead: 자바스크립트 해석 과정이 필요하기 때문에, CSS 로 변환되고 Document 에 삽입 되면서 추가적인 CPU 를 사용합니다. 2. 번들 사이즈 증가: CSS-in-JS 를 사용하려면 해당 라이브러리를 다운로드 해야 하며 이는 런타임 bundle 사이즈의 증가를 의미합니다. 3. Clutters React DevTools: 각각의 CSS-in-JS 속성들이 ReactDevTool 에 포함됨으로써, 디버깅 가독성을 저하 시킵니다. 4. 느린 렌더링 속도: CSS-in-JS 는 렌더링되는 구성요소가 굉장히 많고, 런타임에 스타일을 생성하기 위한 동작이 일어납니다. 국, 내외 여러 블로그 글을 참고 해보면 CSS-in-CSS 보다 약 50% 정도 더 느린걸로 보입니다. 최근에는 이러한 단점들 때문에 CSS-in-CSS (scss) + 유틸리티 클래스(Tailwind, Bootstrap) 의 도입도 논의되고 있습니다. CSS-in-JS 의 이점을 유지하면서도 일반 CSS 와 유사한 성능을 가진 스타일링 시스템을 어느정도는 구축할수 있다고 합니다. 모든 기술에는 장단점이 있습니다. 이러한 장단점을 명확히 인지하고 라이브러리가 넘쳐나는 웹개발 환경에서 프로젝트에 적합한 적정 기술을 선택 하는 것도 모던 엔지니어의 능력중 하나인것 같습니다.

Why We're Breaking Up with CSS-in-JS

DEV Community

Why We're Breaking Up with CSS-in-JS

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2022년 10월 22일 오전 7:19

 • 

저장 81조회 10,072

댓글 6

함께 읽은 게시물

AI시대 필요한 요구문서와 협업방법

... 더 보기

Confluence Mobile - WEBNORI

wiki.webnori.com

Confluence Mobile - WEBNORI

< '시간이 없다'는 세상에서 가장 흔한 거짓말 >

1. 오랜만에 만난 사람은 늘 어색하다. 뭔가 말을 건네야 한다. 인사 없이 지나가긴 애매하다. 하지만 대화 주제는 많지 않다. 날씨, 뉴스 얘기 몇 마디는 어떻게 해본다. 하지만 가장 어려운 건 마무리다.

... 더 보기

데이터 엔지니어로 성장하고 싶다면~

🍀 데이터 엔지니어란? 소프트웨어 엔지니어링과 프로그래밍의 업무 역량 사이의 간극을 메우는 전문가로 데이터 엔지니어는 고급 분석 기술, 강력한 프로그래밍 기술, 통계적 지식, 빅데이터 기술에 대한 명확한 이해를 갖춘 사람입니다. 🍀 데이터 엔지니어는 어떤 일을 하나요? 정형 및 비정형 데이터에 쉽게 액세스할 수 있는 데이터 인프라를 설계, 관리, 테스트, 유지, 저장하고 작업을 하며, 대규모 데이터 처리를 탐색하고 확장 가능하고 안정적인 작업 환경을 보장하기 위해 전문 지식과 소프트 스킬 필요 🔱 서버와 애플... 더 보기

15+ Must Have Data Engineer Skills in 2023

Knowledgehut

15+ Must Have Data Engineer Skills in 2023

어려운 문제를 대하는 태도



... 더 보기

바이브 코딩? 소버린 AI? 2025년 상반기 정리 및 하반기 AI 트렌

1

... 더 보기

바이브 코딩? 소버린 AI? 2025년 하반기 AI 트렌드 예측 : 오호츠크 리포트

55check.com

바이브 코딩? 소버린 AI? 2025년 하반기 AI 트렌드 예측 : 오호츠크 리포트

실력 향상을 위한 해외 유튜브 채널 10개

취업 준비와 코딩 공부할 때 도움 되는 해외 유튜브 채널 10개를 간략하게 소개합니다. 1. Gaurav Sen: https://www.youtube.com/@gkcs - 전반적인 개발자 성장(특히 주니어와 시니어), 취업, 코딩 공부 노하우 - 시스템 설계의 기초 개념 설명 영상이 많다. 특정 시스템 설계를 분석하거나 모의 면접하는 영상이 꽤 많지만 개인적으로 설명이 겉도는 느낌이 있다 - 주니어+/중니어+에게 특화된 취업 및 공부 노하우 2. Abdul Bari(컴공 전공, 알고리즘 공부 필수 채널): https:... 더 보기

Gaurav Sen

www.youtube.com

Gaurav Sen

 • 

저장 294 • 조회 8,686