OOCSS, SMACSS, BEM은 CSS를 구조화하고 유지보수하기 쉽도록 하는 방법론들로, CSS를 조직화하고 코드를 재사용 가능하게 만드는데 초점을 맞추고 있습니다.
CSS를 "객체"로 분해하여 스타일을 정의하는 방법론으로, 스타일을 재사용 가능한 구성 요소로 분리함으로써 코드의 유지보수성과 재사용성을 높입니다.
// 기존 방식
<a class=”facebook_btn”>Facebook</a>
<a class=”twitter_btn”>Twitter</a>
// OOCSS 적용
<a class=”btn facebook”>Facebook</a>
<a class=”btn twitter”>Twitter</a>
<h2 class="title"></h2>
<strong class="title"></strong>
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
/* 버튼의 기본 구조 */
.btn {
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
/* 버튼의 스킨 - primary */
.btn-primary {
background-color: #007bff;
color: #fff;
}
/* 버튼의 스킨 - secondary */
.btn-secondary {
background-color: #6c757d;
color: #fff;
}
버튼의 구조와 스타일이 분리되어 재사용이 용이해지며, 새로운 버튼을 만들거나 기존 버튼의 스타일을 변경할 때 HTML 코드를 수정하지 않고도 CSS 클래스만 변경하여 손쉽게 조정할 수 있습니다.
스타일을 범주화하고 모듈화하여 확장 가능한 디자인 시스템을 만드는 방법론으로, 다섯 가지 카테고리로 스타일을 구분합니다.
기본(Base), 레이아웃(Layout), 모듈(Module), 상태(State), 테마(Theme)
!important
를 허용하지 않습니다.body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
a {
color: #007bff;
text-decoration: none;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
id
, 하위 컴포넌트는 class
를 이용하여 스타일을 작성합니다.#article {
float: left;
}
#sidebar {
float: right;
}
.l-flipped #article {
float: right;
}
.l-flipped #sidebar {
float: left;
}
div > p
와 같이 자식 선택자를 사용하는 것이 좋습니다.<div class="card">
<div class="card-content">
<h3 class="card-title">Card Title</h3>
<p class="card-text">This is a sample card content. You can add any content here.</p>
</div>
</div>
.card {
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card-content {
padding: 20px;
}
.card-title {
margin-top: 0;
margin-bottom: 10px;
font-size: 20px;
font-weight: bold;
}
.card-text {
margin-bottom: 15px;
font-size: 16px;
}
is-
를 사용합니다..is-visible {
opacity: 1;
animation: fade 2s;
}
.is-hidden {
opacity: 0;
animat![](https://velog.velcdn.com/images/kimbangul/post/d5ee8266-708f-4596-afe3-1a8d26073c3a/image.png)
ion: fade 2s reverse;
}
.is-removed {
display: none;
}
// in main.css
.mod {
border: 1px solid;
}
// in theme.css - main.css 뒤에서 읽도록 적용
.mod {
border-color: blue;
}
블록(Block), 요소(element), 상태(modifier)로 클래스 네이밍을 작성하는 방법론으로, 각 구성 요소는 다음과 같습니다.
BEM의 클래스 네이밍은 .block__element--modifier
의 구조를 따릅니다.
<form class="search-form">
<input class="search-form__input" />
<button class="search-form__button">Search</button>
<button class="search-form__button--color--blue">Clear</button> <!--Modifier-->
</form>