Component-Driven Development (CDD)

지은·2022년 10월 27일

CSS

목록 보기

8/9

Component-Driven Development (CDD)

: 부품 단위로 UI 컴포넌트를 만들고, 페이지를 조립해나가는 상향식 개발 방법

CSS 구조화

CSS의 문제점

모바일, 태블릿 등 다양한 디바이스가 등장하고, 웹 사이트가 점점 복잡해지면서 CSS가 점점 복잡해지고 유지보수가 용이한 CSS를 작성하기 어려워졌다.

➡️ CSS 작업을 효율적으로 하기 위해 CSS를 구조화하는 방법의 필요성이 대두되었고, 이러한 문제점들을 해결하기 위해 CSS 전처리기(CSS Preprocessor)라는 개념이 등장했다.

CSS 전처리기

: CSS의 구조를 가독성있게 만들어주고 유지보수가 편리하도록 만들어주는 프레임워크

변수, 함수, 상속 등의 프로그래밍 개념을 활용하여 CSS의 문제점들을 해결한다. (코드의 중복 ↓)
CSS 코드를 여러 파일로 분리해 관리할 수 있다. (유지보수성 ↑)
CSS 전처리기 자체는 웹 서버가 인지하지 못하므로, 각 CSS 전처리기에 맞는 컴파일러를 사용해야 한다.
CSS 전처리기의 종류로는 SASS, LESS, Stylus 가 있다.

CSS 전처리기에서 가장 유명한 SASS에 대해 알아보자.

SASS (Syntactically Awesome Style Sheets)

: CSS를 확장해주는 스크립팅 언어
SASS

JavaScript처럼 변수, 함수, 조건문, 상속 등의 문법을 사용할 수 있다.
반복되는 코드를 변수로 선언하여 여러 곳에서 재사용할 수 있다.
➡️ 코드의 중복을 줄이고, 변수를 사용하여 유지보수가 쉬워졌다.

/* CSS */
.wrapper {
  width: 100px;
  height: 200px;
}
.wrapper.content {
  color: white;
  float: left;
}

/* SCSS */
.wrapper {
  width: 100px;
  height: 200px;
  .content {
    color: white;
    float: left;
  }
}

CSS 전처리기의 문제점

CSS 전처리기는 CSS를 구조화시켜준다는 장점이 있었지만, 컴파일된 CSS의 용량이 어마어마하게 커지는 등 다른 문제들을 더 많이 만들어냈다.

➡️ 이러한 CSS 전처리기의 문제점을 보완하기 위해 BEM, OOCSS, SMACSS과 같은 CSS 방법론이 등장했다.

CSS 방법론

CSS 방법론 BEM, OOCSS, SMACSS는 각각의 장단점이 있으나, 모두 같은 지향점을 가지고 있다.

코드의 재사용성
쉬운 유지보수 (코드의 간결화)
코드의 확장성
클래스명으로 의미 예측 가능

CSS 방법론 중 가장 대표적인 방법론인 BEM에 대해서 알아보자.

BEM

: 클래스명을 Block, Element, Modifier로 구분하여 작성하는 방법
BEM

Block--Element__Modifier 형태로 작성한다.
- Block
  : 전체를 감싸고 있는 블럭 요소
  header, container, menu, checkbox, input
- Element
  : 블럭이 포함하고 있는 요소 하나
  menu item, list item, checkbox caption, header title
- Modifier
  : 블럭 또는 요소의 속성 (외관이나 상태)
  disabled, highlighted, checked, fixed, size big, color yellow