CSS작명법(OOCSS,BEM)

[코드양 줄어드는 Class 작명법 (OOCSS,BEM)]

 

[OOCSS: Object Oriented CSS]
:뼈대와 살점을 분리하는 작명법, 뼈대 스타일이 많을 수록 편리

• 장점1. CSS양 줄어듦 장점2. 유지보수 편리
• 요즘은 React, Vue로 html 만들게 되면 작명법 없이도 잘 쓸 수 있음
  작명법은 참고만 바람

<button class="main-btn bg-red">더알아보기</button>
<button class="main-btn bg-blue">구매하기</button>

CSS는,

.main-btn {  <-- 뼈대
    padding: 15px;
    font-size: 20px;
    border: none;
    cursor: pointer;
}

.bg-red {  <-- 살점1
    background: red;
}

.bg-blue { <-- 살점2
    background: blue
}

[Utility class]

.f-small
   font-size: 12px
.f-mid
   font-size: 16px
.f-lg
   font-size: 20px

<button class="main-btn bg-red f-lg">더알아보기</button>
--> 이런식으로 유틸리티 툴 활용해 작명 가능함

[BEM:Block Element Modifier]

• class="덩어리이름"
• class="덩어리이름__역할"
• class="덩어리이름__역할--세부특징"

<div class="profile">
    <img class="profile__img">
    <h4 class="profile__title"></h4>
    <p class="profile__content"></p>
    <button class="profie__button--red">버튼1</button>
    <button class="profile__button--blue">버튼2</button>
</div>