🌟 Prolouge : About CSS

CSS(Cascading Style Sheets)는 HTML을 꾸며주기 위해 사용하는 스타일시트 언어입니다.

CSS는 특정 언어처럼 복잡한 개념이 없고 간결합니다. 하지만 동시에, CSS는 어렵습니다. 점점 프로젝트가 복잡해질수록 내 의도와 다르게 스타일이 적용되지 않는 등 의 지끈지끈..한 문제들이 발생하기 시작합니다.

또한, CSS를 다루는 방법들이 복잡해지고 다양해지다보니 너무나도 많은 CSS 라이브러리/프레임워크 중 무엇을 사용해야 할지 판단하기 어렵다는 느낌을 받기도 했습니다.

필자 또한 단순히 ‘보편적으로 많이 쓰니까’를 이유로 Styled-Components만을 사용해서 React Project의 스타일링을 하곤 했습니다.

그러므로 이번 글을 계기로 CSS의 역사를 톺아보는 동시에 CSS 라이브러리 각각의 특징에 대해 익히면서,
이를 통해 앞으로 어떤 상황에 어떤 CSS 라이브러리를 사용하는 것이 좋을지 고민해 보고자 합니다.

---

1️⃣ : 🌈 CSS의 등장과 CSS의 문제점

▷ HTML의 등장

• 1990년, HyperText 문서를 공유하기 위해 HTML이 등장합니다. 당시에는 HTML에 서식을 입히기 위해 html 태그에 직접 스타일을 입력하는 inline-style을 사용하였습니다. 하지만 이 inline-style은 중복 서식을 반복해서 표현해야 하고, 가독성이 떨어지며, 유지보수가 어렵다는 단점이 있습니다.
  

▷ CSS의 등장

• 따라서 1996년, inline-style의 중복을 제거하기 위한 방법으로 CSS가 등장합니다. CSS의 등장으로 별도의 스타일을 선언(Declarations)해두고, html에서 원하는 태그를 선택(Selector)하여 스타일을 적용할수 있게 되었습니다.

  CSS Ruleset : 선택자(Selector) & 선언(Declaration)

  또한 CSS를 별도로 작성하게 되면서 자연스럽게 콘텐츠와 서식이라는 서로 다른 관심의 분리가 이루어졌습니다.
  

▷ 하지만, CSS도 다음과 같은 문제점이 있었으니..

• ☠️ 1. Global Scope : CSS의 속성은 어디서든 선언 가능하며 (ex. linline, style 태그, link 태그로 연결한 파일.. 등) 모든 프로젝트에 영향을 줍니다.
  → 따라서, 기존에 사용한 이름을 피해서 작성해야 합니다.
• ☠️ 2. Specificity : HTML에서 지정한 class 순서가 아니라 CSS의 순서에 의해 서식 우선순위가 결정됩니다.
  → 따라서, 다른 서식을 덮어쓰기 위해 Selector를 더 복잡하게 작성해야 합니다.
  
  

▷ CSS의 문제점을 해결 해보자!

이러한 CSS의 한계를 극복하기 위한 노력으로, SCSS(Sass) 및 BEM 방법론 등이 등장하기 시작했습니다.

❓ 1. SCSS

/* css 사용 */
.클래스1  {
	적용할_스타일속성1 : 어쩌구 속성;
}
.클래스1 .클래스2 {
	적용할_스타일속성2 : 저쩌구 속성;
	적용할_스타일속성3 : 저쩌구 속성;
}

/* SCSS 사용 */
.클래스1 {
	적용할_스타일속성1 : 어쩌구 속성;

	.클래스2{
	적용할_스타일속성2 : 저쩌구 속성;
	적용할_스타일속성3 : 저쩌구 속성;
	}
	...이런식으로 계속 중첩이 가능하다!
}

• CSS의 확장판으로, Nested한 Selector와 variable를 등록할 수 있는 추가적인 문법으로 작성하면 CSS로 변환을 시켜주는 pre-processor입니다.
• ☠️ BUT! 여전히 어떤 것이 먼저 적용될지 가늠되지 않으며(Specificity 문제), CSS 파일로 변경해주는 컴파일러가 필요하다는 단점이 있습니다.

