[CSS] CSS의 간결한 역사와 각 라이브러리/프레임워크 사용 후기(last update 2022.10.02)

Quartz 쿼츠·2022년 10월 1일

Frontend | Library & Framework

목록 보기

3/6

이 글은 2022.08.15에 작성한 내용을 시리즈의 목적에 맞게 수정하여 재발간하였으며, 각 라이브러리 사용 후기는 계속 업데이트되고 있습니다.

CSS는 수많은 반복 작업이 필요하여 생산성을 높이기 위해 보통 라이브러리를 사용하는데, 이를 선정할 때 성능 평가 없이 가져다 붙이거나 렌더링 방식에 무지한 경우를 지양해야 한다. 다양한 CSS 라이브러리들의 장단점을 확인하여 프로젝트의 도입 시 주의할 점을 살펴보고, 내가 실제로 사용한 후기들을 작성해보려 한다.

CSS의 역사

먼저, 웹에서 CSS는 왜 도입되었고 어떤 단점을 보완하기 위해 지금의 라이브러리/프레임워크들이 발전해왔는지에 대해 간단히 정리해보자.

HTML의 style 속성

주요 개념: HTML을 다양한 서식으로 꾸미기 위해 ➡️ 태그에 직접 inline-style 작성
문제점: inline-style의 가독성 및 유지 보수 문제, 반복 작업

CSS

주요 개념: 중복 서식을 일괄적으로 적용하는 CSS Ruleset
inline-style을 묶어 별도 스타일을 선언(declarations) & 원하는 HTML tag를 선택(selector)하여 스타일 적용
➡️ 콘텐츠(HTML)와 스타일(CSS) 분리하여 관리 가능
문제점
1. Specificity: 서식이 겹치는 경우를 대비하기 위해 CSS에서는 specificity로 서식 우선순위를 결정하는데, 서식을 덮어쓰기 위해 더 복잡한 selector를 사용하거나 !important를 사용해야 한다.
2. Global Scope: 내가 수정한 코드가 모든 프로젝트에 영향을 주어 유지 관리가 어렵고, 네이밍 중복을 신경써야 한다.

CSS 라이브러리/프레임워크

위의 순수 CSS의 문제들을 해결하기 위해 아래와 같은 라이브러리/프레임워크가 나타났으며, 2021년의 기술 사용자수(x축)와 만족도(y축)은 다음과 같다.

1. Pre-processor(Sass)

주요 개념: Syntactically Awesome Style Sheet. CSS를 로직이 있는 언어로 접근하여 재사용성을 모색함
문제점: 간편한 문법(nested한 selector & variable)으로 구현한 코드가 렌더링 시 순수 CSS 로 변환됨
➡️ 성능이 느려지는 것을 해결하기 위해 Zero-Time CSS, Near Zero CSS 컨셉 발전중

사용법: 컴파일러 설치 후 .scss or .sass 파일에 (문법이 있는) CSS 작성

style.sass

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

2. CSS-in-CSS(CSS module)

주요 개념: CSS 파일에 선언한 클래스명이 자동 변경되어 중복을 신경쓰지 않아도 되며, 전체 페이지의 CSS를 렌더링 시 한 번에 로드함
모든 CSS를 가져오므로 컴포넌트 기반 개발에서는 비효율적이나, 컴포넌트가 자주 바뀌는 인터렉티브한 웹 개발시에는 JS 변경되더라도 CSS에 영향이 없어 바로 적용므로 효율적임

사용법: .module.css 파일에 일반 CSS 작성

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;
}

3. CSS-in-JS(Styled-Component)

주요 개념: CSS를 JS를 통해서만 만들어 CSS 범위를 컴포넌트 내부로 국한하며, 컴포넌트로 전달하는 값(JS 함수,값 공유)에 따라 동적으로 스타일 적용 가능
CSS의 global scope 문제를 해결하고 selector가 사라져 specificity 문제도 사라짐
JS 런타임에서 동적인 클래스명이 생성(클래스명 지정X)되며, CSS 구문 분석 과정이 필요하여 렌더링 속도가 낮아짐
이미 마크업 개발자가 만들어놓은 문서를 사용하는 경우, HTML과 CSS를 받아 컴포넌트 단위로 재배치해야 하며 유지 보수가 지저분할 수 있음
활성화된 컴포넌트 관련 스타일만 가져오므로 컴포넌트 기반 개발에서는 효율적이나, 컴포넌트(JS)가 자주 리렌더링되는 인터렉티브한 개발 시에는 JS 내 CSS 코드를 매번 같이 파싱해야 하므로 성능 저하

사용법: 패키지 설치 후 .js 파일 내부에서 특정 문법 내에 일반 css 작성

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)

4. Atomic CSS(Tailwind CSS)

주요 개념: 방대한 class name을 가진 CSS 파일
모두 같은 specificity class로 구성되어 CSS의 관리와 네이밍을 위한 고민이 필요하지 않음
반복되는 속성을 가지는 시멘틱(코드 의미 중요시)한 네이밍이 아닌 utility-first 컨셉: 클래스가 1 가지 작업만을 수행
inline-style을 사용하여 가독성과 유지보수 좋지 않음
클래스가 빌드 타임에 모두 생성되므로 동적 변수(JS 코드) 사용에 제약이 있으며, animation과 transition 사용에도 제약이 있음

사용법: 패키지 설치 후 html의 class attribute에 사용할 클래스 작성. CSS 작성 필요없음

<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
      },
    },
  },
};