✔ CSS 방법론의 공통 지향점

1. 코드의 재사용
2. 코드의 간결화
3. 코드의 확장성
4. 코드의 예측성(직관적인 클래스 네이밍)

---

📝 BEM (Block Element Modifier)

작명 규칙

• 개발, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 가능한 한 명확하게 만드는 것이 목표이다.
• 소문자, 숫자 만을 이용해서 작명한다.
• 여러단어의 조합은 하이픈(-)으로 연결하여 작명한다.
• ID는 사용할 수 없고, 오직 class명만 사용할 수 있다

블록 (Block)

• Block은 재사용 할 수있는 기능적으로 독립적인 컴포넌트를 뜻한다. (하나만 떼서 사용할 수 있는 형태)
• 블록은 환경에 영향을 받지 않아야 한다.👉 즉, 여백이나 위치위치 값(margin, position) 를 설정하면 안된다.
• 블럭은 서로 중첩이 가능 (ex. head block안에 logo block)
• 형태(red, big)가 아닌 목적(menu, button)에 맞게 작성한다.

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

요소 (Element)

• 엘리먼트는 블럭을 구성하는 단위 요소를 뜻하며, 더블 언더바(__)로 구분한다.
• 형태(red, big)가 아닌 목적(item, text, title)에 맞게 결정해야 한다.
• 요소는 블록의 부분으로만 사용 할 수 있고, 다른 요소의 부분으로는 사용할 수 없다.
• 모든 블록에서 요소는 필수가 아닌 선택적으로 사용한다. 즉 블록안에 요소가 없을 수도 있다.

.header__logo { … }
.header__menu { … }
.header__search { … }
.header__login { … }

/* block 이름이나 element 이름이 길 경우 – 하이픈으로 연결한다. */
.block-name__element-name {}

수식어 (Modifier)

• 블록이나 요소의 모양(color, size..), 상태(disabled, checked..)를 정의한다.
• block__element — modifier, block — modifier 형태로 사용(더블 하이픈)
• 수식어의 블리언 타입과 키-벨류 타입이 있다.
  • 블리언 타입 : 수식어가 있으면 값이 true 라고 가정한다. (form__button — disabled)
  • 키-벨류 타입 : 키, 벨류를 하이픈으로 연결하여 표시한다. (color-red, theme-ocean)
• 수식어는 단독으로 사용할 수 없다. 즉 기본 블록과 요소에 추가하여 사용해야 한다.

/*
탭 메뉴가 다른 영역에서 다른 스타일로 사용된다면,
메인 속성을 복사하여 추가 하거나, sass의 @extend를 활용하여 속성을 상속 받을 수 있다
*/

.header__navigation {
      background: #008cba;
      padding: 1px 0;
      margin: 2px 0;
}
.header__navigation‐‐secondary {
      @extend .header__navigation;
      background: #dfe0e0;
 }

혼합사용 (Mix)

• block1, block2__element 형태로 사용할 수 있다.
• block2__element 에 여백이나 위치를 지정하고 block1은 독립적으로 유지할 수 있다.

<div class=”header”>
     <div class=”search-form header__search-form”></div> 
</div>

BEM 장단점

장점

• 재사용성과 직관적인 클래스(class): BEM은 이해하기 쉽고, 직관적인 클래스 이름의 작명을 하기가 쉽다. 또한, Block 기반의 스타일로 Block을 다른 곳에 재사용하기 쉽다.

• 클래스(class) 중복 방지: BEM은 Block 단위의 class name을 통해 CSS의 원치 않은 상속을 제한하며, 클래스 네임 중복을 방지합니다.

단점

• 네이밍 명명법의 한계: BEM은 초기 Block의 네이밍은 간결하지만 안에 세부 요소로 들어갈수록 복잡한 명명법을 갖게 된다.이는 HTML내 복잡한 클래스(class)를 갖게 되며, 익숙치 않을 경우 괴이한 모습으로 비춰질 수 있다.

---

📝 SMACSS (Scalable and Modular Architecture for CSS)

• Class명을 통한 예측
• 재 사용
• 쉬운 유지보수
• 확장 가능

1. Base
   • 기본 스타일(Reset, Default .. )
   • 기본 스타일에는 !important 사용할 필요가 없다.
   • Base에서는 어떤 클래스(class)나 ID 선택 자도 포함하지 않는다\

