Published on

CSS vs CSS-IN-JS VS CSS MODULE

Authors
  • avatar
    Name
    Hyo814
    Twitter

📝새로 배운 개념

개념

CSS의 우선 순위와 계단식 구조

CSS의 우선 순위는 CSS 규칙이 적용될 때 어떤 규칙이 우선적으로 적용되는지를 결정하는 규칙입니다. CSS의 우선 순위는 다음과 같은 요소들에 의해 결정됩니다:

  • 인라인 스타일 (Inline styles)
  • ID 셀렉터 (ID selectors)
  • 클래스, 속성, 의사-클래스 셀렉터 (Class, attribute, and pseudo-class selectors)
  • 태그(요소) 셀렉터 (Type selectors)
  • 전역 셀렉터 (Universal selectors), 속성 셀렉터 (Attribute selectors), 의사-요소 셀렉터 (Pseudo-element selectors)
  • 중요도 (Importance) 표시 (!important)

계단식 구조

1. 우선 순위 (Priority)

CSS 규칙은 스타일 시트에서 나오는 순서에 따라 적용됩니다. 만약 동일한 요소에 대해 여러 규칙이 충돌하는 경우, 나중에 정의된 규칙이 우선합니다.

2. 명시도 (Specificity)

CSS 규칙의 명시도는 각 규칙의 "강도"를 결정하는 요소입니다. 명시도는 다음과 같이 계산됩니다:

  • 인라인 스타일: 1000
  • ID 셀렉터: 100
  • 클래스, 속성, 의사 클래스 셀렉터: 10
  • 요소(태그) 셀렉터: 1

3. 원천 (Origin)

CSS 규칙의 원천도 중요합니다. CSS 규칙은 세 가지 원천에서 올 수 있습니다:

  • 브라우저 기본 스타일 (User Agent Stylesheet)
  • 사용자가 정의한 스타일 (User Stylesheet)
  • 개발자가 정의한 스타일 (Author Stylesheet)

CSS 상속

CSS 상속은 특정 CSS 속성이 부모 요소에서 자식 요소로 자동으로 전달되는 것을 의미합니다. 이는 CSS가 웹 페이지의 스타일을 쉽게 관리할 수 있도록 도와줍니다.

상속의 기본 개념

  • 상속되는 속성: 텍스트 관련 속성들, 예를 들어 color, font-family, font-size, line-height, text-align 등은 상속됩니다.
  • 상속되지 않는 속성: 박스 모델 관련 속성들, 예를 들어 margin, padding, border, width, height 등은 상속되지 않습니다.

상속과 우선 순위의 상호작용

상속된 스타일은 특정 요소에 직접 적용된 스타일 규칙보다 우선 순위가 낮습니다. 즉, 상속된 스타일은 해당 요소에 다른 스타일이 적용되지 않았을 때만 적용됩니다.

