[CSS] CSS 방법론 소개

 

CSS방법론

CSS 방법론은 웹 개발에서 CSS 코드를 구조화하고 관리하는 규칙과 패턴을 제시하는 방법이다.

주로 CSS가 복잡해질수록 스타일을 유지보수하고 협업을 용이하게 만드는 데 중요한 역할을 한다.

 

 

 

1. BEM (Block Element Modifier)

BEM은 구조화된 클래스 명명 규칙으로, 큰 프로젝트에서 일관성 있게 CSS를 관리할 수 있도록 도와준다.

BEM은 CSS 클래스 이름을 블록, 요소, 수정자로 나누어 작성한다.

• Block: 독립적인 UI 구성 요소 (예: .menu, .header, .card)
• Element: 블록 안의 구성 요소 (예: .menu__item, .card__title)
• Modifier: 블록 또는 요소의 상태나 변형 (예: .menu__item--active, .card--highlighted)

<div class="card card--highlighted">
    <h2 class="card__title">타이틀입니다</h2>
    <p class="card_description">설명 입니다.</p>
</div>

장점:

• 명확한 클래스 이름 덕분에 협업 시 코드의 이해가 쉬워짐.
• 스타일의 의도를 명확히 전달하고, 재사용성이 높아짐.

 

2. SMACSS (Scalable and Modular Architecture for CSS)

SMACSS는 모듈화된 스타일시트를 작성하기 위한 방법론으로,

CSS를 유연하게 관리하기 위해 다섯 가지 주요 카테고리로 나눈다.

1. Base: 기본적인 스타일 (예: html, body 스타일)
2. Layout: 레이아웃 관련 스타일 (예: .header, .footer)
3. Module: 독립적인 UI 구성 요소 (예: .btn, .card)
4. State: 상태에 따른 스타일 (예: .is-active, .is-hidden)
5. Theme: 디자인 테마 관련 스타일 (예: .theme-light, .theme-dark)

장점:

• 명확한 카테고리화 덕분에 코드가 잘 구조화되고 관리하기 쉬움.
• 모듈화된 접근 방식으로 스타일을 확장하거나 변경할 때 유리함.

 

3. OOCSS (Object-Oriented CSS)

OOCSS는 Javascript와 같은 객체 지향 프로그래밍에서의 개념을 CSS에 적용한 방법론이다.

UI를 독립적인 객체(object) 로 분리하고, 각 객체의 스타일을 재사용할 수 있도록 만든다.

 

• Structure (구조): 레이아웃을 정의하는 스타일을 분리 (예: .layout, .row, .column)
• Skin (피부): 색상, 배경 등 시각적 스타일을 정의 (예: .btn, .card, .icon)

/* 구조 스타일 */
.layout {
  display: flex;
}

.row {
  flex: 1;
}

/* 시각적 스타일 */
.btn {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
}

장점:

• 스타일을 재사용할 수 있어 코드 중복을 줄임.
• UI 구성 요소의 독립성을 높여 유지보수가 용이해짐.

 

4. Atomic CSS

Atomic CSS는 최소화된 CSS 클래스를 사용하여 스타일을 적용하는 방법론이다.

각각의 클래스는 한 가지 스타일만 담당하며, 이를 조합하여 필요한 스타일을 적용한다.

예시:

html

<div class="p-10 bg-blue text-white">Content</div>

 

.p-10 {
	padding: 10px;
}

.bg-blue {
	background-color: blue;
}

.text-white {
	color: white;
}

장점:

• CSS의 중복을 줄이고, 매우 작은 클래스를 사용하여 효율적인 스타일링이 가능.
• 스타일을 재사용할 수 있어 유지보수가 용이.

 

 

CSS 방법론은 팀 협업과 코드 유지보수를 용이하게 만들기 위해 다양한 접근 방식을 제공한다.

 

각 방법론은 사용자의 필요와 프로젝트 규모에 따라 선택할 수 있으며, 각 방법론의 구조화된 접근은 코드 품질을 향상시킬 수 있습니다.