CSS-in-CSS
CSS 모듈
- CSS를 모듈화하여 사용
- 자동으로 고유한 클래스네임을 만듦
- 동일 프로젝트 소스 안에 CSS 클래스 이름이 중복되어도 새로운 이름이 입혀짐 → 중복 및 관리의 위험성이 적고, CSS 규칙이 간소화됨
CSS 전처리기
- 자신만의 특별한 구문을 가지고 CSS를 생성하는 프로그램
- CSS 코드를 기계가 이해할 수 있는 일반적인 CSS 코드로 컴파일해주는 역할
- Sass, Less, Stylus
- 장점
- 공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체할 수 있음
- 임의 함수 및 내장 함수로 인해 개발 시간과 비용 절약
- 중첩, 상속과 같은 요소로 인해 구조화된 코드 유지 및 관리 용이
- 단점
- 전처리기를 위한 도구 필요
- 다시 컴파일하는데 시간 소요
컴파일 방법
- Sass(SCSS)는 웹에서 직접 동작할 수 없음
- 자바스크립트 개발 환경에서 추천하는 방법
- SassMeister: 페이지 접속 후 Sass나 SCSS 문법으로 코딩하면 CSS로 실시간 변환됨
- Webpack (style-loader, css-loader, sass-loader, sass)
- Parcel: HTML의 에 SCSS/Sass 파일만 연결하면 됨
- Vite: Sass(SCSS)를 지원함. 간단하게 설치 후 바로 사용 가능
Sass
- CSS 코드를 변수, 믹스인, 확장 등의 기능을 사용하여 보다 효율적으로 작성 가능
- 코드의 재사용성과 일관성을 높일 수 있음
- 루비 언어 기반이나 컴파일 속도가 느려 Less에 추월당함
- Node-sass라는 Node.js 기반의 라이브러리가 나옴
SCSS는 뭐지?
- Sass의 3버전에서 새롭게 등장
- CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합
왜 파일명 앞에 언더바를 붙일까?
- 언더바(
_)가 있는 scss 팡리명은 빌드할 때 하나의 scss 파일로 묶여진다.
Less
- 트위터의 부트스트랩에 사용되면서 알려짐
- 자바스크립트 문법
Stylus
- 프로그래밍 언어의 특징을 많이 가짐
- CSS 프로퍼티 내에서 연산자나 함수, 루프 등을 비교적 자유롭게 사용
CSS-in-JS
- 자바스크립트 코드에서 CSS를 작성하는 방식
styled-components
- 자바스크립트 태그가 지정된 템플릿 리터럴과 CSS의 기능을 사용하여 구성 요소에 반응하는 스타일 제공
- 장점
- CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화
- js 환경을 최대한 활용
- js와 css 사이의 상수와 함수를 공유
- 현재 사용 중인 스타일만 DOM에 포함
- 짧은 길이의 유니크한 클래스를 자동으로 생성하는 코드 경량화
- 단점
- 러닝 커브
- 새로운 의존성 발생
- 번들 크기 증대
- CSS-in-CSS에 비해 느린 속도
emotion/react
- 일반 js 프로젝트에서는
@emotion/css패키지 설치 /** @jsxImportSource @emotion/react */를 작성: 바벨 트랜스파일러한테 jsx 코드를 변환할 때, 리액트의 jsx() 함수를 사용하지말고 emotion의 jsx()함수를 대신 사용하라고 알려주기 위함- 이렇게 해줘야 css prop에 넘어간 스타일이 제대로 반영됨!
- 예시 코드
/** @jsxImportSource @emotion/react */ import { css } from "@emotion/react"; function MyComponent() { return ( <div css={css({ backgroundColor: "yellow", })}> 노란색 영역 </div>); }
빌드타임과 런타임
- 빌드타임: 애플리케이션 코드를 프로덕션 환경에 적합한 형태로 준비하는 일련의 단계
- 정적으로 생성된 페이지를 위한 HTML 파일
- 서버에서 페이지를 렌더링 하기 위한 js 코드
- 클라이언트에서 페이지를 인터렉티브하게 만들기 위한 js 코드
- css 파일
- 런타임: 애플리케이션이 빌드되고 배포된 후 사용자의 요청에 응답하여 실행되는 기간
CSS-in-CSS vs CSS-in-JS
| CSS-in-CSS | CSS-in-JS | |
|---|---|---|
| 장점 | - 분리된 관심사 - 전역 관리 - 속도(별도의 CSS 파일을 사용하면 브라우저 캐싱 가능 → 성능 향상) | - 컴포넌트 기반 구조 - 동적 스타일링(js를 사용하여 스타일 생성) - 코드 재사용 및 모듈화 - 벤더 프리픽스 자동화 가능 |
| 단점 | - 동적 스타일링 제한(js를 사용하여 클래스를 조작하거나 인라인 스타일을 적용해야 함) - 코드의 재사용 어려움 | - 러닝커브 있음 - 웹 브라우저에서 CSS 파일을 캐시할 수 없기 때문에 ,초기 렌더링 속도가 느림 |
벤더 프리픽스란?
브라우저 호환성을 위해 필요한 접두사를 의미
transform 속성의 경우, Chrome, Safari, Firefox 등의 브라우저에서 각각 -webkit-transform, -moz-transform, -ms-transform 과 같은 접두사를 붙여야 하나 CSS-in-JS에서는 이를 자동으로 추가해줌
CSS-in-CSS와 CSS-in-JS에서 속도 차이가 나는 이유
- CSS-in-CSS는 웹 브라우저가 CSS 파일을 캐시하기 때문에 새로고침할 때마다 서버에서 CSS 파일을 가져오지 않고 캐시된 파일 사용
- 초기 로딩 속도에 민감할 경우 CSS-in-CSS 방법론이 적합
레퍼런스
