[CSS] CSS 방법론(CSS Methodology)

CSS 작성에는 다양한 방법론이 있습니다. 각자의 규칙으로 코드의 가독성, 재사용성, 확장성 등을 확장시킵니다. 여러 CSS 방법론들 중 대표적인 몇 가지 방법론을 소개해보겠습니다.

SMACSS(Scalable and Modular Architecture for CSS)

• 특징 : 사이트 구조를 모듈로 분리해 재사용 가능하고 확장 가능한 CSS 아키텍처를 구축하는 방법론입니다. 범주화(categorization)가 특징으로, 스타일을 5개의 유형으로 분류하여 각 유형에 맞는 선택자와 네이밍 컨벤션을 제시합니다.
  • 기초(Base)
    • 웹사이트 전반에서 쓰이는 모든 요소의 기본 값
    • 스타일 시트가 모든 브라우저에서 일관되도록 합니다.
  • 레이아웃(Layout)
    • 페이지를 주요 섹션들로 나누고 페이지에 요소를 적절하게 배치해 구조를 만드는 역할을 합니다.
    • id는 CSS 에서 사용하게 되면 클래스와 성능은 같지만 재사용성이 떨어지기 때문에 클래스를 주로 사용합니다.
  • 모듈(Module)
    • 레이아웃 요소 내 더 작은 부분을 정의합니다.
    • 클래스 선택자를 사용하며 요소 선택자는 가급적 피합니다.
    • 클래스 이름은 적용되는 스타일의 내용을 담습니다.
  • 상태(States)
    • 각 요소에 가능한 변형을 나타냅니다.
    • 기존 스타일을 보강해서 표현합니다(스타일을 덧붙이거나 덮어씌워서 나타냄).
    • is- prefix 를 붙여 상태를 제어하는 스타일임을 나타냅니다.
  • 테마(Theme)
    • 모듈과 레이아웃의 모양을 정의합니다.
    • 프로젝트 전반에 걸쳐 반복되는 요소입니다.
• 장단점: 큰 프로젝트에서 특히 유용합니다. 대신 규모가 작은 프로젝트에서 사용하면 과도하게 복잡할 수 있습니다.

OOCSS(Object-Oriented CSS)

• 특징 : 객체 지향 프로그래밍 개념을 CSS에 적용한 방법론입니다. 재사용 가능한 컴포넌트와 모듈을 생성합니다. 두 가지 기본 원칙을 가집니다.
  1. 구조와 모양 분리하기 : 반복적인 시각적 기능을 스킨으로 정의해 분리합니다. 다양한 객체와 혼합해 중복코드를 없앱니다.
  2. 컨테이너와 컨텐츠 분리하기 : 위치에 의존적인 스타일을 정의하지 않습니다. 요소는 어느 위치에서도 동일하게 보여야 합니다.
• 장단점: 재사용성이 높아 개발 시간 단축이 가능합니다. 하지만 복잡한 구조일 경우 관리가 어려워질 수 있습니다.

BEM(Block, Element, Modifier)

• 특징 : 웹 컴포넌트를 블록(Block), 요소(Element), 수정자(Modifier)라는 세 가지 유형으로 나누어 클래스 네이밍 컨벤션을 정의합니다. 상대적으로 SMACSS보다 강제성이 높습니다. 재사용성을 높이기 위해 아래와 같은 규칙들이 있습니다.
  • CSS 로 스타일을 입힐 때 id 를 사용하는 것을 막습니다.
  • 요소 셀렉터를 통해서 직접 스타일을 적용하면 안 됩니다.
  • 자손 선택자 사용하면 안 됩니다.
• 네이밍 컨벤션 : 소문자와 숫자만 이용하고  여러 단어의 조합은 하이픈(-)과 언더바(_)를 사용하여 연결합니다.
• B(Block)
  • 재사용 할 수 있는 독립적인 페이지 구성 요소
  • HTML 에서 블록은 class 로 표시
  • 주변 환경에 영향을 받지 않아야 하며, 여백이나 위치를 설정하면 안 된다.
• E(Element)
  • 블록 안에서 특정 기능을 담당하는 부분으로 block_element 형태로 사용
  • 요소는 중첩해서 작성 가능
• M(Modifier)
  • 블록이나 요소의 모양, 상태를 정의
  • 수식어에는 불리언 타입과 키-값 타입이 있습니다.
• 장단점 : 네잉밍 규칙이 명확하다는 장점이 있습니다. 다만 복잡한 구조에서는 오히려 클래스 이름이 길고 복잡해질 수 있습니다.

기타

Atomic Design

UI를 작은 단위(Atoms)에서 큰 단위(Pages)까지 계층적으로 나누어 구성.

Atoms, Molecules, Organisms, Templates, Pages의 다섯 가지 단계로 나누어 디자인.

 

ITCSS (Inverted Triangle CSS)

CSS를 일반적이고 넓은 범위의 스타일에서 구체적이고 좁은 범위의 스타일로 구성.

레이어드 아키텍처를 통해 코드의 중복을 줄이고 유지보수를 용이하게 함.

Utility-First CSS

Tailwind CSS와 같은 프레임워크에서 사용. 유틸리티 클래스(작고, 단일 목적으로 사용되는 클래스)를 사용하여 스타일을 적용.

예: .text-center, .m-4, .bg-blue.

 

 

여러 CSS 방법론에 대해 찾아보면서, 지금까지 작업했던 프로젝트의 CSS 코드에 대한 고민이 부족했다는 것을 깨닫는 계기가 되었습니다🥲 다음에는 사용하는 스타일링 라이브러리에 적합한 CSS 방법론을 고려하면서 작업해봐야겠어요!

참고자료

5 Methodologies for Architecting CSS

Interview_Question_for_Beginner/FrontEnd at main · JaeYeopHan/Interview_Question_for_Beginner

 

아토믹 디자인을 활용한 디자인 시스템 도입기 | 카카오엔터테인먼트 FE 기술블로그

+) Phind 답변