Programming/CSS

CSS 방법론

dayeon.O_O.dev 2022. 5. 3. 20:10
CSS 대표적 3가지 방법론
- OOCSS
- BEM
- SMACSS

OOCSS

Object Oriented CSS

객체 지향에 따라 고안된 설계 방식, 구조와 외형의 분리, 컨테이너와 내용의 분리

 

(1) 구조와 외형을 분리

  • 구조: width, height, padding...
  • 외형: color, border-color, font-color...
<div class="btn common-skin tel">tel</div>
<div class="btn common-skin email">email</div>

// css 
.btn{공통 스타일 정의} 
.common-skin{공통 스타일 정의}

(2) 컨테이너와 내용을 분리

  • 위치에 의존하지 않는 스타일 정의
  • 어떤 태그라도 동일한 외형을 제공
  • 어디에서나 재사용 가능한 클래스 기반 모듈 구축
<h3 class="sub-title"> ... </h3> 
<span class="sub-title"> ... </span>

.sub-title {font-size:16px}

장점

  • 공통된 부분을 정의해서 재사용이 가능
  • 구조적 상황에 관계없이 동일한 클래스라면 동일한 스타일 기대 가능
  • 코드의 재사용으로 코드 양 줄음

단점

  • 공통된 클래스가 많기 때문에 수정이 발생할 시 멀티클래스를 사용해야 함
  • 멀티클래스가 많아짐에 따라 유지보수에 어려움
  • 코드의 가독성이 떨어짐
  • 멀티클래스
    • 동일 엘리먼트에 여러개의 선택자(id, class)를 동시에 적용하기 위한 목적
    • 여러개의 선택자를 사용하는 것을 말함
    • IE6의 경우 id와 class 동시 사용 시 다중 선택자를 무시하는 버그가 존재 (7은 해당 버그 해결)

BEM

👉 다음 게시글에서 집중적으로 다룸!

 

장점

  • 직관적인 클래스 명으로 마크업 구조를 직접 보지 않아도 구조의 파악이 쉬움

단점

  • 클래스명이 상대적으로 길어질 수밖에 없는 구조이기 때문에 코드가 길어지고 복잡해지는 단점
  • 기존 마크업에서 새롭게 기능이 추가되었을 경우 클래스명 재수정이 불편

SMACSS

Scalable(확장 축소 가능한) and Modular(모듈식) Architecture(구조) for CSS

CSS에 대한 확장형 모듈식 구조의 형태로 5개의 구분된 카테고리로 CSS 코딩 기법 제시하는 방법

(1) 기본 규칙 (Base)

  • 각 브라우저의 기본 스타일 (reset.css, default.css, variables.css, mixins.css) 요소
  • element 스타일의 기본 정의 값
  • 기본 스타일에는 !important를 쓸 필요가 없음

(2) 레이아웃 규칙 (Layout)

  • 큰 틀의 레이아웃 관련, 요소를 배치, 구별하는데 적용
  • 주요 컴포넌트: header, footer, aside, container, content
  • 하위 컴포넌트: list, item, form 등
  • 클래스명은 접수사 l-, layout-명시
.l-fixed #content {
  width: 600px;
  margin-right: 10px;
}
.l-fixed #aside {
  width: 200px
}

(3) 모듈 규칙 (Module,Components)

  • 페이지에서 재사용 가능한 요소: Block, Element, Module... 버튼, 배너, 아이콘, 박스 요소 등
  • 각 모듈은 독립성을 가지게 스타일 선언
  • 재사용을 위해 id, 태그 선택자는 사용하지 않음
  • 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, disable 등 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)

  • 사용자가 선택 가능하도록 스타일을 재선언하여 사용
  • 색이나 이미지를 불변하는 스타일과 분리 → 기존의 스타일을 재선언할 수 있음
  • Theme는 전반적인 Look과 feel을 정의 및 제어하여 suffix “theme-”를 붙임
.mod {
	border: 1px solid;
}
.mod {
	border-color:blue
}

(6) 유의사항

  • 파생된 선택자 사용 금지
  • ID 사용 금지
  • !important 사용 금지
  • class명은 의미있고 “어떤 모듈인지” 이해 가능하도록

장점

  • 클래스명을 통한 예층의 용의성
  • 재사용을 통한 코드의 간결화
  • 확장의 용이성

단점

  • 카테고리를 나누는 기준이 작성사에 따라서 불분명해질 수 있음
  • 코드를 나누어서 작성해야 하기 때문에 CSS를 사용하기 번거로움
  • 잘못 사용하면 코드가 오히려 의도와 다르게 더 복잡, 번거로워짐

 

잘못된 내용은 피드백 남겨주시면 감사드리겠습니다 🙏

'Programming > CSS' 카테고리의 다른 글

SCSS (SASS) 코딩 컨벤션  (0) 2022.06.12
SCSS 문법  (0) 2022.06.12
SCSS 개념 (feat. SASS와 차이점)  (0) 2022.06.12
BEM 방법론 집중 정리  (0) 2022.05.03