❓ 2. BEM

• CSS 내에서 이름이 중복되지 않도록 CSS 아이디와 클래스를 명명하는 방법론입니다.
  • BEM : .Block__Element--Modifier
• ☠️ BUT! 단순한 코드 명명 규칙이기 때문에 모든 개발자가 이해해야 하며, 클래스 이름이 길어지고 길어진 이름을 매번 입력하며 관리해야 한다는 단점이 있습니다.

---

2️⃣ : 🗂 CSS-Modules

▷ CSS의 문제.. JS로 해결해보자! (① 번들러 & 모듈화)

CSS의 단점을 해결하고자 나온 방법인 SCSS나 BEM의 경우, 개발자가 클래스가 겹치지 않도록 관리해야 하는 불편함이 있었습니다.

즉, 여전히 Global Scope로 인해서 컴포넌트와 CSS 간 구조와 범위가 일치하는 문제가 남아 있었습니다.

이러한 문제를 해결하려는 첫번째 움직임으로, 2015년 CSS-Modules이 등장하였습니다.

▷ CSS-Modules의 특징 및 사용 방법

• CSS Modules은 CSS를 모듈화하여 사용하는 방식입니다.
• CSS 클래스에 해시 문자열을 추가하여 고유한 className을 만들어, Scope를 지역적으로 제한할 수 있습니다.

React에서 CSS Modules 사용하기

• 파일이름.module.css 형태로 파일을 생성합니다.
• 생성한 module 파일을 불러오면
  → 번들러가 클래스에 고유한 해시 값을 추가하여 고유한 클래스네임으로 이뤄진 객체를 생성합니다.
  → 문법 styles 객체를 활용해서 자바스크립트 객체의 프로퍼티 형식으로 참조 가능합니다.
  → 개발자모드로 소스를 보면 클래스명이 '파일명_클래스명__아무말'형식으로 나옵니다.
  

• 예시

//Header.module.css

	.header {
  background-color: thistle;
  color: white;

  font-size: 3rem;
}

import React from "react";
import styles from "../styles/Header.module.css";

const Header = ({ title }) => {
  return (
    <header className={styles.header}>
      <h1> CSS-Module의 스타일링 방식입니다!</h1>
    </header>
  );
};

export default Header;

▷ CSS-Modules의 장단점

• 장점 :
  • 해시 문자열이 추가되어 고유한 클래스네임을 갖기 때문에, 다른 CSS 파일에 동일한 클래스명이 정의되어 있더라도 현재 CSS의 클래스에 영향을 미치지 않습니다.
    → 즉, Global Scope 문제를 해결하여, 중복 및 관리의 위험성이 적다는 것이 가장 큰 장점입니다!
    
  • css 네이밍 규칙을 간소화 할 수 있습니다.
  • 컴포넌트 단위로 스타일을 관리할 수 있어 유지보수가 용이합니다.
• 단점 :
  • 별도의 CSS 파일을 만들어 관리해야 합니다.
  • 렌더링 과정에서 자동 변환된 클래스명이 코드의 가독성을 저해하는 경우도 있습니다.
    → 이를 해결하기 위해, CSS Module을 사용하는 경우, classnames 라이브러리를 함께 사용하기도 합니다.

---

3️⃣ : CSS-In-JS

▷ CSS의 문제.. JS로 해결해보자! (② JS로 만든 CSS!)

💡 CSS-In-JS를 한 눈에 비교해보고 싶다면, 여기를 참고해보세요!(2023ver.)

2016년, 페이스북 개발자 Vjeux는 다음과 같은 CSS의 7가지 문제점을 제시하면서, 이러한 이슈들을 해결하는 방법으로 CSS-In-JS를 소개했습니다.

Facebook FE 개발자가 발표한 css의 7가지 문제

