styled-components( CSS - in - JS )에서는 클래스 네이밍을 자동으로 생성해주어 겹칠 가능성이 없지만 CSS로만 구현하면 모든 스타일을 global에 선언하기 때문에 중복되는 경우가 발생할 수 있다. 이러한 불편함을 해결하기 위해 "BEM" 이 자주 사용된다.
1. BEM
CSS 제작 방법으로 일종의 네이밍 컨벤션 이다. 기본적으로 class 만 사용하며, " 목적 " 에 따라 네이밍 하는 것이 특징이다.
{ Block }__{ Element }--{ Modifier }
ex. Header__navigation--navi-text { /.../ }
> 참고 : CSS-네이밍 컨벤션- BEM
2. Utility-First ( Tailwind, Bootstrap )
Utility-First [유틸리티 우선] - Atomic CSS
시멘틱 네이밍 원칙에서 아예 벗어나 시각적인 요소를 표현하는 원자단위 클래스를 미리 선언.
사실 CSS-In-JS 라이브러리는 크게 1. run-time 2. compile -time 두 분류로 나뉜다.
Styled-component, Emotion은 전자 1. run-time에 속한다.
1번은 몇 가지 문제가 있는데 * 런타임에 스타일이 직렬화되어 오버헤드가 발생하여 성능에 부정적 영향을 준다.
* 라이브러리로 인한 번들사이즈 증가
* React Devtools 를 복잡하게 만든다.
* SEO에 부적함, 런타임에 헤드의 끝에 스타일 시트를 삽입하기 때문
SSR 환경에서 CSS-in-JS는 퍼포먼스 측면에서 태생적 한계를 가진다.
---
Atomic CSS 는 1. 높은 DX, 2. SSR환경에서 높은 퍼포먼스 3. 네이밍 불필요
단점으로는 나쁜 가독성 / 단독으로 사용 불가(before,after xx) ,/ 독단적인 네이밍으로 인한 러닝 커브 / 변수를 통한 동적 프로퍼티 지정 불가능.
카카오는 TailwindCSS와 twin.macro(atomic + CSs-in-JS를 결합해서 사용 중.
> 참고