[CSS] 컴포넌트 스타일링 관리

개요

HTML이 처음 등장한 1991년에는 CSS가 없었으나, 디자인에 대한 요구가 커지며 CSS 탄생함

그러나 웹이 복잡해지고 동작 기능 요구가 증가하며 HTML과 CSS만으로는 모든 스타일을 제어할 수 없어짐

이를 해결하기 위해 여러 가지 스타일 구성 방식이 나타났으며 크게 CSS-in-JS와 CSS-in-CSS가 생김

 

 

CSS 문제점

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

 

 

CSS-in-CSS란?

CSS 파일 내부에서 CSS 스타일을 작성하는 방식

 

1. CSS Module

• CSS를 모듈화하여 사용하는 방식으로, CSS 클래스 이름 충돌 문제를 해결하는 방법 중 하나이다.
• `.module.css` 확장자 사용

.Box {
  background: black;
  color: white;
  padding: 2rem;
}

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

function Box() {
  return <div className={styles.Box}>{styles.Box}</div>;
}

export default Box;

 

2. SCSS

• CSS 전처리기 : CSS 코드를 기계가 이해할 수 있는 일반적인 CSS 코드로 컴파일 해주는 역할
• CSS 전처리기의 종류: `Sass`, `Less`, `Stylus`
• SCSS는 Sass의 모든 기능을 지원하는 CSS의 상위 집합

/* Sass : 선택자의 유효 범위를 '들여쓰기'로 구분 */

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

/* SCSS : 선택자의 유효 범위를 '{}'로 구분 */

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

 

3. Tailwind CSS

• 유틸리티 퍼스트 CSS 프레임워크
• 미리 정의된 클래스를 조합하여 빠르게 UI를 구성
• 커스터마이징이 쉬워 큰 인기

<button class="bg-palevioletred rounded-lg text-white p-2">
  Click Me
</button>

 

CSS-in-JS란?

• 자바스크립트 코드에서 CSS를 작성하는 방식
• 별도의 파일로 작성하는 것이 아니라, 스타일 정보를 javascript에 포함시켜 컴포넌트 별로 스타일 관리 가능

1. Styled-component

• 가장 널리 사용되는 CSS-in-JS 라이브러리 중 하나
• React와 잘 통합되어 있으며 동적인 스타일링과 테마 관리에 강점을 가지고 있음

import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
  padding: 0.5em 1em;
`;

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

export default App;

 

2. Emotion

• 성능과 유연성에 중점을 둔 CSS-in-JS 라이브러리
• Styled-components와 비슷하지만 더 많은 스타일링 방법을 제공
• css 함수와 css prop 등을 통해 다양한 스타일 작성 방식이 가능함

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

const buttonStyle = css`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
  padding: 0.5em 1em;
`;

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

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

export default App;

 

 

3. JSS(Styled-JSS)

• JavaScript 오브젝트를 사용하여 스타일을 작성하는 방법
• React JSS와 함께 사용하면 React 컴포넌트 스타일을 적용하기에 용이

import React from 'react';
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
  button: {
    background: 'palevioletred',
    borderRadius: 3,
    border: 'none',
    color: 'white',
    padding: '0.5em 1em'
  }
});

function App() {
  const classes = useStyles();
  return <button className={classes.button}>Click Me</button>;
}

export default App;

 

 

4. Styled-JSX

• Next.js에서 기본적으로 제공하는 CSS-in-JS 솔루션
• JSX 내부에 스타일을 직접 작성

export default function App() {
  return (
    <div>
      <button>Click Me</button>
      <style jsx>{`
        button {
          background: palevioletred;
          border-radius: 3px;
          border: none;
          color: white;
          padding: 0.5em 1em;
        }
      `}</style>
    </div>
  );
}

 

장단점

CSS-in-CSS

장점

• HTML, CSS, JS 가 구분되어 유지 관리가 쉬움
• 전역 스타일을 쉽게 정의 및 관리 가능
• 별도의 CSS 파일을 사용하면 브라우저 캐싱이 가능하여 성능이 향상됨
• 전통적인 CSS 작성 방식으로 러닝 커브가 적음

단점

• 전역 범위로 인해 클래스 명 충돌 가능성 있음 (CSS Module 사용하여 극복 가능)
• CSS 만으로 상태에 따른 동작 스타일링 어려움 (JS를 사용하여 클래스 조작하거나 인라인 스타일을 활용해야 함)
• 코드 재사용이 어려움 (전처리기로 극복 가능)

CSS-in-JS

장점

• 컴포넌트 기반 구조로, 각 컴포넌트의 스타일을 독립적으로 관리 가능
• JS를 사용하여 스타일을 생성하므로(=동적 스타일링), 상태에 따라 스타일 쉽게 변경 가능
• 코드 재사용 및 모듈화가 가능하여 유지 보수 용이
• 벤더 프리픽스를 자동으로 추가해주기 때문에 브라우저 호환성 유지에 용이

단점

• CSS-in-CSS에 비해 러닝 커브가 있음
• 웹 브라우저에서 CSS 파일을 캐싱할 수 없기 때문에 초기 랜더링 속도가 느릴 수 있음

벤더 프리픽스 : 브라우저 호환성을 위해 필요한 접두사를 의미

(transform 속성의 경우 chorme, safari 등의 브라우저에서 각각 -webkit-transform, -moz-transform 과 같은 접두사를 붙여나 하나 CSS-in-JS에서는 이를 자동으로 추가해줌 )