1. CSS 방법론

어떤 방법으로 구성하면 더 효율적으로 구성할 수 있는가에 대한 방법론
즉, 클래스 네임을 쉽게 정의하기 위한 일종의 규칙

• 유지 보수성

• 확장성

• 재사용성 향상

• 코드의 일관성

2. Smacss (Scaleable and Modular Architecture for CSS)

참고자료

✔️ 큰 규모의 프로젝트에서 확장 가능하고 모듈화(패턴) 된 css 를 작성하기 위한 방법론

• 스타일을 기능적으로 분류
  기본 스타일 (Base)
  레이아웃 (Layout)
  모듈 (Module)
  상태 (State)
  테마 (Theme)

3. OOCSS(Object-Oriented CSS)

✔️ 객체 지향 프로그래밍의 개념을 CSS에 적용한 방법
스타일을 재사용 가능한 모듈로 분리하고 컨테이너와 내용을 분리하여 구조와 스타일을 독립적으로 유지하는 것을 강조

• 구조 width height padding margin border ....

• 스타일 color border-color font-color ...

  4. Bem (Block Element Modifier)

  참고자료

  ✔️ CSS 클래스 이름을 통해 요소와 요소 간의 관계를 명확하게 표현하는 방법

  이 방법은 HTML 과 CSS의 강한 결합을 통해 재사용 가능하고 예측 가능환 코드를 작성하는 데 중점을 둔다.

• block
  단어를 사용하되 길어질 경우 -를 사용한다.

.nav{
	margin : 0;
   	}

• Element
  요소를 선언할 때 클래스이름과 요소 이름을 __ 로 이어서 사용한다.
  

.block__elem { color: #042; }

• Modifier
  상태에 대해 선언할 때는 --를 사용한다.

<div class="block block--mod">...</div>