CSS 방법론
모든 개발이 그렇듯 개발의 범위가 커질수록 파일들은 복잡해지고, 관리가 어려워진다.
웹의 경우 HTML, CSS, JS에서 HTML과 JS는 이에 대해 대응이 가능하도록 다양하게 진화했다.
마찬가지로 CSS도 LESS, SASS, Post CSS 등과 같이 확장된 CSS 언어인 CSS Preprocessors(전처리기)가
작성을 용이하게 도와주었으나, 여전히 복잡하고 관리가 어렵다는 단점이 크다.
이를 위해 제안되는 것이 CSS 방법론이다.
일반적으로 팀에서 코드를 작성할 때, 스타일 가이드에 따라 작성하듯
CSS 스타일 가이드와 같은 CSS 방법론을 통해 확장성과 유지보수를 개선하고 복잡성을 낮출 수 있다.
대표적인 CSS 방법론은 BEM, OOCSS, SMACSS로 나뉘어지며, 서로간 우열이 없이 자신의 팀에 맞는 방법론을 사용하는 것이 추천된다.
BEM
BEM 방법론은 Block, Element, Modifier의 약자이다.
CSS를 클래스를 통해 적용하되, 클래스 이름을 Block→Element→Modifier의 순서로 작성하는 것이다.
이는 예를 통해 쉽게 이해할 수 있다.
다음과 같은 HTML코드가 있다고 가정하자.
<form>
<input type="text" name="userid" />
<input type="password" name="userpw" />
<button>LogIn</button>
</form>로그인을 위한 Form Block 안에, 2개의 Input과 1개의 Button Element가 존재한다.
따라서 이는 아래와 같이 클래스를 명명하고 스타일링 가능하다.
<form class="loginform">
<input type="text" name="userid" class="loginform-userid" />
<input type="password" name="userpw" class="loginform-userpw"/>
<button class="loginform-btn">LogIn</button>
</form>또 만약, Input 태그에 Focus효과를 넣으려면 loginform-userid:Focus와 같이도 가능하겠지만
loginform-userid-focus와 같이 클래스 네이밍을 통해 적용하는 것도 가능하다.
BEM방식은 위와 같이 클래스명을 Block-Element-Modifier로 작성할 수 있지만,
사실 -는 --, _, __처럼 다양하게 사용하기에 중요하지 않다.
이런 BEM방식에는 두 가지 단점이 있다.
바로 클래스 이름이 너무 길어져 가독성이 떨어지고 보기에 안좋을 수 있다는 것과,
경험이 없는 경우 명명하는 방법이 직관적이지 못하다고 느낄 수 있다는 것이다.
하지만 그럼에도 익숙해지면 매우 유용하고 이해하기 편해 잘 사용되는 방식 중 하나이다.
OOCSS
OOCSS 방법론은 Object Oriented CSS의 약자이다.
말 그대로 객체지향 CSS라는 의미로, 구조와 모양을 분리하고 컨텐츠와 컨테이너를 명확하게 구분하는 것이 특징이다.
구조와 모양을 분리하라는 말에서 모양은 실제 영어로는 Skin으로, 사람마다 다르게 해석해서 사용한다.
이 문장의 의미는 예를 통해서 확인해볼 수 있다.
.black-btn{
width: 200px;
height: 60px;
background: black;
border: 1px solid gray;
}
.blue-btn{
width: 200px;
height: 60px;
background: blue;
border: 1px solid white;
}
<button class="black-btn">검은색 버튼</button>기존에 위와 같이 검은색 버튼과 파란색 버튼을 작성했다면 구조와 모양은 다음과 같이 작성하고, 적용할 수 있다.
.btn{
width: 200px;
height: 60px;
}
.black-btn{
background: black;
border: 1px solid gray;
}
.blue-btn{
background: blue;
border: 1px solid white;
}
<button class="btn black-btn">검은색 버튼</button>이어서 컨텐츠와 컨테이너를 분리하라는 의미는 다음의 예를 통해서 확인할 수 있다.
h1{
font-size: 24px;
font-weight: bold;
}
<h1>title</h1>기존에는 위와같이 제목을 태그 즉, 컨테이너에 지정하여 사용했다면, 아래와 같이 컨텐츠 자체에 지정하여 태그가 바뀌어도 클래스를 변경해주거나 하지 않아도 된다.
title{
font-size: 24px;
font-weight: bold;
}
<h1 class="title">title</h1>SMACSS
SMACSS 방법론은 Scalable and Modular Architecture for CSS의 약자이다.
해석하자면 확장가능한 모듈식의 CSS 구조를 뜻하는데, 5가지 카테고리로 CSS를 묶어 작성하여
규칙을 세우고 가독성을 높히는 방식이다.
5가지 카테고리는 Base, Layout, Module, State, Theme으로 구성되어있으며 아래를 통해 확인해보자.
Base
아래와 같이 개별 HTML 요소의 기본 CSS 속성을 설정한다.
h1 { font-size: 32px; } div { margin: 0 auto; } a { color: blue; }Layout
아래와 같이 컨테이너, 그리드 등의 접두사를 설정한다.
.layout-sidebar { width: 320px; } .l-comments { width: 640px; }Module
아래처럼 재사용 가능한 모듈식 요소를 설정한다.
.call-to-action-button { text-transform: uppercase; color: #FFF200; }State
아래와 같이 인터페이스에 있는 항목의 현재 상태를 설정한다
.is-hidden { display: none; } .is-highlighted { color: #FF0000; background-color: #F4F0BB;}Theme
레이아웃 및 모듈에 영향을 주는 규칙으로, 사용자 기본 설정/동작/컨텍스트 보기에 의해 트리거되는 내용을 설정한다.
// module-name.css
.mod {
border: 1px solid;
}
// theme.css
.mod {
border-color: blue;
}테마에 경우는 조금 이해가 어려울 수 있다.
정의와 다르게 말 그대로 테마, 색감이나 분위기를 나타내는 설정으로 이해하는게 편하다.
기존 클래스명과 같게 선언하되 테마와 관련된 내용만 작성하여 테마가 바뀌었을 때,
전체적으로 한 번에 변경이 가능하여 용이하다.
