1. OOCSS

OOCSS(Object Oriented CSS)는 CSS를 모듈 방식으로 코딩하여 중복을 최소화하는 기법이다.
OOCSS는 두가지 원칙이 있는데 이 두가지 원칙을 지키며 개발을 해야한다.

구조와 외형의 분리 (Separate structure and skin)

컨테이너와 내용의 분리 (Separate container and content)

🖋 구조와 외형의 분리

구조와 외형이 어떤 것을 의미할까? 구조(Structure)는 width, height, padding, margin, border 같은 것들이다. 외형(Skin)은 color, border-color, font-color, background-color 같이 구조의 변화 없이 적용할 수 있는 속성들이다.

CSS

/*structure*/
.box{
	width: 200px;
  	height: 50px;
    padding: 10px;
}
.button{
	width: 400px;
 	overflow: hidden;
  	border: solid 1px #ccc;
}
/*skin*/
.common-skin{
	background: linear-gradient(#ccc, #222);
}

HTML

<div class="box common-skin">...</div>
<div class="button common-skin">...</div>

이런 식으로 구조를 포함하는 속성들만 모아 클래스를 생성하고, 외형만 포함하는 css속성들을 모은 클래스를 생성한다. 그 후 원하는 요소에 클래스 이름만 달아줌으로 스타일링한다. 이 방식을 사용하여 구조와 외형들을 결합하면 다양한 결과물을 얻을 수 있다.

🖋 컨테이너와 내용의 분리

어떤 태그를 직접 선택하거나 자손 선택자를 사용하여 스타일링 하는 것은 재사용성을 낮춘다. 따라서 다른 요소들간에 공통적으로 적용되어야 할 속성이 무엇인지 파악하는 것이 중요하다.

.globalwidth{
	position:relative;
    padding:20px;
    margin: 0 auto;
    width:980px;
    overflow:hidden;
}
.header-inside{
	padding-top:20px;
    padding-bottom:20px;
    height:260px;
}

이렇게 globalwidth라는 클래스에 다른 요소에도 사용될 수 있는 속성들을 추출하면 중복된 코드를 줄일 수 있기 때문에 컨테이너와 내용의 분리도 꼭 지켜야 한다.

장점

공통된 부분을 정의하기 때문에 재사용이 가능해진다.
코드를 재사용하기 때문에 코드 양이 줄어들어 CSS파일의 용량이 감소된다. 이는 속도 향상까지 기대할 수 있다.

단점

다중 클래스가 많아짐에 따라 유지보수가 어려워진다.
코드의 가독성이 떨어진다.

2. SMACSS

SMACSS는 Scalable and Modular Architecture CSS의 줄임말로 확장형 모듈식으로 CSS를 구성하는 기법이다. CSS를 Base, Layout, Module, State, Theme 이렇게 다섯가지 카테고리로 나누어 스타일을 정리한다.

🖋 Base

기초 스타일을 지정하는 부분으로 default.css, reset.css를 적용하는 부분이 Base에 포함된다. 아이디나 클래스 선택자를 사용하는 것이 아니라 기본 태그의 스타일을 지정하는 것이다. 이때 !important는 허용되지 않는다.

html, body, form {margin:0;padding:0;}
input[type=text] {border:1px solid #999;}
a {color:#000;}
a:hover {color:#666;}

🖋 Layout

큰 틀의 레이아웃, 다양한 요소들을 구별할 때 사용한다. 주요 컴포넌트에는 header, footer, aside, container, content등이 있고, 하위 컴포넌트에는 list, item, form 등이 있다. 주요 컴포넌트는 id를 사용하고, 하위 컴포넌트는 class를 사용하여 스타일을 지정한다. 클래스 명을 사용할 때는 l- 또는 layout-을 붙인다.

#content {width:80%;float:left;}
#aside {width:20%}

.l-fixed #content {
  width: 600px;
  margin-right: 10px;
}
.l-fixed #aside {
  width: 200px
}

🖋 Module

레이아웃 안의 더 작은 부분을 가리킬 때 module을 사용하는데 이는 재사용을 가능하게 하기 위함이다. 버튼, 위젯, 배너 등이 이 부분에 포함될 수 있다. 각 모듈은 독립적일 수 있도록 설계해야하며 다른 곳에서도 사용할 수 있어야 한다. 재사용을 해야하기 때문에 id선택자와 엘리먼트 선택자는 사용하지 않고, class 선택자를 사용한다. 만약 엘리먼트 선택자를 사용해야 하는 경우에는 child 선택자(>)만 사용한다. 모듈 안에 또 다른 모듈이 들어갈 수 있다.

HTML

<div class="box">
  <span class="box-name"> ... </span>
  <span class="box-items"> ... </span>
</div>

CSS

.box { ... }
.box-name { ... }
.box-items { ... }

🖋 State

툴팁, 아코디언 등 어떤 요소의 상태가 열리거나 닫히는 등의 상태 변화가 일어나는 경우에 사용하는 스타일이다. 클래스를 사용하며 is- 또는 s- 접두사를 사용한다. 상태 스타일은 복잡한 상황에서 !important를 사용할 수 있다.

<!-- 레이아웃 요소, 접힌 상태 -->
<div id="header" class="is-collapsed">
  <form>
    <!-- 모듈, 오류 상태 -->
    <div class="msg is-error">
      There is an error!
    </div>
    <!-- 연관된 라벨이 숨겨진 상태 -->
    <label for="search" class="is-hidden">Search</label>
    <input type="text" id="search">
  </form>
</div>

#header는 레이아웃 요소임을 알 수 있으며, .is-collapsed로 접힌 상태임을 알 수 있다.
.msg는 모듈이며 .is-error로 오류 상태임을 알 수 있다.
#searchbox 연관된 라벨은 숨겨져 있는 것을 알 수 있다. (.is-hidden)

🖋 Theme

사이트 전체의 look and feel을 제어한다. 색상이나 이미지를 다룰 때 사용하는데 테마 스타일의 규칙만 모아서 분리한다. 이미 스타일링된 요소 뒤에 다시 재선언하여 테마만 입히는 방식이다.

/* main.css */
.box {
  border: 1px solid;
}

/* theme.css - main.css 뒤에서 읽히도록 적용 */
.box {
  border-color: blue;
}

장점

5개의 카테고리로 범주화하기 때문에 알아보기 쉽고 재사용성이 증가하는 동시에 코드가 간결해진다.
또 클래스명을 통해 역할을 쉽게 예측할 수 있다.

단점

규칙에 대한 종속성이 있다.
카테고리의 기준이 모호해질 수 있다.
범주화하기 때문에 CSS를 사용하기 복잡해질 수 있다.

3. BEM

BEM은 Block Element Modifier의 약자로 OOCSS, SMACSS보다 더 많이 사용되는 방법론이다. BEM을 사용한다면 id는 사용하지 않고, class만 사용한해야 한다는 것에 주의하자.

🖋 Block

재사용이 가능한 독립적인 컴포넌트를 block이라고 한다. 로고 같은 경우는 웹 페이지에서 재사용될 일이 많기 때문에 block이라고 할 수 있다. header, aside, content, footer 등 또한 독립적으로 존재해야 하기 때문에 block이 된다. 이 때 block은 환경에 영향을 받으면 안되기 때문에 여백이나 위치를 설정할 수 없다.

만약 block 안에 또 다른 block이 들어간다면 그냥 클래스 이름을 지정하면 된다.

<div class="header">
	<div class="menu">...</div>
	<div class="search">...</div>
</div>

🖋 Element

element는 block을 구성하는 요소 단위로 의존적인 성격을 가진다. 자신이 속한 블록 안에서만 존재하기 때문에 다른 곳에서 재사용할 수 없는 것들을 element라고 한다. 클래스 이름은 block__element이렇게 짓는다. 만약 header안에 있는 title이라면 class명은 header__title가 되겠다. element안에 또 다른 element가 존재할 수 있는데 이 경우에 계속 __를 붙이는 것은 아니다. 자신을 포함하는 block만 __앞에 붙여주면 된다.

❌ BAD

<form class="search-form">
  <div class="search-form__content">
      <input class="search-form__content__input"/>
      <button class="search-form__content__button">Search</button>
  </div>
</form>

위처럼 __ 중첩되는 것이 아니라 아래처럼 사용하면 된다.

⭕ GOOD

<form class="search-form">
	<div class="search-form__content" >
		<input class="search-form__input" />
		<button class="search-form__button">Search</button>
	</div>
</form>

이때 주의해야 할점은 다른 블록 앨리먼트 요소에 의존하는 선택자를 사용하면 안된다는 것이다. .search-form .search-form__input 이렇게 선택하면 .search-form__input은 .search-form에 의존하게 된다. 따라서 단순히 .search-form__input 클래스명 하나만 선택하면 된다. 이미 이름 자체가 고유하기 때문에 다른 블록이나 엘리먼트들을 함께 지정하지 않아도 된다.

🖋 Modifier

modifier는 block이나 element의 속성을 나타낼 때 사용한다. block—modifier, block__element—modifier같은 형태로 사용할 수 있다. modifier 앞에 —를 붙여주는 것이다. class="block__element—modifier" 이렇게 modifier 혼자 단독으로 사용될 수 없고 class="block__element block__element—modifier" 처럼 기본 블록이나 요소이름을 설정한 후 뒤에 modifier를 추가하는 형태로 사용한다.

modifier에는 boolean 타입과 key-value 타입이 있다.
form__button--focused boolean 타입인데 이름만 봐서 form 블록의 button 엘리먼트가 focused 되었을 때 사용하는 속성들이라는 것을 쉽게 알아차릴 수 있다.

key-value 형식에서는 하이픈으로 키와 값을 연결하여 사용한다. title—color-gray 어떤 태그가 이 클래스를 가진다면 title블록임을 알 수 있고, color는 gray로 설정되리라 알아차릴 수 있다. 하이픈 하나로 key와 value를 구분해 modifier로 사용한 것이다.

장점

html문서를 보지 않아도 클래스 명만으로도 구조를 어느 정도 파악할 수 있다.
SASS의 & 과 함께 사용할 때 매우 편리하다.
block, element, modifier라는 개념을 사용하기 때문에 클래스 명의 중복을 쉽게 방지할 수 있다.

단점

하위 요소로 들어갈수록 클래스명이 지나치게 길어져 복잡할 수 있다.

출처 및 참고

Author And Source

이 문제에 관하여(CSS 방법론), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gotaek/CSS-방법론

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

CSS 방법론