CSS in JS vs CSS in css
목차
- CSS in JS
- CSS in css
CSS in JS
자바스크립트 코드에서 CSS를 작성하는 방식- 동적 스타일 적용에 자유로움
- 컴포넌트 기반의 프레임워크를 사용할 때 용이함
개발 효율성에 중점을 둔컴포넌트위주의 프로젝트의 경우 CSS in JS를 지향함- 필요한 컴포넌트 페이지의 CSS 스타일 요소만 로딩함
- 대표적인 라이브러리 : styled-component, emotion, …
CSS in css
CSS코드를 모듈화하여 사용하는 방식- CSS 모듈
- CSS 클래스 중복 해결
- 네이밍 규칙 간소화
- 클래스 재사용 용이
- 유지 보수가 어려움
- CSS 전처리기 : 전처리기의 자신만의 특별한 syntax를 가지고 CSS를 생성하도록 하는 프로그램(일반적인 프로그래밍 개념을 사용하여 보완함)
- 공통 요소를 변수 또는 함수로 대체할 수 있는 재사용 가능
- 임의 함수 및 내장 함수로 인해 개발시간과 비용 절약
- 조화된 코드 유지 및 관리 용이
- 전처리기를 위한 도구가 필요하고 다시 컴파일하는데 시간이 소요
사용자 편의에 중점을 둔인터렉티브한웹 프로젝트의 경우 CSS in css를 지향함- 렌더링할 때 모든 CSS 스타일 요소를 로딩하기 때문에 컴포넌트 상대가 변하더라도 바로 적용이 가능
- 대표적인 라이브러리 : SASS, Less, …
출처