CSS의 진화과정

CSS

• CSS는 HTML을 꾸며주기 위해 사용하는 스타일시트 언어
• 단점은 어떤 CSS가 적용될지 예측하기 어렵고, 코드 재사용이 어렵다.

SCSS

@import

// import theme.scss, button.scss 
@import 'theme', 'button';

• @import 구문을 사용하면 다른 sass 파일을 불러올 수 있다.
• 장점은 css 파일을 쉽게 모듈화 하고, 나누어 작업이 가능하다.

Variable

$base-color: #c6538c; 
$border-dark: rgba($base-color, 0.88);  
.alert {   
    border: 1px solid $border-dark; 
}

• 여러 번 쓰이는 값들을 변수로 저장가능하다.

SCSS 단점

// theme.scss 
.button {  font-size: 20px; }
// button.scss 
.button {  font-size: 30px; }
// style.scss 
@import 'theme', 'button';

• 파일을 분리했지만 중첩 선언이 있는 경우 어떤 것이 먼저 적용될지 가늠이 되지 않는다.

BEM

• CSS 내에서 이름이 중복되지 않도록 CSS 아이디와 클래스를 명명하는 방법론

BEM 명명 방식

Block

• 블럭은 재사용이 가능한 기능적으로 독립적인 컴포넌트를 말한다.

<div class="logo">
    <img src='logo.svg'> 
</div>

Element

• 엘리먼트는 블럭을 구성하는 한 부분을 말한다.
• 블럭 뒤에 __를 붙여주고, 엘리먼트 이름을 붙여야 한다.

<ul class="menu">     
    <li class="menu__item">피자</li>     
</ul>

Modifier

• 블럭이나 엘리먼트에 변화를 줄 수 있는 값으로, 생김새가 다르거나 다른 행동을 해야할 때 사용한다.
• element나 block 뒤에 —— 를 붙여야 한다.

<ul class="menu">     
  <li class="menu__item--disabled">피자</li>     
</ul>

BEM의 장단점

• 장점은 컴포넌트 단위로 CSS를 관리할 수 있다. 단점은 단순한 코드 명명 규칙이기 때문에 모든 개발자가 이해하고 있어야 한다.

CSS Modules

• 모든 스타일에 동적으로 파일에 선언된 CSS 선택자에 고유한 해시 문자열을 추가하여 CSS 속성이 겹치지 않게 만드는 방식

React에서 CSS Modules 사용하기

• CSS 모듈을 사용하기 위해선 파일이름.module.css 형태로 파일을 생성해야 합니다.

/* 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;

• 클래스에 hash 값이 붙어 클래스가 생성된다.
• 단점은 많은 CSS 파일을 따로 관리해야 한다.

CSS in JS(Styled Components)

• 방대한 CSS 파일을 관리해야하는 것을 해결하기 위해 나온 방법
• 하나의 컴포넌트를 만들 때마다 각 컴포넌트에서 사용할 CSS를 같이 작성

React에서 Styled Components 사용하기

import styled from "styled-components";

const Button = styled.button`
	color: red;
	font-size: 10px;
`;

const Container = styled.div`
	margin: 20px;
`;

function App() {
	return (
		<Container>
			<Button>버튼</Button>
		</Container>
	);
}

export default App;

• 단점은 인터렉션이 늦고, JS의 번들 크기가 커진다.

출처

• https://blog.toycrane.xyz/css%EC%9D%98-%EC%A7%84%ED%99%94-%EA%B3%BC%EC%A0%95-f7c9b4310ff7