1. BEM (Block Element Modifier)
BEM
BEM이란 CSS 클래스 이름을 짓는 규칙입니다. 블록(Block), 요소(Element), 변경자(Modifier) 형태로 씁니다. 블록은 <div>같은 영역을 의미하고, 요소는 <button>, <input> 같은 요소를 의미합니다. 마지막으로 변경자는 요소의 변형을 표시하는 것입니다. 이들을 .block__element--modifier 형태로 씁니다.
BEM의 예시
<form class="signin-form">
<label class="signin-form__label">
Email
<input type="text" class="signin-form__input">
</label>
<label class="signin-form__label">
Password
<input type="password" class="signin_form__input signin_form__input--pasword">
</label>
<button class="signin-form__button signin-form__button--submit">
Sign In
</button>
</form>
.signin-form { /* 로그인 폼 */ }
.signin-form__input { /* 로그인 폼의 인풋 */ }
.signin-form__input.signin-form__input--password { /* 로그인 폼의 비밀번호 인풋 */ }
.signin-form__button { /* 로그인 폼의 버튼 */ }
.signin-form__button.signin-form__button--submit { /* 로그인 폼의 제출 버튼 */ }
참고 자료
예제로 이해하는 BEM.
BEM 101 | CSS-Tricks
Quick start / Methodology / BEM
BEM — Block Element Modifier
2. Sass(SCSS)
Sass(SCSS)
CSS는 웹 표준이기 때문에 문법이 빠르게 바뀌지 않습니다. 그래서 개발자들이 사용하기 편한 여러가지 문법을 추가한 새로운 언어를 만들기 시작했는데, 그 중에 가장 많이 쓰이는 것이 바로 Sass입니다. 변수, 네스팅(Nesting) 문법, 믹스인(Mixin) 등등 다양한 기능을 제공합니다. 이 중에서 많은 사람들이 좋다고 생각한 문법(변수, 네스팅 등)은 웹 표준으로 흡수되기도 했습니다.
Sass는 프리프로세서(Preprocessor) 스크립트 언어라고 하는데, 프리프로세서라는 프로그램을 통해서 Sass 코드를 CSS 코드로 변환하기 때문에 그렇습니다.
Sass에는 기존 Sass와 SCSS 두 가지 문법이 있는데, 최근에는 CSS의 모든 문법 위에서 확장된 문법을 사용하는 SCSS를 많이 사용합니다.
네스팅 예시
SCSS
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
CSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
믹스인 예시
SCSS
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
.success {
@include theme($theme: DarkGreen);
}
CSS
.info {
background: DarkGray;
box-shadow: 0 0 1px rgba(DarkGray, .25);
color: #fff;
}
.alert {
background: DarkRed;
box-shadow: 0 0 1px rgba(DarkRed, .25);
color: #fff;
}
.success {
background: DarkGreen;
box-shadow: 0 0 1px rgba(DarkGreen, .25);
color: #fff;
}
프로젝트에 적용하기
React(create-react-app)
Adding a Sass Stylesheet | Create React App
Next.js
Basic Features: Built-in CSS Support | Next.js
참고자료
3. CSS Modules
CSS Modules란?
CSS Modules는 마치 자바스크립트 모듈을 사용하듯이 CSS 파일을 각각 독립적으로 사용할 수 있도록 해 줍니다. 예를 들어서 Sidebar 라는 컴포넌트랑 Homepage 라는 컴포넌트가 있을 때 아래처럼 CSS를 사용할 수 있게 해 줍니다.
Sidebar.module.css
.logo { /* ... */ }
.searchInput { /* ... */ }
.menu { /* ... */ }
Homepage.module.css
.logo { /* ... */ }
.sections { /* ... */ }
.logo 라는 똑같은 클래스 이름을 사용하더라도 CSS Modules에서는 서로 다른 클래스 이름입니다. 이 코드들을 CSS로 변환하면서 적절한 문자열을 추가해 주기때문입니다. 이렇게 만든 코드를 리액트에서는 클래스 이름들을 담은 객체로 가져와서 사용합니다. 아래 코드에서 styles.logo 는 .logo 에 매칭되는데, 그 값은 .logo에 적절한 문자열이 추가된 CSS 클래스 이름입니다.
Sidebar.js
import styles from './Sidebar.module.css';
export default function Sidebar() {
return (
<div>
<img className={styles.logo} src="/logo.svg" />
<input className={styles.searchInput} />
<nav className={styles.menu}>
...
</nav>
</div>
);
}
프로젝트에 적용하기
React (create-react-app)
Adding a CSS Modules Stylesheet | Create React App
Next.js
Basic Features: Built-in CSS Support | Next.js
참고자료
css-modules/css-modules: Documentation about css-modules
4. CSS-in-JS
자바스크립트 코드로 CSS를 작성하는 방식입니다. 자바스크립트 코드가 실행되면서 CSS 코드가 생성됩니다. 컴포넌트를 만들면서 동시에 CSS도 개발할 수 있다는 장점이 있습니다.
CSS-in-JS 라이브러리로는 Styled Components, Emotion 등이 있습니다.
5. Tailwind CSS
Tailwind CSS
Tailwind CSS는 Atomic CSS와 Utility-first 접근 방식을 적용한 현대적인 CSS 프레임워크입니다. Tailwind CSS는 개발자에게 유연하고 효율적인 스타일링을 제공하기 위해 다양한 사전 정의된 클래스를 제공합니다.
Atomic CSS, Utility-first란?
Atomic CSS는 스타일을 작은, 독립적인 단위로 분해하여 클래스 단위로 정의하는 접근 방식입니다. 이러한 작은 단위를 "원자(Atom)"라고 부르며, 이러한 원자들을 조합하여 필요한 스타일을 생성합니다. 예를 들어, "padding-top: 10px"라는 스타일을 정의하는 대신 "pt-10"이라는 클래스를 사용하는 식으로 스타일을 적용합니다. Atomic CSS는 스타일 규칙을 재사용 가능한 단위로 만들어 코드의 효율성과 유지보수성을 높이는 데 중점을 둡니다.
Utility-first는 Atomic CSS의 변형으로, 스타일을 구성하는 작은 원자들을 재사용 가능한 유틸리티 클래스로 구성하는 방식입니다. 이 방식에서는 스타일 규칙을 간결한 클래스 이름으로 표현하고 이러한 클래스를 HTML 요소에 직접 적용하여 스타일을 적용합니다. 예를 들어, "text-center"이라는 클래스를 사용하여 텍스트를 가운데 정렬하는 스타일을 적용할 수 있습니다. Utility-first는 반복되는 스타일을 간결하게 표현하고 재사용 가능한 클래스로 관리함으로써 개발자에게 빠르고 효율적인 스타일링을 제공합니다.
프로젝트에 적용하기
React (create-react-app)
Install Tailwind CSS with Create React App - Tailwind CSS
Next.js
Install Tailwind CSS with Next.js - Tailwind CSS
참고자료
Utility-First Fundamentals - Tailwind CSS
6. 어떤 걸 써야 할까?
CSS 기술들의 장단점 비교
- 전통적인 CSS
- CSS 클래스 이름을 짓는 것이 번거롭습니다.
- CSS 클래스 이름이 충돌할 가능성이 있습니다.
- 코드의 규모가 커지면 관리가 어렵습니다.
- 작성한 코드를 브라우저가 그대로 실행하기 때문에 추가적인 연산이 발생하지 않는다는 장점이 있습니다.
- BEM 방법론
- CSS 클래스의 이름을 짓는 고민을 덜 수 있습니다.
- 여전히 규모가 큰 코드를 관리하기는 어렵습니다.
- Sass와 같은 CSS Preprocessor
- 여전히 CSS 클래스 이름이 충돌할 가능성이 있습니다.
- 파일을 분리하고 불러 올 수 있기 때문에 규모가 큰 코드를 관리하기 좋습니다.
- 반복되는 CSS 코드를 줄여주는 다양한 문법이 있어서 작업 효율이 좋습니다.
- CSS Modules
- 컴포넌트 단위로 나누어서 스타일링할 수 있어서 CSS 클래스 이름이 충돌하지 않습니다.
- 필요하다면 Sass로 CSS Modules를 사용할 수 있습니다. (create-react-app 에서는 자체적으로 Sass와 CSS modules를 함께 사용하도록 해 줍니다.)
- CSS-in-JS
- 컴포넌트 단위로 나누어서 스타일링할 수 있어서 CSS 클래스 이름이 충돌하지 않습니다.
- 클래스네임을 짓지 않아도 됩니다.
- 자바스크립트와 JSX로 된 컴포넌트 코드와 스타일링 코드가 한 파일에 있어서 관리하기 좋습니다.
- 하지만 자바스크립트를 실행해서 CSS를 만들기 때문에 CSS나 Sass에 비해서 추가적인 연산이 필요합니다. 그리고 렌더링 속도도 훨씬 느려진다는 단점이 있습니다.
- Tailwind CSS와 같은 Utility-first(Atomic CSS)
- CSS 클래스를 나누는 기준을 컴포넌트나 디자인이 아닌 작은 단위의 CSS 속성으로 두기 때문에, CSS 클래스 이름 충돌에 대한 걱정이 없습니다.
- 보편적으로 사용하는 CSS 클래스를 여러 컴포넌트에서 공유하기 때문에, 규모가 큰 프로젝트더라도 CSS 코드의 양이 굉장히 적다는 장점이 있습니다.
- CSS-in-JS와 마찬가지로 JSX로 된 컴포넌트 코드와 스타일링 코드가 한 파일에 있어서 관리하기 좋습니다.
- 복잡한 디자인을 적용할 때에는 CSS 클래스가 한없이 길어져서 가독성이 떨어지고 관리하기 어렵다는 단점이 있습니다.
- 그래서 Tailwind CSS 같은 경우 별도의 문법(@apply)으로 추상화를 지원하기도 합니다.
<a href="..." className="rounded-lg px-3 py-2 text-slate-700 font-medium hover:bg-slate-100 hover:text-slate-900">...</a>
참고할 만한 사례들
김의중 / CSS-in-JS 의 대안 Css-in-CSS Tai... | 커리어리
카카오웹툰은 CSS를 어떻게 작성하고 있을까? | 카카오엔터테인먼트 FE 기술블로그
FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까? | 카카오엔터테인먼트 FE 기술블로그
(번역) 우리가 CSS-in-JS와 헤어지는 이유
Airbnb에서 도입한 Linaria는 CSS-in-JS이지만 빌드 시점에 CSS 파일로 만들어지고, Atomic CSS도 지원합니다.
Feedback
- 참고 자료로 포스팅해보자.
- CSS 기술 별로 포스팅해보자.
Reference
