CSS와 CSS3( = CSS modules)의 가장 큰 차이점은 CSS3가 모듈 기반으로 개발되고 있다는 점
📌 순수한 CSS
순수한 CSS는 CSS 파일 간의 값을 공유할 수 없다.
프로젝트의 규모나 복잡도가 커질수록 공유해야 하는 값을 빼먹는 등 실수할 일이 많아진다.
📌 SCSS
CSS의 확장판
variable, import, Nesting 등을 활용하여 복잡한 코드를 쉽게 작성하는데 도움을 주는 언어
비슷한 언어로 Less, Sass가 있음
@import 구문을 사용하면 다른 Sass 파일을 불러올 수 있으므로 방대한 CSS 파일을 관리하기 쉽게 모듈화 할 수 있고, 나누어 작업을 할 수 있게 되었다.
// theme.scss
.button { font-size: 20px; }
// button.scss
.button { font-size: 30px; }
// style.scss
@import 'theme', 'button';파일을 분리했음에도 불구하고, 내부에서 button class에 font-size를 중첩 선언하여 어떤 것이 먼저 적용될지 가늠이 되지 않는다.
이런 문제로 인해 BEM이 나오게 된다.
또한, 브라우저는 SCSS의 문법을 이해할 수 없기 때문에 CSS 파일로 변경해주는 컴파일러가 필요하다.
📌 BEM
CSS 내에서 이름이 중복되지 않도록 CSS 아이디와 클래스를 명명하는 방법론
- Block : 재사용이 가능한 기능적으로 독립적인 컴포넌트
- Element : Block을 구성하는 한 부분으로, Block은 독립적이지만 Element는 Block에 의존적인 형태 (Block 뒤에 __를 붙여주고 Element 이름을 붙여야함)
- Modifier : Block이나 Element에 변화를 줄 수 있는 값으로, 생김새가 다르거나 다른 행동을 해야할 때 사용 (Element나 Block 뒤에 --를 붙여줌)
BEM은 컴포넌트 단위로 CSS를 관리할 수 있다는 장점이 있는 반면, 단순한 코드 명명 규칙이기 때문에 모든 개발자가 이해하고 있어야 하고 어떻게 사용할지 이해해야 한다.
또한, class 이름이 길어지고 길어진 이름을 매번 코드에 입력하며 관리해야 한다는 단점이 있다.
📌 CSS Modules
Sass나 BEM의 경우 손수 개발자가 클래스가 겹치지 않도록 관리해야 하나, CSS Modules는 모든 스타일에 동적으로 파일에 선언된 CSS 선택자에 고유한 해시 문자열을 추가하여 CSS 속성이 겹치지 않게 만드는 방식
📍 React에서 CSS Modules 사용하기
/* index.module.css */
#button {
color: red;
font-size: 10px;
}
#container {
margin: 20px;
}// app.js
import styles from "./styles.module.css";
function App() {
return (
<div id={styles.container}>
<button className={styles.button}>버튼</button>
</div>
);
}
export default App;파일을 실행할 경우 HTML 상에 button의 class가
<button class="button__jo6qc" />처럼 클래스에 hash 값이 붙어 클래스가 생성된다.
즉, 스타일 정의를 각 컴포넌트 단위로 자동으로 겹치지 않게끔 로컬화 할 수 있게 된다.
CSS Modules는 컴포넌트를 작성할 때 한 곳에서 모든 것을 작성하지 않고, 따로 CSS 파일을 만들어줘야 되기 때문에 많은 CSS 파일을 따로 관리해야 하는 문제점이 있다.
📌 CSS in JS (Styled Components, emotion)
CSS Modules의 문제점인 방대한 CSS 파일 관리를 해결하기 위해 CSS in JS가 탄생!
그러나 CSS in JS도 상태가 변경되면 우선 JS의 CSS 코드를 읽어와서 파싱하는 단계부터 시작하기 때문에 인터렉션이 늦다는 점, Styled-Component와 같은 컴포넌트 관리 라이브러리를 설치해야 하므로 JS의 번들 크기가 커져 최초 렌더링에 상대적으로 시간이 더 오래 걸린다는 점에서 단점이 존재한다.
<참조 : https://blog.toycrane.xyz/css%EC%9D%98-%EC%A7%84%ED%99%94-%EA%B3%BC%EC%A0%95-f7c9b4310ff7 >
