CSS 방법론이란?
CSS 방법론은 대규모 프로젝트나 팀 작업에서 CSS 코드의 유지보수성, 재사용성, 확장성을 향상시키기 위해 사용되는 일련의 규칙을 의미한다.
이러한 방법론을 사용하면, CSS의 복잡성을 관리하고 코드의 구조를 표준화할 수 있으며, 현재 개발자들이 사용하는 방법론은 각각의 특징과 목적, 원칙을 갖고 있다.
CSS 방법론은 그 자체로 독립적인 지침과 원칙을 가지고 있지만, 실제 프로젝트에서는 이러한 방법론을 혼합하거나 조정하여 사용하는 경우도 많기 때문에 하나의 방법론만을 사용해야 하는것이 아니라 프로젝트의 요구사항, 흐름에 때라 맞는 방법론을 사용하는것이 좋다.
주로 사용하는 CSS 방법론
BEM (Block Element Modifier)
BEM의 목적은 구조와 의미를 명확하게 나타내어 CSS의 유지보수성과 재사용성을 향상시키는 것이다.
Block (블록), Element (요소), Modifier (수정자) 세 부분으로 나누어 클래스명을 구성한다.
Block (블록)
블록은 웹페이지의 독립적인 구성 요소를 의미하며 헤더, 메뉴, 버튼 등과 같이 재사용 가능한 높은 수준의 컴포넌트를 나타낸다.
- 예 :
.header,.menu,.button
Element (요소)
요소는 블록 내부의 구성 요소로, 해당 블록의 일부로만 의미를 가지며, BEM에서는 블록과 요소 사이에 __ (더블 언더스코어)를 사용하여 연결한다.
- 예 : 블록이
.menu일 경우, 요소는.menu__item,.menu__link
Modifier (수정자)
수정자는 블록 또는 요소의 다양한 상태와 변형을 나타내는데 사용된다. BEM에서는 수정자를 표현할 때 -- (더블 대시)를 사용한다.
- 예 : 블록
.button의 주요 상태를 표현할 때.button--disabled,.button--primary등으로 표현할 수 있다.
/* 블록 */
.header {
...
}
/* 요소 */
.header__nav {
...
}
.header__logo {
...
}
/* 수정자 */
.header__nav--active {
...
}
BEM의 장점
- 명확성: 클래스명을 통해 스타일의 용도와 관계를 명확하게 알 수 있다.
- 재사용성: 스타일이 독립적으로 구성되기 때문에 다른 부분에 재사용하기 쉽다.
- 유지보수성: 스타일 변경이 필요할 때, 관련된 부분만 찾아서 수정하기 편리하다.
BEM의 단점
- 클래스명이 길어질 수 있음: 구조가 복잡한 경우, 클래스명이 길어져서 HTML 코드가 복잡해질 수 있다.
OOCSS (Object Oriented CSS)
객체 지향 프로그래밍에서 영감을 받은 OOCSS는 재사용성, 확장성 및 코드 유지보수성을 높이기 위해 디자인 패턴과 원칙을 적용한다.
OOCSS의 주요 원칙
- 구조와 스킨 분리: 스타일의 구조(레이아웃)와 피부(테마, 스킨)를 분리해야 한다.
- 버튼의 기본 레이아웃과 그 버튼의 특정 테마(배경색, 테두리 등)를 분리하여 스타일링해야 한다.
- 컨테이너와 콘텐츠 분리: 스타일은 특정 위치나 컨테이너에 의존적이지 않아야 한다.
- 사이드바에만 사용되는 특정 스타일 대신 일반적으로 재사용 가능한 스타일을 만들어야 한다.
<style>
/* 일반 CSS방식 */
.sidebar h1 {
width: 100%;
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}
/* OOCSS 방식 */
/* 구조 */
.title {
width: 100%;
font-size: 20px;
font-weight: bold;
}
/* 스킨 */
.underline {
text-decoration: underline;
}
</style>
<body>
<section>
<h1 class='title underline'>
Title
</h1>
</section>
</body>
OOCSS의 장점
- 재사용성: 공통 구조와 스킨을 나누어 스타일링하면, 재사용이 쉽게 되며, 코드 중복이 줄어들고 일관된 디자인을 유지할 수 있다.
- 확장성: 새로운 테마나 레이아웃을 추가하기 쉽다.
- 유지보수: 변경사항이 발생할 때, 특정 부분만 수정하면 되므로 유지보수가 용이하다.
OOCSS의 단점
- 클래스의 과다 사용: HTML 요소에 여러 클래스를 적용해야 할 수 있어, HTML 구조가 복잡해질 수 있다.
- 학습 곡선: 팀원 모두가 OOCSS 원칙에 익숙해져야 효과적으로 사용할 수 있다.
SMACSS (Scalable and Modular Architecture for CSS)
대규모 웹 사이트와 애플리케이션의 CSS를 유지 관리하기 쉽게 만드는 데 초점을 맞춘 CSS 설계 방법론
SMACSS의 핵심은 CSS를 여러 카테고리로 나누어 관리 및 확장성을 높이는 것을 목표로 한다.
SMACSS의 주요 구성 요소
- Base: 기본 스타일. 태그 선택자, 속성 선택자 등을 사용하여 기본적인 스타일을 정의하며 기본 폰트, 링크 색상 등을 지정한다.
- Layout: 주요 레이아웃 컴포넌트를 스타일링하는 데 사용되며 헤더, 사이드바, 컨텐츠 영역 등 페이지의 주요 섹션을 대상으로 한다.
- Module: 재사용 가능한 모듈 또는 컴포넌트를 스타일링하며 버튼, 카드, 위젯과 같은 UI 요소가 해당된다.
- State: 컴포넌트의 활성, 비활성, 숨김 등과 같은 특정 상태를 나타낸다.
- Theme: 사이트의 테마 또는 스킨을 정의하는 스타일로, 해당 요소의 사용은 선택적이며, 모든 프로젝트에 필요한 것은 아니다.
/* Base */
body, html {
font-family: Arial, sans-serif;
padding: 0;
margin : 0;
}
a {
color: blue;
}
/* Layout */
.layout-header {
width: 100%;
height: 60px;
border-bottom: 1px solid #333333;
}
.layout-sidebar {
width: 70px;
height: 250px;
}
/* Module */
.module-card {
width: 100px;
height: 300px;
padding: 20px;
border-radius: 10px;
background-color: #ffffff;
}
/* State */
.state-active {
background-color: blue;
}
.state-disable {
background-color: gray;
}
SMACSS의 장점
- 모듈성: 각 섹션은 독립적이므로 코드의 중복이 감소하고 재사용성이 향상된다.
- 유지보수: 구성 요소별로 스타일이 분리되어 있으므로 변경 사항을 쉽게 추적하고 수정할 수 있다.
- 명확성: 카테고리와 명명 규칙을 사용하면 코드의 의도와 구조가 명확해진다.
SMACSS의 단점
- 학습 곡선: 새로운 규칙과 구조를 학습해야 한다.
- 과도한 구조: 작은 프로젝트에서는 과도한 구조가 될 수 있다.
ACSS (Atomic CSS)
웹 디자인을 원자적인 부분으로 분해하는 접근 방식을 취한다.
원자는 고유하고 불변적인 작은 스타일 단위를 의미하며, 각 원자는 단일 스타일 속성을 나타낸다.
ACSS 핵심 원칙
- 단일 책임 원칙: 각 원자 클래스는 하나의 속성과 값을 가지며, 그 목적이 명확해야 한다.
- 재사용성: 원자 클래스는 다양한 컴포넌트와 컨텍스트에서 재사용될 수 있다.
- 명확성: 클래스 이름은 대개 스타일 규칙의 속성과 값에 직접적으로 연관된다.
.m-10 { margin: 10px }
.p-10 { padding: 10px }
.text-center { text-align: center; }
.flex-center {
display: flex;
align-items: center;
}
ACSS의 장점
- 작고 재사용 가능: 원자 클래스는 재사용하기 쉽기 때문에 CSS의 크기가 줄어들고 중복이 감소한다.
- 명확한 의도: 클래스 이름만 보고도 해당 스타일을 파악할 수 있어 코드의 가독성이 향상된다.
- 더 빠른 스타일링: 기존 원자 클래스를 조합하여 빠르게 새로운 디자인을 만들 수 있다.
ACSS의 단점
- 클래스 오버로드: HTML에서 많은 원자 클래스를 사용해야 할 수 있어 복잡하게 보일 수 있다.
- 학습 곡선: 이 방법론의 명명 규칙과 패턴을 배워야 한다.
- 유연성 제한: 디자인 변경 시, HTML과 CSS 모두 수정해야 할 수 있다.
마무리하며
CSS는 웹 개발의 중심부에 위치하며, 그 방대함과 복잡함으로 인해 여러 CSS 방법론이 탄생하게 되었으며 BEM, OOCSS, SMACSS, ACSS 등 다양한 접근법을 통해 웹 디자인과 개발 프로세스를 보다 체계적이고 효율적으로 만들어갈 수 있게 되었다.
하지만 중요한 것은 모든 방법론이 '정답'은 아니며, 각 프로젝트와 팀의 독특한 상황과 요구 사항에 가장 잘 맞는 방법론을 선택하고 적용하는 능력이 우선시 되어야 할 것이다.
CSS방법론은 도구일 뿐이기 때문에, 그 자체가 목표가 아니라 웹 개발의 효율성과 유지 보수성을 향상시키기 위한 수단으로서만 실행되어야 한다.
'Develop Log > HTML, CSS' 카테고리의 다른 글
| HTML - SEO를 위한 Meta 태그 알아보기 (1) | 2023.08.20 |
|---|---|
| SASS(SCSS)에 대해서 알아보자 (0) | 2023.08.02 |
| CSS - 가상 선택자(Pseudo Selectors) (0) | 2023.08.02 |
| 브라우저 렌더링 알아보기 (0) | 2023.08.01 |
| CSS - border 속성과 outline 속성 (0) | 2023.07.26 |
