CSS에서 클래스 네임을 지을 때 작성하는 방식으로 일종의 naming convention이다
쉽게 말해 CSS방법론이란 웹에서 CSS의 영향력이 높아지게 되면서 CSS사용시 클래스 이름을 어떻게 작성할지, 어떠한 방식으로 스타일을 작성할지 등 CSS를 보다 효율적으로 작성하기 위해 정의된 일종의 규칙이다.
CSS방법론에는 다양한 방법론들이 존재하지만 크게 OOCSS, BEM, SMACSS로 나눠지게 되며 상황에 따라 다르게 적용된다.
OOCSS(Object Oriented CSS)는 CSS를 모듈(module) 방식으로 작성하여 중복을 줄이는 방식의 방법론이다
OOCSS는 가장 많이 사용되는 방법론으로 구조와 스타일을 분리하여 작성한다.
중복되는 디자인 요소를 따로 빼내어 작성하기 때문에 반복적으로 사용가능하다. 또한 코드의 재사용성이 높아져 적은 코드량으로 최적의 성능을 보인다.
공통된 부분을 찾아 어디서나 재활용 할 수 있다는 장점이 있지만 다중 클래스 사용으로 인해 코드의 가독성이 떨어질 수 있는 단점이 존재한다.
<div class="header common-width">Header</div>
<div class="footer common-width">Footer</div>
.header {
position: fixed;
top: 0;
}
.footer {
position: relative;
bottom: 0;
}
.common-width {
width: 800px;
margin: 0;
}
// 기존 방식
<a class=”instagram_btn instagram_skin”>Instagram</a>
<a class=”facebook_btn facebook_skin”>Facebook</a>
// OOCSS 적용
<a class=”btn skin instagram”>Instagram</a>
<a class=”btn skin facebook”>Facebook</a>
.btn -> 공통 버튼 스타일 정의
.skin -> 공통 스킨 스타일 정의
BEM(Block Element Modifier)은 블록(block), 요소(element), 상태(modifier)로 구분하여 클래스 이름을 작성하는 방식의 방법론이다
BEM은 블록(block)
, 요소(element)
, 상태(modifier)
3가지로 구성하고,
각 부분을 __
와 --
로 구분하여 짓게 된다. 어떻게 보일지에 초점을 두기보단 '어떠한 목적인가' 에 초점을 두어 이름을 짓는다.
엄격한 네이밍 규칙을 따르며 클래스명이 용도와 형태를 잘 표현해주어 직관적으로 알 수 있는것이 장점이나, 클래스명이 길고 복잡해 질 수 있다는 단점이 존재한다.
-
를 사용한다..header {..}
.block {..}
__
를 사용한다..header {..}
.header__tap {..}
.header__content {..}
.header__logo__button {..}
-
를 사용한다..header--hide {..}
.header__tap--big {..}
.header__content--disabled {..}
SMACSS(Scalable and Modular Architecture for CSS)는 CSS를 범주화(Categorization)로 패턴화 하고자 하는 방법론이다
SMACSS는 작성할 CSS를 비슷한 종류끼리 모아 5가지 스타일로 나누고 각 유형에 맞는 선택자와 작명법, 코딩 기법을 제시한다. 기본(base), 레이아웃(layout), 모듈(module), 상태(state), 테마(theme) 다섯가지의 범주를 제시한다.
body, form, p, table, button, fieldset, input ... {
margin: 0;
padding: 0;
}
// layout => l-
// 주요 요소 작성
#header {
width: 400px;
}
#aside {
width: 40px;
}
// 하위 요소 작성
.l-width #header {
width: 650px;
padding: 10px;
}
.l-width #aside {
width: 100px
}
.stick { ... }
.stick-name { ... }
.stick-number { ... }
.is-error { ... }
.is-hidden { ... }
.is-disabled { ... }
// base.css
.header {
background-color: red;
}
// theme.css
.header {
background-color: orange;
}
SMACSS 사용시에는 지켜야 할 유의사항이 몇 가지 존재하는데, 대표적으로 아래의 4가지 유의사항들이 존재한다.
위에서 알아본대로 CSS방법론은 다양한 방식으로 나눠지는데, 작성하는 방식은 달라도 이들이 공통적으로 중요하게 생각하는것이 있다.
원활한 유지보수를 위함
코드의 재사용성을 높이기 위함
클래스명 만으로도 무슨 내용인지 예측할 수 있게 함
이렇게 분명한 목적을 가지고 사용하는만큼 CSS를 사용할 때에는 상황에 따라 알맞은 CSS방법론을 선택하여 작성하는것이 좋을듯하다😊
막연하게 의미있는 이름을 지어야지..했는데 방법론이 세가지나 있는 줄 몰랐어요! 서연님 감사합니다 🙇♀️💓