<aside> 📌 요약: CSS import방식은 기존 바닐라에서 코딩하던 그 방식이고, CSS module은 class name 뒤에 hash를 붙여 스타일이 겹치는 상황을 해결했다. 두 단어 이상의 경우 class명을 camelCase로 이름을 짓는다. CSS-in-js에서는 JS문법을 활용할 수 있고 Sass문법 활용이 가능하다.
Sass는 CSS를 프로그래밍 언어처럼 사용가능하도록 확장한다. &는 자기 자신을 나타내고 $를 활용해 변수값을 설정 가능하다. nested style로 하나의 block안에 여러 CSS를 적용할 수 있다. (depth는 1층만 권장) @mixins, @import, @include를 통해서 여러 스타일을 묶어 적용할 수 있다.
styled-components는 별도의 CSS파일을 만들지 않고 하나의 파일 안에 스타일을 관리하고 싶을때 사용한다. `으로 tagged template literal이라는 문법을 사용한다. Sass적용, hash를 통해 겹치지 않게 처리. 상속을 통해 코드 재사용, 확장이 가능하고 props를 줘서 스타일 분기가 가능하다.
</aside>