CSS 방법론_SASS, BEM, OOCSS, SMACSS, Styled Components (with. CDD 방법론)

오늘은 CSS 방법론과 그와 연관 있는 CDD 방법론을 함께 정리해보려고 한다.

CDD(Component Driven Development)

CDD는 컴포넌트 주도 개발로 기본적인 컴포넌트 단위부터 시작하여 UI 뷰(view)를 구성하기 위해 점진적으로 결합(조합)해가는 상향성(bottom-up) 성향을 띈다.

- CDD의 장점

• 품질 (Quality) : 독립적으로 컴포넌트를 분리하여 관련 상태를 정의하여 UI가 다양한 시나리오에서 작동하는지 확인이 가능하다
• 내구성 (Durability) : 컴포넌트 수준에서 테스트하여 세부 사항까지 버그를 정확하게 찾아낼 수 있다.
• 속도 (Speed) : 컴포넌트 라이브러리 또는 디자인 시스템의 컴포넌트를 재사용하여 UI를 보다 빠르게 조립할 수 있다
• 효율성 (Efficiency) : UI를 개별 컴포넌트로 분해 한 뒤 다른 팀 구성원간에게 공유하여 개발 및 디자인을 병렬 처리 한다

테스트 주도 개발 (TDD)와는 차이가 있는 방법론으로 TDD에 대한 글은 하단 링크에 정리해두었다.

[CS] TDD(Test Driven Development)란?

 

CSS 방법론

프로젝트의 규모와 복잡도가 커지고 다양한 디바이스가 등장하면서 CSS는 점점 복잡해졌다
이 점을 해결하기 위해 가장 먼저 나온 개념이 CSS 전처리기(CSS Preprocessor)이다

- SASS (Syntactically Awesome Style Sheets_CSS 전처리기)

CSS 전처리기의 가장 유명한 SASS는 CSS를 확장해 주는 스크립팅 언어이다.
자바스크립트처럼 특정속성의 값을 변수로 선언하여 적용 할 수 있어 반복되는 코드를 한번의 선언으로 재사용 할 수 있는 기능을 가졌다.

하지만 컴파일 된 CSS 용량이 더 커지는 문제점이 생기게 되었고
CSS를 보다 효율적으로 사용하기 위해 등장하게 된 것이 CSS 방법론이다
보통 CSS 방법론으로 검색하면 대표적으로 OOCSS, BEM, SMACSS 세가지가 나온다.

- BEM

클래스명을 Block(전체를 감싸고 있는 블럭 요소), Element(블럭이 포함하고 있는 한 조각), Modifier(블럭 또는 요소의 속성)으로 구분하여 작성하는 방법이다
Block, Element, Modifier는 --와 __로 구분하하여 사용한다. (block__element--modifier)

클래스명이 직관적이기 때문에 마크업구조를 보지 않아도 구조 파악이 쉽다는 장점이 있으나 수정이 불편하고 클래스명이 너무 길어지고 복잡해 질 수 있다는 단점이 있다

- OOCSS(Object Oriented CSS)

모듈(module)방식으로 작성하여 중복을 줄이는 방식의 방법론이다.
가장 많이 사용되는 방법론으로, 중복되는 디자인 요소를 따로 빼서 작성하기 때문에 반복적으로 사용가능하다.
이 방법론의 특징은 구조와 외형을 분리하고, 컨테이너와 내용을 분리하는 것이다.
여기서 구조는 width, padding, height, border 등이고 외형은 color, font, backgroud등을 말한다.

코드 재사용으로 스타일시트의 용량이 축소 될 수 있고 속도가 향상 될 수 있다는 장점을 가지고 있지만 다중 클래스 사용으로 유지보수의 어려움이 있다는 단점이 있다.

- SMACSS(Scalable and Modular Architecture for CSS)

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

Base(기본 스타일)
Layout(레이아웃 스타일)
Module(모듈 스타일)
State(상태 스타일)
Theme(테마 스타일)

클래스명을 통한 예측과 확장에 대해 용이하다는 장점을 가지고 있지만 잘못 사용하게 되면 오히려 의도와 다르게 더 복잡해 질 수 있다는 단점이 있다.

 

이 3가지의 방법론이 공통으로 지향하는 것은 아래와 같다

- 코드의 재사용
- 코드의 간결화(유지보수 용이)
- 코드의 확장성
- 코드의 예측성

 

CSS도 컴포넌트 단위로 개발해보자

- Styled Components

CSS를 컴포넌트화 시키는 것으로 앞서 보았던 CDD 방법론에 단점을 보완하기 위해 등장했다.
기능적이나 상태를 가진 컴포넌트로부터 UI를 완전 분리해 사용할 수 있는 패턴을 제공한다.

React에서 사용할 수 있는 Styled Components는 NPM을 통해 관리하는 패키지이다

# with npm
$ npm install --save styled-components

# with yarn
$ yarn add styled-components

설치는 이렇게 진행하면 된다.

Styled Components는 백틱을 사용하여 컴포넌트를 만들고, style.태그종류를 할당한 뒤 백틱안에 기존 CSS를 작성하던 문법과 똑같이 스타일 속성을 작성해주면 된다.

기존에 만들어져 있는 컴포넌트를 이용하여 새로운 컴포넌트를 만들 수 있다
Styled Components로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려 줄 수 있다.내려준 props 값에 따라서 컴포넌트를 렌더링하는 것도 가능하다.

import styled from "styled-components";
	//styled-components 설치 후 꼭 import해주기
import GlobalStyle from "./GlobalStyle";
	//전역에 스타일을 설정할 수 있는 방법

const Button1 = styled.button`
  background: ${(props) => (props.color ? props.color : "white")};
`;
//백틱을 쓰고 그안에 CSS 넣어주는 형태

const Button2 = styled.button`
  background: ${(props) => props.color || "white"};
`;
//삼항연산자를 이용한 조건문을 넣어 각기 다른 상태에서의 CSS가 적용될 수 있도록 작성

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 color="orange">Button1</Button1>
      <Button1 color="tomato">Button1</Button1>
      <br />
      <Button2>Button2</Button2>
      <Button2 color="pink">Button2</Button2>
      <Button2 color="turquoise">Button2</Button2>
    </>
  );
}

Storybook을 설치하면 쉽게 테스트해 볼 수 있다

---

참고

https://yamoo9.github.io/react-master/lecture/sb-cdd.html#%E1%84%8F%E1%85%A5%E1%86%B7%E1%84%91%E1%85%A9%E1%84%82%E1%85%A5%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%8C%E1%85%AE%E1%84%83%E1%85%A9-%E1%84%80%E1%85%A2%E1%84%87%E1%85%A1%E1%86%AF%E1%84%8B%E1%85%B4-%E1%84%90%E1%85%A1%E1%86%AB%E1%84%89%E1%85%A2%E1%86%BC

https://whales.tistory.com/33