OOCSS(Object Oriented CSS)
/* Non-OOCSS */
.main-btn-red {
font-size: 20px;
padding: 15px;
border: none;
cursor: pointer;
background: red;
}
.main-btn-blue {
font-size: 20px;
padding: 15px;
border: none;
cursor: pointer;
background: blue;
}
/* OOCSS */
.main-btn {
font-size: 20px;
padding: 15px;
border: none;
cursor: pointer;
}
.bg-red {
background: red;
}
.bg-blue {
background: blue;
}<!-- OOCSS -->
<button class="main-btn bg-red">빨간 버튼</button>
<button class="main-btn bg-blue">파란 버튼</button>- OOCSS는 뼈대 스타일과 살을 붙이는 스타일을 각 class로 분리하는 방식을 의미한다
- OOCSS의 장점은
- 중복된 스타일을 재사용 할 수 있다
- 유지보수가 편리해진다(같은 스타일을 변경할 때 하나의 class만 수정하면 되므로)
- 코드 작성 효율이 증가한다(자주 사용하는 class를 미리 만들어두면(=utility class) html에서 붙여 사용만 하면 되므로)
BEM(Block_Elment--Modifier)
<body>
<div class="profile">
<img class="profile__img">
<h4 class="profile__h4">이름</h4>
<p class="profile__content">소개글</p>
<button class="profile__button--red">빨간 버튼</button>
<button class="profile__button--blue">파란 버튼</button>
</body>- class 작명을 도와주는 방법으로 Block, Element, Modifier 을 활용한 네이밍 룰이다
- Block > 큰 컴포넌트의 기능/특징
- Element > HTML의 요소(element)
- Modifier > 수식어, 세부 특징 - OOCSS나 BEM은 전통적인 html, css를 사용할 때 유용하며, React, Vue 등을 이용할 때는 크게 사용하진 않는다 > React 에서는 html 단위가 아닌 component 단위로 개발하며 component 간 class가 중복되어도 간섭되지 않도록 해줄 수 있다(styled-components)
eunji yang