1. Global namespace: 모든 스타일이 global에 선언되어 중복되지 않는 class 이름을 적용해야 하는 문제
2. Dependencies: css와 JS간의 의존관계를 관리하기 힘든 문제
3. Dead Code Elimination: 기능 추가, 변경, 삭제 과정에서 불필요한 CSS를 제거하기 어려운 문제
4. Minification: 클래스 이름의 최소화 문제
5. Sharing Constants: JS 코드와 상태 값을 공유할 수 없는 문제
6. Non-deterministic Resolution: CSS 로드 순서에 따라 스타일 우선 순위가 달라지는 문제
7. Breaking Isolation: CSS의 외부 수정을 관리하기 어려운 문제(캡슐화)

▷ CSS-In-JS의 특징 및 장단점

• JS 코드에서 컴포넌트에서 사용할 CSS를 같이 작성하는 스타일링 방식입니다.

• CSS-Modules의 단점인 방대한 css 파일을 관리해야 하는 것을 해결하기 위해 나온 방법론입니다.

• 장점 :

  • CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화하는 모듈성을 가지고 있습니다.
  • JS와 CSS 사이의 상수와 함수를 공유하면서 JS 환경을 최대한 활용하며, 동적으로 CSS를 변경하기 용이합니다.
  • 현재 사용 중인 스타일만 DOM에 포함합니다.
  • ClassName이 겹치지 않음을 보장합니다. (→ Global Scope 문제 해결)

• 단점

  • 새로운 의존성이 발생합니다.
  • 별도의 라이브러리를 설치하기 때문에, 번들 크기가 커집니다. → CSS-in-CSS(ex. CSS-Moduels)에 비해 속도가 느립니다.
    

▷ 🔥 CSS-In-JS의 종류 1 : 💅🏻 Styled-Components

• JS 파일안에 컴포넌트 이름을 쓰듯 스타일을 선언하는 방식입니다.

공식 문서에 따르면, 스타일드 컴포넌트는 아래와 같은 기능을 제공합니다.

• Automatic Critcal CSS : 페이지의 컴포넌트를 추적해 필요한 스타일만 삽입합니다.
• No Class Name Bugs : 스타일에 대해 고유한 클래스 이름을 생성합니다.
• Easier Deletion of CSS : 모든 스타일링이 특정 컴포넌트와 연결됩니다. 따라서 컴포넌트가 삭제 되면 해당 컴포넌트의 모든 스타일도 함께 삭제됩니다.
• Simple Dynamic Styling : props나 global theme에 기반하여 여러 컴포넌트의 스타일을 쉽고 직관적으로 적용할 수 있습니다.
• Painless Maintenance : 컴포넌트에 영향을주는 스타일을 찾기 위해 다른 파일을 찾지 않아도 되어 유지 관리가 쉽습니다.
• Automatic Vendor Prefixing: 자동으로 벤더 프리픽스를 붙여줍니다.

• 🌟 React에서 Styled-Components 사용하기

👍 React와 Styled-Components 모두 페이스북(메타)에서 만든만큼, React와 Styled-Components는 궁합이 좋습니다!

1. styled-components 패키지를 설치합니다.

    # with npm
    $ npm install styled-components
   
    # with yarn
    $ yarn add styled-components

2. styled 메서드(기본 export 메서드)를 사용해 지정된 스타일을 가진 컴포넌트를 정의합니다.