CSS의 계단식 구조

  • 중요도(Importance): !important 규칙은 모든 다른 선언보다 높은 우선순위를 가집니다.
  • 특이성(Specificity): 특이성이 높은 선택자는 특이성이 낮은 선택자보다 우선합니다. 예를 들어, ID 선택자는 클래스 선택자보다 특이성이 높고, 클래스 선택자는 태그 선택자보다 특이성이 높습니다.
    • ID 선택자 (#id): 0,1,0
    • 클래스 선택자 (.class), 속성 선택자 ([type="text"]), 가상 클래스 (:hover): 0,0,1
    • 태그 선택자 (div, h1), 가상 요소 (::before): 0,0,0,1
  • 소스 순서(Source Order): HTML 문서에 나타나는 순서대로 스타일이 적용됩니다. 같은 중요도와 특이성을 가진 규칙이라면, 나중에 선언된 스타일이 우선 적용됩니다.

CSS 모듈(CSS Modules)

CSS 모듈은 전통적인 CSS 파일을 모듈 단위로 나누어 사용하는 방법입니다. 각 CSS 클래스는 고유의 범위를 가지므로, 전역 클래스 이름 충돌을 피할 수 있습니다.

장점

스코프 제한

CSS 모듈은 클래스 이름을 로컬로 스코프하여 클래스 이름 충돌을 방지합니다. 컴포넌트마다 고유한 클래스 이름이 생성되므로 전역 스타일 충돌을 최소화할 수 있습니다.

가독성 및 유지보수성

컴포넌트 단위로 CSS를 분리하면 코드의 가독성이 높아지고, 유지보수가 용이합니다. 각 컴포넌트에 해당하는 스타일이 모듈화되어 있어, 필요한 스타일만 로드하고 수정할 수 있습니다.

자동 완성 및 타입 지원

CSS 모듈을 사용할 때 타입스크립트와 함께 사용하면, IDE에서 자동 완성과 타입 체크를 지원받을 수 있습니다.

단점

설정 복잡성

CSS 모듈을 설정하려면 Webpack 등의 빌드 도구 설정이 필요합니다. 초기 설정이 복잡할 수 있습니다.

중복 코드

공통 스타일이 여러 컴포넌트에 걸쳐 사용될 경우, 중복된 스타일 코드가 생길 수 있습니다.

CSS-in-JS

CSS-in-JS는 JavaScript 안에 CSS를 작성하는 방법으로, 스타일을 컴포넌트와 밀접하게 결합할 수 있습니다. 대표적인 라이브러리로는 styled-components와 Emotion이 있습니다.

장점

  • 동적 스타일링: props나 state에 따라 스타일을 동적으로 변경할 수 있습니다.
  • 캡슐화: 스타일이 컴포넌트 내부에 캡슐화되어, 재사용성과 관리가 용이합니다.
  • JS 기능 사용 가능: JavaScript의 모든 기능을 스타일링에 활용할 수 있습니다.

단점

  • 성능 문제: 런타임에 스타일을 생성하므로, 성능 이슈가 발생할 수 있습니다.
  • 빌드 설정 복잡: Babel이나 Webpack 설정이 복잡해질 수 있습니다.
  • 초기 학습 비용: 기존 CSS와 다르게 새로운 문법과 사용법을 배워야 합니다.

Styled Components와 Emotion 비교

Styled Components

장점:

  • 간편한 사용: 스타일을 컴포넌트 안에 작성하기 쉽고 직관적입니다.
  • CSS 구문 지원: 기존 CSS 구문을 그대로 사용할 수 있어 학습 곡선이 낮습니다.
  • 테마 지원: 테마를 정의하고 쉽게 적용할 수 있습니다.

단점:

  • 런타임 오버헤드: 스타일이 런타임에 생성되므로, 성능에 영향을 줄 수 있습니다.
  • 패키지 크기: 비교적 큰 패키지 크기를 가질 수 있습니다.

Emotion

장점:

  • 높은 성능: 바벨 플러그인을 사용하여 빌드 타임에 스타일을 생성함으로써 성능을 최적화할 수 있습니다.
  • 유연성: css 함수와 styled 함수 둘 다 사용할 수 있어 유연합니다.
  • 경량화: 작은 패키지 크기를 가집니다.

단점:

  • 설정 복잡성: 최적의 성능을 위해 바벨 플러그인 설정이 필요합니다.
  • 학습 필요: 다양한 사용법이 있어 학습이 필요할 수 있습니다.

CSS 전처리기 (Preprocessors)

개요

CSS 전처리기는 CSS 작성 시 더욱 강력한 기능을 사용할 수 있게 해주는 도구입니다. 전처리기는 변수를 사용한 스타일 재사용, 중첩 규칙 작성, 믹스인(Mixin) 등의 기능을 제공합니다. 대표적인 CSS 전처리기로는 Sass, LESS, Stylus 등이 있습니다.

주요 기능

변수(Variables): 색상, 폰트 사이즈 등 자주 사용하는 값을 변수로 정의하여 재사용할 수 있습니다.중첩(Nesting): CSS 규칙을 중첩해서 작성할 수 있어, 구조가 더욱 명확해집니다.믹스인(Mixins): 재사용 가능한 스타일 블록을 정의하고, 이를 여러 곳에서 사용할 수 있습니다.연산(Operations): CSS 내에서 수학 연산을 사용할 수 있습니다.

장점

  • 코드 재사용성 증가
  • 더 나은 코드 구조
  • 유지보수성 향상

​

단점

  • 컴파일 단계 필요
  • 학습 곡선 존재

​

CSS 후처리기 (Postprocessors)

개요

CSS 후처리기는 작성된 CSS 코드에 후처리를 적용하여 코드의 호환성을 높이고, 최적화를 수행합니다. 대표적인 후처리기로는 PostCSS가 있습니다. PostCSS는 플러그인 기반으로 동작하며, 다양한 플러그인을 통해 기능을 확장할 수 있습니다.

주요 기능

자동 접두사 추가 (Autoprefixing): 벤더 접두사를 자동으로 추가하여 브라우저 호환성을 높입니다.CSS 최적화 (Minification): CSS 파일을 압축하여 파일 크기를 줄입니다.미래 CSS 기능 사용 (Future CSS Features): 아직 표준화되지 않은 최신 CSS 기능을 사용할 수 있습니다.

장점

  • 브라우저 호환성 향상
  • 코드 최적화
  • 최신 CSS 기능 사용 가능

​

단점

  • 설정 복잡성
  • 추가 빌드 단계 필요

디자인 시스템이란?

디자인 시스템은 일관성 있는 사용자 경험을 제공하기 위해 디자인 원칙, 컴포넌트, 스타일 가이드 등을 포함하는 통합된 시스템입니다. 이는 디자인과 개발 팀이 협력하여 사용자 인터페이스(UI)를 일관성 있게 구축하는 데 도움을 줍니다.

주요 구성 요소

디자인 원칙: 디자인 결정의 기준이 되는 원칙과 가이드라인.UI 컴포넌트: 버튼, 입력 필드, 모달 등 재사용 가능한 UI 요소.스타일 가이드: 색상, 타이포그래피, 간격 등 스타일 규칙.패턴: 반복적으로 사용되는 UI 패턴과 그 사용 방법.문서화: 시스템의 각 요소에 대한 설명과 사용 방법.

​

디자인 시스템의 장점

1. 일관성

디자인 시스템은 모든 UI 요소가 일관된 스타일과 동작을 가지도록 보장합니다. 이는 사용자 경험을 향상시키고, 브랜드 일관성을 유지하는 데 도움이 됩니다.

2. 효율성

재사용 가능한 컴포넌트와 패턴을 통해 디자인과 개발 속도가 빨라집니다. 개발자는 기존 컴포넌트를 사용하여 빠르게 UI를 구축할 수 있습니다.

3. 협업 강화

디자인 시스템은 디자인과 개발 팀 간의 협업을 촉진합니다. 명확한 가이드라인과 컴포넌트를 통해 커뮤니케이션이 원활해지고, 중복 작업이 줄어듭니다.

4. 유지보수 용이

중앙 집중화된 스타일과 컴포넌트 관리로 인해 유지보수가 용이합니다. 변경 사항이 시스템 전체에 일관되게 적용됩니다.

​

✨느낀 점&자기 선언

일관성 / 충돌을 피하기 위해서 만들었지만 한번 더 생각을 해 볼 수 있었 던 것 같다.

예시

Styled Components
import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px;
`;

function App() {
  return <Button>Click Me</Button>;
}
Emotion
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

const buttonStyle = css`
  background: blue;
  color: white;
  padding: 10px;
`;

const Button = styled.button`
  ${buttonStyle}
`;

function App() {
  return <Button>Click Me</Button>;
}

🔗레퍼런스

참고 강의/글

읽을 예정

  1. CSS 전처리기 (Preprocessors):
  1. CSS 후처리기 (Postprocessors):
  1. Styled Components:
  1. Emotion:
  1. Ant Design:
  1. Material-UI: