css 작성방법 / OOCSS(Object Oriented CSS) , BEM

 

css 코드를 짜다보면 필요없는 중복을 많이 하게 됩니다.

그리고 코드가 길어질 경우에 엉망이 됩니다.

그런 경우에 OOCSS(Object Oriented CSS) 방식을 사용 해주시면 됩니다.

 

 

1. 버튼의 기본 스타일인 padding, font-size 이런걸 정의하는 class를 하나 만들기

2. 버튼에 스킨 색깔놀이 하는 용도의 class를 여러개 만들기

.main-btn {   font-size : 20px;   padding : 15px;   border : none;   cursor : pointer; } .bg-red {   background : red; } .bg-blue {   background : blue; }

<button class="main-btn bg-red">확인버튼</button> <button class="main-btn bg-blue">취소버튼</button>

 

 

색갈별로 분리를 해주면 좋습니다.

.bg-red {   background : red; } .bg-green {   background : green; } .bg-blue {   background : blue; }

 

 

물론 폰트 사이즈 별로 분를 해주면 좋습니다.

.font-small {   font-size : 12px; } .font-medium {   font-size : 16px; } .font-lg {   font-size : 20px; }

 

그리고 작업을 할 때...

width, margin, padding, text-align 이런 것들 조정하는

utility class 를 미리 만들어두면 편리합니다. 

뼈와 살을 분리하는 CSS 작성방식을 Object Oriented CSS 라고 부릅니다.

 

 

 

만약 작명을 더 쉽게해서 개발을 하고 싶다면?

BEM 이라는 작명법을 따르면 됩니다.

Block__Element--Modifer 이런 식으로 공부하세요!

HTML 요소를 영어로 Element라고 하며 Modifier는 수식어라는 뜻

 

 

html 덩어리 코드에 class를 작명하는 것은 힘이 듭니다.

<div>         <img>         <h4>이름</h4>         <p>소개글</p>         <button>빨간버튼</button>         <button>파란버튼</button> </div>

 

 

큰 덩어리 부터 이름을 지어 줍니다.

<div class="profile">         <img class="profile">         <h4 class="profile">이름</h4>         <p class="profile">소개글</p>         <button class="profile">빨간버튼</button>         <button class="profile">파란버튼</button> </div>

 

 

그 이후에 클래스 명을 넣으려면??

_ _ 뒤에 태그 이름을 넣어주면 됩니다.

<div class="profile">         <img class="profile__img">         <h4 class="profile__h4">이름</h4>         <p class="profile__content">소개글</p>         <button class="profile__button">빨간버튼</button>         <button class="profile__button">파란버튼</button> </div>

 

 

동일한 태그에 디자인을 부여하려면?

- - 위에 컬러를 부여하면 됩니다.

<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> </div>

 

 

 

근데 지금 설명한 OOCSS 클래스 작성방식, BEM 작명방식은

프로젝트가 크고 방대할 때 장점을 보이는 방법입니다.

그러나 요즘 모던 웹 프레임워크나 라이브러리에서는 큰 장점이 없습니다.

 

React 이런 곳에선 html 페이지 단위가 아닌,

작은 컴포넌트 단위로 개발하기 때문입니다.

 

class 중복되어도 컴포넌트끼리 스타일이 간섭되지 않게 코드를 짤 수 있습니다.

대표적으로 React 안에서 styled-components 라이브러리를 쓰면 됩니다.

 

그래서 요즘은 BEM을 깊게 익힐 필요는 없음...

대충 뭔지 알기만 하면 됨