이 글은 2022.08.15에 작성한 내용을 시리즈의 목적에 맞게 수정하여 재발간하였으며, 각 라이브러리 사용 후기는 계속 업데이트되고 있습니다.
CSS는 수많은 반복 작업이 필요하여 생산성을 높이기 위해 보통 라이브러리를 사용하는데, 이를 선정할 때 성능 평가 없이 가져다 붙이거나 렌더링 방식에 무지한 경우를 지양해야 한다. 다양한 CSS 라이브러리들의 장단점을 확인하여 프로젝트의 도입 시 주의할 점을 살펴보고, 내가 실제로 사용한 후기들을 작성해보려 한다.
먼저, 웹에서 CSS는 왜 도입되었고 어떤 단점을 보완하기 위해 지금의 라이브러리/프레임워크들이 발전해왔는지에 대해 간단히 정리해보자.
주요 개념: 중복 서식을 일괄적으로 적용하는 CSS Ruleset
inline-style을 묶어 별도 스타일을 선언(declarations) & 원하는 HTML tag를 선택(selector)하여 스타일 적용
➡️ 콘텐츠(HTML)와 스타일(CSS) 분리하여 관리 가능
문제점
1. Specificity: 서식이 겹치는 경우를 대비하기 위해 CSS에서는 specificity로 서식 우선순위를 결정하는데, 서식을 덮어쓰기 위해 더 복잡한 selector를 사용하거나 !important를 사용해야 한다.
2. Global Scope: 내가 수정한 코드가 모든 프로젝트에 영향을 주어 유지 관리가 어렵고, 네이밍 중복을 신경써야 한다.
위의 순수 CSS의 문제들을 해결하기 위해 아래와 같은 라이브러리/프레임워크가 나타났으며, 2021년의 기술 사용자수(x축)와 만족도(y축)은 다음과 같다.
style.sass
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
.alert {
border: 1px solid $border-dark;
}
style.module.css
.className {
color: green;
background: red;
}
일반 CSS 작성과 유사하여 매번 JS 파일에 CSS import해야 하는 과정이 번거로웠다. 테마 색상이나 변수가 필요한 경우 vars.css 파일에 넣어 관리가 가능하다. (일반 CSS에서 모두 사용 가능)
/* 1. @import "vars.css"; */
/* 2. use as variable ex) color: var(--bjj-white) */
:root {
--bjj-white: #ffff;
}
Component.js
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
render(
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);
CSS 파일을 따로 관리하지 않아도 스타일과 로직을 함께 관리할 수 있다는 점이 매우 편했다. 해당 링크의 컨퍼런스 발표에서 스타일과 로직을 함께 두는 컴포넌트 방향성에 대해 공감하였고 다음 프로젝트에서 styled-component를 다시 도입해보려 한다.(2022.10.02)
<figure class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800">
<img class="w-24 h-24 rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 space-y-4">
Staff Engineer, Algolia
</div>
</figure>
Modifier를 이용하여 UI 패턴을 더 쉽게 만들 수 있었다. (반응형, child selector 등)
<div className="odd:bg-blue-50 even:bg-yellow-50 first:bg-teal-50 last:bg-amber-50 lg:grid-cols-2">
그러나 클래스 이름에 익숙해지는 것에 시간 소요가 있었으며 스타일링과 애니메이션에 제약이 있어 다시 CSS를 작성하여 커스터마이징이 필요했다.
tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}",
],
theme: {
colors: {
myNavy: "#2D4263", // custom color
},
extend: {
fontSize: {
"8.5xl": "7rem", // custom fontsize
},
animation: {
"spin-slow": "spin 6s linear infinite", // custom animation
},
},
},
};
[번역]프론트엔드 개발자는 왜 구하기 어렵나요?
CSS 핫🔥 트렌드 (어떤 라이브러리를 먼저 배우면 좋을까?)
개인적인 2022년 style 라이브러리 비교
내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library. -Part.1
CSS 역사로 알아보는 CSS가 어려워진 이유
CSS-in-JS 라이브러리들에 대한 고찰