[CSS] Web CSS 에서 Atomic CSS 트렌드인가?

🖋️ Web CSS 에서 Atomic CSS 트렌드인가?

Atomic CSS가 왜 대세가 되었는지 이해하기 위해서는
CSS 스타일링 방식의 다양한 접근법을 살펴볼 필요가 있습니다.

여기서는 CSS in JS, Atomic CSS, 그리고 다른 스타일링 방법을 비교하면서
Atomic CSS가 왜 주목받고 있는지 설명하겠습니다.

• 1. CSS in JS
  

  • 설명

    • CSS in JS는 JavaScript 코드 안에서 CSS를 작성할 수 있는 방법입니다.
      이는 스타일을 컴포넌트 단위로 작성하고, 동적으로 스타일을 적용할 수 있게 해줍니다.

  • 주요 프레임워크

    • Styled-Components
      • Tagged 템플릿 리터럴을 사용하여 스타일을 작성
      • React 컴포넌트로 스타일을 적용합니다.
    • Emotion
      • Styled-Components와 유사
      • 더 많은 커스터마이징 옵션을 제공

  • 장점

    • Scoped 스타일링
      • CSS가 컴포넌트 단위로 적용되어 스타일 충돌을 방지합니다.
    • 동적 스타일링
      • Props를 통해 동적으로 스타일을 변경할 수 있습니다.
    • 유지보수성
      • 스타일과 컴포넌트를 한 파일에 작성하여 코드 유지보수가 쉬워집니다.

  • 단점

    • 런타임 비용: 런타임에 스타일이 생성되고 적용되므로 퍼포먼스 이슈가 발생할 수 있습니다.
    • 빌드 사이즈: 모든 스타일이 JS 파일에 포함되므로, 번들 사이즈가 커질 수 있습니다.

• 2. Atomic CSS
  

  • 설명

    • Atomic CSS는 각 CSS 클래스가 단일 스타일 속성만을 포함하도록 설계된 방법
    • 이러한 작은 유틸리티 클래스들을 조합하여 스타일을 구성

  • 주요 프레임워크

    • TailwindCSS
      • 미리 정의된 유틸리티 클래스를 제공
      • JIT 컴파일러를 통해 사용되지 않는 CSS를 제거하여 최적화
    • AdorableCSS
      • 짧고 간결한 클래스 이름을 사용하여 직관적인 스타일링을 제공

  • 장점

    • 퍼포먼스 최적화
      • JIT 컴파일러를 통해 사용되지 않는 CSS를 제거하여 최적화
    • 재사용성
      • 유틸리티 클래스를 재사용하여 일관된 스타일을 유지 가능
    • 빠른 개발 속도
      • 미리 정의된 클래스를 사용하여 빠르게 스타일을 적용 가능

  • 단점

    • 클래스 네이밍
      • 많은 클래스를 조합하여 스타일을 적용하므로 HTML이 다소 복잡해질 수 있음
    • 초기 학습 곡선
      • 유틸리티 클래스의 이름과 사용법을 익히는 데 시간이 걸릴 수 있음

• 3. Traditional CSS and Preprocessors

  • 설명

    • 기존의 CSS 파일과 Sass, Less 등의 프리프로세서를 사용하는 방법

  • 장점

    • 표준 방식
      • 표준 CSS를 사용하여 브라우저 호환성이 좋습니다.
    • 프리프로세서 기능
      • Sass와 Less는 변수, 믹스인, 중첩 규칙 등의 기능을 제공하여
        더 나은 코드 구조를 지원

  • 단점

    • 스타일 충돌
      • 전역 네임스페이스로 인해 스타일 충돌이 발생 가능
    • 유지보수성
      • 대규모 프로젝트에서는 스타일 시트가 복잡해지고 관리하기 어려움

• 4. CSS Modules

  • 설명

    • CSS Modules는 각 CSS 파일을 로컬 범위로 컴파일하여 컴포넌트 단위로 스타일을 적용합니다.

  • 장점

    • Scoped 스타일링
      • CSS가 로컬 범위로 적용되어 스타일 충돌을 방지
    • 유지보수성
      • 스타일이 컴포넌트와 함께 정의되어 코드 유지보수가 쉬움

  • 단점

    • 복잡한 설정
      • Webpack 등의 빌드 도구 설정이 필요
    • 동적 스타일링
      • CSS in JS만큼 동적으로 스타일을 변경하기 어려움

Q. 왜 Atomic CSS가 대세가 되었는가?

• 퍼포먼스 최적화

  • JIT 컴파일러를 통해 사용되지 않는 CSS를 제거하여 최적화할 수 있습니다.
  • 이는 페이지 로드 속도를 향상시키고, 사용자 경험을 개선합니다.
    
    

• 빠른 개발 속도

  • 미리 정의된 유틸리티 클래스를 사용하여 빠르게 스타일을 적용할 수 있습니다.
  • 이는 특히 프로토타이핑 단계에서 유용합니다.
    
    

• 일관성

  • 중앙에서 관리되는 스타일 시스템을 통해 일관성을 유지할 수 있습니다.
  • 이는 대규모 프로젝트에서 중요한 요소입니다.
    
    

• 재사용성

  • 유틸리티 클래스를 재사용하여 코드 중복을 줄일 수 있습니다.
  • 이는 유지보수성을 높이고, 코드의 가독성을 개선합니다.
    
    

• 커뮤니티와 생태계

  • TailwindCSS와 같은 프레임워크는 활발한 커뮤니티와 생태계를 가지고 있음
  • 다양한 플러그인과 도구를 활용할 수 있습니다.

Q. 결론

Atomic CSS는 현대 웹 개발에서 퍼포먼스, 일관성, 재사용성, 빠른 개발 속도 등 다양한 이점을 제공하여 트렌드가 되었습니다. TailwindCSS와 AdorableCSS는 이러한 Atomic CSS의 장점을 잘 살린 대표적인 프레임워크로, 프로젝트의 요구사항에 따라 선택하여 사용할 수 있습니다. Atomic CSS는 특히 대규모 프로젝트에서 일관된 스타일을 유지하고, 퍼포먼스를 최적화하는 데 매우 유용합니다.