CSS 방법론 개념 잡기

개요

• 퍼블리싱 시 필요한 CSS 방법론의 개념을 알고자 함.

CSS 방법론이란 ?

• 말 그대로 css 를 어떤 방식으로 작성해야 코드를 더 효율적으로 작성할 수 있는가에 대해 다룬 것
• CSS 에서 클래스 네임을 쉽게 정의하기 위한 일종의 규칙을 다룸

장점

• 원할한 유지보수
• 코드의 재사용성
• 어느 역할인지 예측 가능한 클래스명으로 작업 시간 단축
• 확장 가능성

대표적인 방법론

• OOCSS (Object Oriented CSS)
• BEM
• SMACSS

OOCSS (Object Oriented CSS)

• css 를 모듈 방식으로 작성하여 중복을 줄이는 방식의 방법론
• 공통 스타일과 고유 스타일 분리

ex)

// 동일한 스타일일 경우 공통 클래스명 지정. (-> btn, common-skin)
// 고유한 스타일을 가질 경우 개별 클래스 지정 (-> tel, email)

<div class="btn common-skin tel">tel</div>
<div class="btn common-skin email">email</div>

.btn {공통 스타일 정의}

.tel or .email {개별 스타일 정의}

눈치 채신 분들도 계시겠지만 tailwind 와 꽤나 비슷한 형태이다.

💡 장점

• 코드 길이 단축
• 재사용 가능

💡 단점

• 스타일이 많이 들어가는 객체일 경우, 클래스명이 길어져 가독성이 떨어질 수 있음 (ex : tailwind)
• 공통 클래스가 많을 경우, 유지보수 어려움 (새로운 클래스명 생성해야 함)

BEM (Block Element Modifier)

• Block (전체를 감싸고 있는 블록 요소), Element (내부 요소), Modifier (기능/수정) 로 나누어서 클래스명을 기술하는 방법

• Block
  

• Element
  

• Modifier
  

• 아이디를 사용하지 않고 클래스명으로 사용

• ‘어떻게 보이는가’ 가 아닌 ‘어떤 목적으로 쓰이는지’ 를 중점

작성법

• Block, Element
  - [__] 더블 언더스코어
• Modifier
  - [--] 더블 하이픈
• 띄어쓰기
  - [-] 하이픈 하나

더블로 사용하는 이유

• 하이픈이나 언더스코어를 통해 블록 이름을 구분자로 사용할 수도 있기 때문.

ex)

.header__navigation--navi-text {
	color:red;
}

// header : block 
// navigation : element 
// navi-text : modifier

💡 장점

• 직관적인 클래스명으로, 쉽게 구조 유추 가능

💡 단점

• 클래스명이 길어지게 되면 새로운 클래스명 추가 시 가독성 떨어질 수도 있음

SMACSS

• 확장형 모듈 형식으로, 크게 5개의 구분된 카테고리의 CSS 코딩 기법을 제시하는 방법론

1. Base - 기본규칙
   • 브라우저의 기본 스타일 (ex : default.css, reset.css) 등 element 의 기본적인 스타일 값 지정
2. Layout - 레이아웃 규칙
   • header, footer, main 등 큰 틀의 레이아웃 스타일 정의
3. Module - 모듈 규칙
   • 재사용 가능한 요소 (ex : button, banner, icon, flex-box …) 들의 스타일 값 정의
   • 재사용이 가능하게 id 명이 아닌 클래스명으로 지정
4. State - 상태 규칙
   • 요소의 상태변화를 표현하는 스타일 값 정의
   • 툴팁, 아코디언, active, disable 등
5. Theme - 테마 규칙
   • 다크 모드, 라이트 모드 등 사용자가 직접 선택 가능하도록 스타일 재선언하여 사용
   • 보통 “theme-” 를 붙임

💡 장점

• 재사용을 통한 코드의 간결화
• 확장의 용이성

💡 단점

• 카테고리를 나누는 기준이 통일되어 있지 않으면 작성자에 따라 기준이 불분명해질 수 있음
• 5개의 기준으로 나누게 된다면 5개의 css 파일이 생기게 되므로 번거로울 수도 있음

끝으로

• 위의 대표적인 방법론의 각 단점을 보완하기 위해서 사용하는 것이 CSS 모듈화가 아닌가 하는 생각도 든다.
• CSS 모듈화의 경우, 지정한 클래스명의 앞뒤로 임의의 문자가 들어가기 때문에 코드가 중복될 일도, 장문화 될 일도 없다. 어떤 역할을 하는지 알 수 있을 정도로만 클래스명을 지정하기 때문에 가독성이 떨어질 일도 없다.
• reset.css, default.css 셋팅은 사이트 UI 개발 전 레이아웃의 기초적인 스타일 기반을 잡는 일이기 때문에 필수적인 요소라 생각함

=> 결론 : CSS 모듈을 적극 활용하자 ^^ 😎