body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,
textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-size:14px;line-height:1.25}
body.s,.s input,.s textarea,.s select,.s button,.s table{font-family:helvetica}
body{position:relative;background-color:#fff;color:#000}
body.s{-ms-text-size-adjust:none;-webkit-text-size-adjust:none}
img,fieldset{border:0}
ul,ol{list-style:none}
table{border-collapse:collapse}
em,address{font-style:normal}
a{color:inherit;text-decoration:none}

2. Layout
   • 레이아웃과 관련된 스타일 정의
   • class명에 'l-' suffix(접미사)를 붙인다.

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


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

3. Module
   • 모듈과 관련된 스타일 정의
   • 스타일 재사용을 위한 요소다
   • Block, Element, Module
   • 재사용을 위해 ID와 element 사용 금지(만약, element 셀렉터를 사용해야 한다면, .box > span 처럼 child 셀렉터를 사용)

<div class="forder">
	<span>Forder Name</span>
</div>
<div class="box">
...
</div>
<div class="basket">
...
</div>

.folder >span {
  padding-left: 20px;
  background: url(icon.png);
}

4. State
   • Hidden, expend, active, hover 등의 상태에서 사용을 나타내는 스타일 정의
   • Class명에 suffix “is-” 또는 “s-”를 붙여서 사용

<div class="btn_area">
  <a href="#" class="btn btn_good is-active">좋아요버튼</a>
  <a href="#" class="btn btn_bad">나빠요버튼</a>
</div>

.btn {
  display: inline-block;
  background:#ddd;
  border-radius:4px;
}
.btn.is-active{
  background:#43f837;
}
.btn.is-hidden {
  display: none;
}

5. Theme
   • 사이트의 전반적인 look과 feel 제어
   • 색이나 이미지를 불변하는 스타일과 분리 → 기존의 스타일을 재선언 할 수 있다.
   • 적용 점위가 넓으면 'theme-' suffix를 붙인다.

.mod {
	border: 1px solid;
}

.mod {
	border-color:blue
}

❗유의사항

• 파생된 선택자 사용 금지
• ID 사용 금지
• !important 사용 금지
• class명은 의미있게, 다른이가 이해할 수 있도록 선언

SAMCSS 장단점

장점

• 범주화를 통한 패턴화: 5개의 범주화(Base, Layout, Module, State, Theme)를 통해 알아보기 쉽고 재사용 가능한 컴포넌트를 작성할 수 있다.
• 모듈 및 요소의 상태 확인: State 규칙을 통해 해당 요소의 상태까지 예측할 수 있으며,
  이는 자바스크립트 훅을 추가하여 이벤트를 예측하기 쉽게할 수 있다.

단점

• 규칙에 대한 종속성
• 규칙으로 CSS 작성에 제한을 둘 수 있다.

---

📝 OOCSS(Object Oriented CSS)

• Object Oriented CSS의 약자
• Nicole Sullivan에 의해 개발된 프레임워크
• CSS를 모듈 방식으로 코딩하여 중복을 최소화하는 기법

1. 표현과 구조의 분리(Separate structure and skin)
   표현은 시각적 속성(colors, fonts, shadows, gradients 등)을 얘기하며, 구조는 (width, height, padding, margin 등) 요소의 크기 및 위치를 말함.

2. 컨테이너와 콘텐츠의 분리(Separation of Container and Content)
   컨테이너란 스타일의 적용 범위를 제한하는 범주이며, 내용물이란 컨테이너로 인해 제한된 스타일의 범주를 말한다.

OOCSS 장단점

장점

• 확장성: OOCSS를 사용하면 각 요소를 고려하지 않고 여러 요소를 자유롭게 혼합하고 다시 적용 할 수 있다. 따라서 한 프로젝트에서 다른 개발자로 프로젝트가 전달 될 때마다 CSS를 더 많이 쌓는 대신에, 프로젝트의 신규 사용자는 이전에 이미 추상화 한 것을 다시 사용할 수 있다.

• 재사용성과 속도: CSS 파일은 웹 사이트가 복잡 해짐에 따라 기하 급수적으로 확장되는 경우가 있다. 특이성은 중요하지만 CSS 파일에는 필요한 것보다 더 많은 정보가 포함되는 경우가 많다.
  OOCSS는 DRY(Don't Repeat Yourself)에 입각하여, CSS의 재사용성과 효율 및 속도를 향상시킬 수 있다.

단점

• 클래스(class)의 복잡화: 클래스가 생성되는 방식에는 훨씬 더 많은 분리가 있기 때문에 모든 스타일 요소를 설명하기 위해 요소에 여러 클래스를 추가해야 할 수도 있다. 이는 마크업을 혼란스럽게 만들 수 있으며, OOCSS가 익숙치 않은 경우 혼동을 줄 수 있다.

참고 url
참고 url