3. 만든 컴포넌트를 적용합니다.

   const 컴포넌트이름 = styled.태그이름`
   	/* 적용할 스타일 속성을 적어줍니다 */
   	/* 해당 예시처럼 props를 사용해 동적 스타일링도 가능합니다 */
     적용할 스타일 속성1: ${(props) => pros ? "어쩌구" : "저쩌구"}
   `
   
   export default function App(){
     return (
       <div>
         <컴포넌트이름 default={true} />
         <컴포넌트이름 default={false} />
       </div>
     )
   }```

▷ 🔥 CSS-In-JS의 종류 2 :👩🏻‍🎤 Emotion

• Emotion은 Styled-Components와 마찬가지로 CSS-In-JS 라이브러리 종류 중 하나입니다.

• MUI(Material UI)가 스타일링 엔진을 Emotion으로 채택하면서 이목이 집중되고 있습니다.

• 🌟 React에서 Emotion 사용하기
  - emotion 패키지를 설치합니다. (react)

  # with npm
  $ npm install --save @emotion/react
  
  # with yarn
  $ yarn add @emotion/react

  cf. vanilla 환경에서는 @emotion/css 패키지로 설치합니다

  • JSX Pragma: JSX Pragma 를 css-props 을 사용하는 소스 파일의 가장 상단에 둬야합니다.

    (1) React v16 이하의 버전 : 아래와 같이 작성하고, jsx() 함수도 불러와야합니다.

    /** @jsx jsx */
    import {css, jsx} from '@emotion/react";

    → React.createElement 대신 jsx 함수를 사용하도록 jsx babel 플러그인을 구성하라는 의미입니다.

    (2) 그 이상의 버전에서는

     /** @jsxImportSource @emotion/react */

    → 위와 같이 상단에 쓰면, React 의 jsx() 함수를 사용하지 말고 Emotion 의 jsx() 함수를 사용하라는 의미입니다.

    (써주지 않으면 css prop 에 넘어간 스타일이 제대로 반영이 안될 수 있습니다.)

• Emotion만의 특징

  • css Prop(css() 함수)로 emotion 사용하기
    - css() 함수의 반환 결과로 해당 스타일을 적용하고 싶은 HTML 요소나 React 컴포넌트의 css라는 prop에 넘겨줍니다.
    - 인자를 객체형 또는 문자형으로 넘길 수 있는데, Emotion 공식문서에서는 가급적 스타일을 객체로 선언하는 것을 권장하고 있습니다.

    import { css } from "@emotion/react";
    
    function ComponentA() {
      return (
        <div
          css={css({
            backgroundColor: "yellow",
          })}
        >
    			객체형 css()함수 사용
        </div>
      );
    }
    
    import { css } from "@emotion/react";
    
    function ComponentB() {
      return (
        <div
          css={css`
            background-color: yellow;
          `}
        >
          문자형 css()함수 사용
        </div>
      );
    }

    
    

  • emotion에서 styled 사용하기
    -> @emotions/styled 패키지를 설치하여 사용합니다.

    # with npm
    $ npm install --save @emotion/styled
    
    # with yarn
    $ yarn add @emotion/styled

    
    import styled from '@emotion/styled'
    
    const Button = styled.button`
      color: hotpink;
    `
    
    render(<Button>This is a hotpink button.</Button>)

    
    

  • Composition

    : emotion 에서 가장 강력하고 유용한 기능으로, CSS에서 반환된 값을 다른 스타일 블록에 보강하여 스타일을 함께 구성할 수 있습니다.

    ⇒ 👍 이모션의 Compositon 을 사용하면 스타일이 사용 순서대로 병합되므로 style이 생성된 순서를 생각할 필요가 없습니다.

    → cf. 일반적인 css : 여러 클래스를 사용하여 스타일을 함께 구성할 수 있지만, 정의된 순서에 따라 나중에 정의된 것이 우선됩니다. (style이 생성된 순서를 생각해야 한다는 단점!)

    import { css } from '@emotion/react'
    
    const danger = css`
      color: red;
    `const base = css`
      background-color: yellow;
      color: turquoise;
    `render(
      <div>
        <div css={base}>This will be turquoise</div>
        <div css={[danger, base]}>
          This will be also be turquoise since the base styles overwrite the danger
          styles.
        </div>
        <div css={[base, danger]}>This will be red</div>
      </div>)

    ⇒ 이처럼 css 생성 순서대로가 아닌, css 사용 순서대로 적용됩니다!

▷ 🤔 그럼,, Emotion은 Styled-Components와 뭐가 다른가요?

• 이 문서를 참고하면, Emotion과 Styled-Components는 전반적인 스타일 기능, 문법은 유사합니다.
• 전반적으로 Emotion의 라이브러리 용량이 더 적고, 퍼포먼스가 더 좋으나 버전에 따라 유의미한 차이는 없을수 있습니다.
• 그러나 Emotion은 css props을 사용하므로 inline 스타일링이 가능하고, 비교적 네이밍이 간단합니다.
• 또한 Styled-Componets는 SSR에서 ServerStyleSheet 설정이 필요하지만, Emotion은 SSR에서 별도의 설정 없이 동작할 수 있습니다.
  → 💭 개인적으로 Next.js에 styled-components를 적용하다가 어려움을 겪었던 경험이 있어서,, 이 점이 가장 큰 장점으로 와닿았습니다!
  

---

4️⃣ : Atomic CSS - Tailwind CSS

▷ 아니야.. 다시 CSS 생태계에서 해결해보자! (✨새로운 CSS 패러다임 등장)

2017년, JS가 아닌 새로운 CSS 생태계에서(CSS-In-CSS) CSS의 문제점을 해결하고자 하는, Tailwind CSS가 등장했습니다.

▷ Tailwind CSS의 특징 및 사용 방법

• 특징
  • `Utility-First 컨셉`의 프레임워크 입니다.
    • 즉, 부트스트랩과 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로, html 태그 내에서 스타일링을 할 수 있습니다.
  • Atomic CSS 패러다임을 따릅니다.
    • 즉, 미리 정의 된 클래스 네임을 조합해서 스타일링 하는 방식입니다.
  • 빌드 시, 사용하지 않는 클래스가 제거되어 번들 크기가 최소로 유지됩니다.
  • CSS-In-CSS이므로,JS 코드와 완전히 분리되어 사용됩니다.
• 사용 방식

  • 사용 형식 : <태그이름 class="{tailwind가 정해놓은 className들}">/<태그이름>

    <button className="px-8 py-4 m-0 h-12 border border-solid rounded-lg bg-white">버튼</button>

▷ Tailwind CSS의 장단점

• 장점
  • Utility-First의 장점! : CSS 파일을 별도로 관리해야 할 필요가 없고, 클래스명을 고민할 필요가 없어 편리하며 개발자 친화적입니다.
  • 모든 곳에서 동일한 유틸리티 클래스 사용해 일관된 스타일을 구현하기 쉽습니다.
  • 로우 레벨의 스타일을 제공하여, 디테일한 부분까지 쉽고 자유롭게 커스텀이 가능합니다.
    → 특히 디자인 시스템, 다크모드 구현이 간편합니다.
    → 공식문서에서 완성된 페이지, 컴포넌트를 제공합니다.
    
• 단점
  • HTML과 CSS의 분리가 이루어지 않습니다. 그러므로 코드가 길어지고, 가독성이 떨어집니다.
  • rem 단위가 기본이기 때문에, px 단위 서비스라면 기본값을 바꿔줘야합니다.
  • 빌드 타임에 모두 생성되므로 동적 변수를 사용할 수 없습니다. → 이러한 이유 때문에 Twin.Macro 등의 라이브러리를 사용하기도 합니다.
    

---

5️⃣ Zero-Runtime CSS - 🧁 Vanilla Extract

▷ CSS-In-JS 시대의 시작, 그러나…❓

2020년 ~ 2021년쯤부터, React의 압도적인 점유율로 인해 CSS-In-JS의 대유행이 시작되었습니다.

Stateof2021 자료를 보면, 새로운 기술들이 대부분 CSS-In-Js에 몰려 있는 것을 알 수 있습니다.
☠️ 하지만, Styled-Component & Emotion과 같은 Runtime CSS-In-JS는 성능면에서 단점을 가집니다.

런타임에 JS 파일이 실행되면서 style을 생성하기 때문에, style 생성의 규모가 크고 빈번할수록 성능을 저하시킬수 있습니다.
예를 들어 스크롤, 드래그 앤 드랍과 같은 복잡한 애니메이션의 스타일을 생성하면, 런타임 오버헤드가 발생할수 있습니다.

▷ Zero-Runtime CSS-In-JS

이와 같은 Runtime CSS-In-JS의 문제점을 해결하기 위해, Zero-Runtime CSS-In-JS가 등장합니다.

• Zero Runtime CSS-In-Js
  

• JS Bundle에서 Style코드를 모두 실행되어야 페이지가 로드되는 방식입니다.
  → CSS Style까지 모두 로드가 되어야 첫 Paint를 시작합니다.
  → 그러므로 첫 Load는 빠르지만, 첫 Paint는 느릴 수 있습니다.

• Runtime에 스타일을 생성하지 않으면서 더 빨리 페이지를 로드할 수 있다는 장점이 있습니다.

• 단, Build Time에 CSS를 생성해야 하기에 webpack 설정을 해야 합니다.

▷ Vanilla Extract의 특징

이러한 Zero-Runtime CSS-In-JS의 대표적인 예로, Vanilla Extract가 있습니다.

Vanilla Extract는 다시 말해, CSS Module-In-Typescript라 할 수 있습니다.

• Build Time에 TS 파일을 CSS 파일로 만듭니다. (Sass와 같은, preprocessor!) → Vanilla Extract 공식 문서에 있는 ‘Use Typescript as your preprocessor’라는 말이 바로 이것을 의미합니다.
  
• 모든 css 코드를 스타일시트(style.css/sccss)가 아닌, style.css.ts와 같은 .css.ts postfix 파일에 작성합니다. → 따라서, Type-safe하게 theme를 다룰 수 있습니다.
  

▷ Vanilla Extract 사용하기

1. Vanilla Extract을 설치합니다.

   # with npm
   $ npm install @vanilla-extract/css
   
   # with yarn
   $ yarn add @vanilla-extract/css

   
   

2. .css.ts postfix 파일에 스타일을 작성합니다.
   

   → 이처럼 .css.ts 파일에 작성된 변수들은, 오른쪽처럼 난수화된 클래스 이름으로 전처리 되어 만들어집니다.
   → CSS Module을 사용하는 것과 유사한 방식이나, 전처리하기 위해 선언된 변수들이 Typescript로 작성되어 바로 타입 추론이 가능하다는 특징이 있습니다.
   
   

3. 스타일을 불러와 적용시킵니다.
   

   → CSS Module처럼, 전처리하기 위해 사용된 변수들은 Scope가 지역적으로 제한되어 다른 .css.ts 파일에서 선언된 변수와 동일한 이름을 사용하더라도 서로 클래스명이 충돌되지 않습니다!

   
   

   ---

🌟 Epilogue : 정리하면..

✨ CSS의 진화과정 ✨
: CSS -> SCSS -> BEM -> CSS Moudles -> CSS-In-JS -> Tailwind(Atomic CSS) -> Vanilla Extract(Zero-Runtime CSS-In-JS)

본 글에서는 CSS의 역사를 짧게 톺아보며, CSS 라이브러리와 방법론이 등장하게 된 배경, 특징, 장단점에 대해 비교해 보았습니다.

기술은 언제나 빠르게 진보하고 유행 또한 돌고 돌기 때문에 어떤 것이 가장 좋은 방법이다!라고 단정짓기는 어려운것 같습니다.

그러나 이런 CSS의 흐름과 각 라이브러리들의 장단점을 알고 있다면, 추후 진행할 프로젝트 및 상황에 가장 적절한 스타일링 방법을 적용할수 있을것이라 생각합니다.

• ex. 빠른 개발이 필요한 상황 -> 개발자 친화적인 CSS-In-JS를 사용하기
• ex. 성능 향상 및 안정적인 서비스 구축이 필요한 상황 -> CSS module이나 Tailwind와 같은 Utility CSS 활용하기

---

• 공식 문서/깃허브
  - CSS Moudles
  - Styled-Components
  - Emotion
  - Tailwind
  - Vanilla Extract
  

• 출처:
  - https://velog.io/@teo/css-history-1
  - https://blog.toycrane.xyz/css%EC%9D%98-%EC%A7%84%ED%99%94-%EA%B3%BC%EC%A0%95-f7c9b4310ff7
  - https://fe-developers.kakaoent.com/2022/220210-css-in-kakaowebtoon/?fbclid=IwAR10q4zhGGIdjdd7l9VyDC9Xn0AU0UkoGeDmTyoWotpt6cxn4T6WHLMPkGg