SMACSS: 복잡한 CSS를 관리하는 5가지 스타일 가이드

조나단 스눅 지음 | 박소은 옮김

똑똑. 여러분의 CSS는 안녕하신가요?

복잡하고 다양해진 웹 환경에 따라 스타일시트도 점점 늘어만 가는 요즘, 더 이상 웹 개발에서 CSS를 만만하게 보는 분은 없으리라 생각합니다. 미처 예측하지 못한 여러 가지 외부 요인과 미묘하게 달라진 사용 환경에 따라 전혀 다른 결과물을 보여주기도 하는 예민폐의 아이콘, CSS. 날이 갈수록 몸집을 불려 가고 있는 복잡한 CSS를 어떻게 하면 효율적으로 관리하고, 효과적으로 코딩할 수 있을까요?

코드 한글자 한글자 손으로 짚어가며 틀린 곳이 어디인가, 나는 어디인가, 어디서부터 고쳐야 하는 걸까, 대체 뭐가 문제일까 끝 없는 고민에 빠진 분들께-

조나단 스눅이 제안하는 CSS 작성 가이드, ‘SMACSS’를 소개합니다.

SMACSS란?

Scalable and Modular Architecture for CSS의 줄임말로, 점점 복잡해지고 관리하기 어려워지는 CSS를 효과적으로 쓸 수 있도록 돕는 스타일 가이드입니다. 조나단 스눅(Jonathan Snook)이 제안한 CSS 작성 규칙 SMACSS를 적용하면 재사용과 유지보수가 쉽고 확장 가능한 모듈식으로 CSS 코드를 작성할 수 있습니다. 유연하고 효율적인 CSS 작성하기! 그게 바로 SMACSS의 목표입니다.

  • 유지보수
  • 확장 가능
  • 재사용
  • 의미있는 작명법

SMACSS의 핵심은 CSS 스타일을 몇 가지 범주로 묶는 것입니다. 이렇게 함으로써 규칙과 패턴이 생기고, 스타일을 이해하기 쉽게 정리할 수 있습니다. 이를 바탕으로 SMACSS의 CSS 규칙은 기본(Base), 레이아웃(Layout), 모듈(Module), 상태(State), 테마(Theme) 총 다섯 가지로 나뉩니다.

기본 규칙은 웹 사이트 전반에 적용되는 기본 스타일에 대한 정의, 레이아웃 규칙은 header나 footer 같은 구성 요소 스타일을 정의합니다. 모듈 규칙은 사이트에서 공통으로 사용되는 요소에 대한 스타일을 정의하는 부분으로, 내비게이션 바나 다이얼로그, 위젯 등이 여기에 해당합니다. 이런 요소에 모듈 규칙을 적용해서 독립적으로 설계하면 재사용이 쉽다는 장점이 있습니다. 상태 규칙은 hidden-active, collapsed 등 요소의 상태를 전환시키는 스타일을 정의합니다. 마지막으로 테마 규칙은 사이트의 전반적인 표현, 느낌을 결정하는 색과 이미지를 정의합니다.

SMACSS는 반드시 따라야 하는 엄격한 규칙이라기보단, 저자의 개발 경험을 바탕으로 제안하는 스타일 가이드에 가깝습니다. 그리고 이 스타일 가이드에는 어떻게 코딩할 것이며 왜 그렇게 코딩해야 하는지를 끊임없이 되새기면서 코드를 작성하자는 메시지가 담겨 있습니다.

1. 기본 규칙(Base)

  • 페이지 전반의 기본 스타일을 정의.
  • 클래스나 id는 사용하지 않음.

2. 레이아웃 규칙(Layout)

  • 페이지의 레이아웃에 대한 정의.
  • id를 사용해서 스타일을 정의.
  • 페이지 내에서 레이아웃을 변경하는 경우에는 Class를 사용하며, 접두어로 l- 사용.

3. 모듈 규칙(Module)

  • 스타일 재사용을 위한 규칙.
  • 내비게이션 바, 다이얼로그, 위젯 등이 모두 모듈에 해당하며, 모듈로 디자인하면 재사용이 쉬움.
  • 여러 곳에서 사용되는 공통 요소를 정의하므로 id보다는 Class를 사용함.

4. 상태 규칙(State)

  • 요소의 상태를 전환시키기 위한 스타일.
  • 접두어로 is-사용.

5. 테마 규칙(Theme)

  • 전반적인 표현과 느낌을 결정하는 색깔이나 이미지를 정의.
  • 테마 스타일 규칙만 따로 모아서 분리하면 테마를 쉽게 교체하고 재정의할 수 있음.

코딩하기도 정신 없고 바쁜데 규칙까지 하나하나 신경써야 한다니 번거롭다는 생각이 들 수도 있고, 당장 눈 앞의 문제를 해결할 수 있는 답이 담겨 있지 않아 아쉬움을 느끼실 분도 있으리라 생각합니다. SMACSS는 가려운 부분을 콕 집어 속시원히 긁어 주지는 않지만, 날이 갈수록 복잡해지는 CSS를 어떻게 설계할 것인지에 대한 기준을 세울 수 있게 도와줍니다. 그리고 자신의 코딩 습관을 점검해 보는 계기를 마련해 준다는 점에서 CSS를 다루는 분이라면 한번 읽어 보시길 추천합니다. 🙂

CSS 숙련자라 할지라도 더 좋은 코드를 작성하기 위한 고민은 끝이 없을 것입니다. id, class 이름을 어떻게 작성하는 것이 좋을까? 선택자 깊이는 어느 정도가 적당할까? 모듈화를 어떻게 진행할까? 전역 속성과 지역 속성을 어떤 방법으로 분리할까? 어떻게 하면 반복되는 코드를 줄이고 재사용률을 높일까? Sass/LESS 와 같은 전처리기는 어떤 원리로 동작할까? 이런 고민을 하던 와중에 SMACSS라는 CSS 개발 방법론을 알게 됐습니다. 2년 전 트위터에 누군가 SMACSS 책을 번역해 주면 좋겠다고 글을 올린 적이 있는데 박소은 님께서 제 소원을 짠 하고 이뤄 주셨네요. 초심자에게는 시행착오를 줄이는 지름길이, 숙련자에게는 자신의 개발 스타일을 다시 한번 점검하는 계기가 되기에 충분한 내용이라고 생각합니다.

– 추천의 글, 정찬명 님(naradesign.net)

-『SMACSS』는 다음 서점에서 구입하실 수 있습니다.

[ Yes24 ] [ 교보문고 ] [ 알라딘 ] [ 인터파크 ]