이 글은 Ohans Emmanuel의 CSS Naming Conventions that Will Save You Hours of Debugging 을 번역한 내용입니다.
Ohans Emmanuel(원작자)의 허락을 받은 후 작성되었으며, 이 글의 모든 저작권은 Ohans Emmanuel에게 있습니다. 이해의 편의상 의역이 들어가 있습니다.
잘못된 번역은 댓글로 남겨주시면 감사하겠습니다!
디버깅 시간을 절약할 수 있는 CSS 네이밍
저는 많은 개발자들이 CSS가 싫다고 하는 것을 들었습니다.
하지만 제 경험에 의하면, 이런 불만이 생기는 이유는 그들이 CSS를 배우는 데 시간을 들이지 않기 때문입니다.
CSS는 가장 아름다운 언어는 아니지만 20년 이상의 웹 스타일링을 성공적으로 수행해 왔습니다.
하지만 더 많은 CSS를 사용할 경우 CSS 유지보수가 어려워지는 단점을 쉽게 볼 수 있습니다.
이 포스트에서는 이런 단점을 보완하여 CSS로 인한 스트레스와 시간을 줄일 수 있는 몇 가지 명명 규칙을 소개합니다.
하이픈(-)으로 구분된 문자열 사용
만약 당신이 자바스크립트를 많이 사용했다면 변수명으로 카멜 케이스를 쓰는데 익숙해져 있을 겁니다.
var redBox = document.getElementById('...')
그렇죠?
문제는 카멜 케이스를 사용한 네이밍은 CSS에는 적합하지 않습니다.
이 규칙에 대한 잘못된 예:
.redBox {
border: 1px solid red;
}
이 규칙에 대한 올바른 예:
.red-box {
border: 1px solid red;
}
이것은 표준적인 CSS 네이밍 규칙이며 더 읽기 쉽습니다.
또한 CSS 속성 이름 규칙과도 일치합니다.
// Correct
// CSS 속성명도 -을 사용
.some-class {
font-weight: 10em
}
// Wrong
// CSS 속성 명은 CamelCase를 사용하지 않는다.
.some-class {
fontWeight: 10em
}
BEM 네이밍 규칙
팀마다 서로 다른 방식으로 CSS Selector를 작성합니다. 어떤 팀은 하이픈(-)을 사용하는 반면, 더 체계적인 CSS 네이밍 규칙인 BEM을 쓰는 팀도 있습니다.
일반적으로, CSS 네이밍 규칙은 아래 3가지 문제를 해결할 수 있습니다.
- CSS Selector 이름을 보고 무엇을 하는지 알 수 있습니다.
- CSS Selector 이름을 보고 어디서 사용하는지 알 수 있습니다.
- CSS Selector 이름을 보고 Class들의 관계를 알 수 있습니다.
이렇게 쓰인 클래스 네임을 본적이 있나요?
.nav--secondary {
...
}
.nav__header {
...
}
이것이 BEM 네이밍 규칙입니다.
5살 아이에게 BEM 설명하기
BEM은 전체 사용자 인터페이스를 재사용 가능한 작은 구성요소들로 나누려고 시도합니다.
아래 그림을 보세요.
스틱맨은 Block과 같은 Component에 해당합니다. BEM의 B는 Block이라고 이미 짐작하셨을 겁니다.
실제 환경에서 Block은 사이트의 Nav, Header, Footer 등에 해당합니다.
위에서 설명한 방식에 따라서 스틱맨 Component의 이상적인 클래스 네임은 stick-man이 될 수 있습니다.
CSS 코드로 보면 아래와 같습니다.
.stick-man {
}
그리고 우리는 구분된 문자열을 사용했습니다. Good!
E는 Elements
BEM의 E는 Elements라는 의미입니다.
전반적으로 Block이 따로 고립된 채로 있는 경우는 드뭅니다. 예를 들어, 스틱맨은 머리, 두 개의 멋진 팔 그리고 다리를 가지고 있습니다.
머리, 팔 그리고 다리는 모두 Component 안에 있는 구성요소(Elements)입니다.
BEM 네이밍 규칙을 사용하여 두 개의 밑줄을 추가하고 Element 이름을 추가 합니다.
For Example:
.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}
M은 Modifiers
BEM의 M는 수식어(Modifiers)라는 의미입니다.
스틱맨을 파란색이나 빨간색으로 꾸며줘야 한다면 어떨까요?
실제 예제로는 버튼을 생각할 수 있습니다. 버튼을 파란색이나 빨간색으로 꾸며줘야 할 때 이런 수식어(Modifier)를 BEM으로 표현할 수 있습니다.
두개의 하이픈(-) 과 modifier 클래스 명을 추가합니다.
For example:
.stick-man--blue {
}
.stick-man--red {
}
위 Example에서는 Modifier가 추가된 상위 Component를 보여줍니다.
머리 크기가 다른 스틱맨이 있다면 어떨까요?
이번에는 스틱맨 Component의 내부 Element(머리)가 수정되었습니다. 머리는 하위 Component라는 걸 명심하세요.
.stick-man은 Block에 해당하고, .stick-man__head는 구성요소(Element) 입니다.
아래 예에서 볼 수 있듯이 하이픈을 아래와 같이 사용할 수 있습니다.
.stick-man__head--small {
}
.stick-man__head--big {
}
다시 한번 말하지만, 위에서 두 번의 하이픈을 사용하는 걸 주목하세요. 이는 수식어(Modifier)를 나타내는 데 사용됩니다.
이제 우리는 BEM이 작동하는 기본적인 방식을 알게 되었습니다.
개인적으로 간단한 프로젝트에는 단지 하이픈(-) 구분자만 사용하는 경향이 있습니다. 그리고 사용자 인터페이스에 좀 더 관련된 경우 BEM을 사용하는 편입니다.
왜 명명 규칙(Naming Conventions)을 사용하는가?
Computer Sciene에는 두 가지 어려운 문제가 있다.
캐시 무효화(cache invalidation)와 이름 붙이기
- Phil Karlton
네이밍은 어렵습니다. 하지만 일을 쉽게 만들기 위한 올바른 네이밍의 대가로 추후 유지보수 시간을 절약할 수 있습니다.
정확한 CSS 네이밍을 한다면, 코드를 읽기 쉽고 유지 보수하기 쉽게 만들어 줄 것입니다.
만약 BEM 명명 규칙을 선택한 경우, Component와 Block 간의 관계를 쉽게 확인할 수 있습니다.
CSS 네이밍에 대한 자신감이 생기셨나요?
CSS Names with JavaScript Hooks
오늘은 John의 첫 출근 날입니다.
그는 다음과 같은 HTML 코드를 건네받았습니다.
<div class="siteNavigation">
</div>
John은 이 포스트를 이전에 읽었고 건네받은 HTML 코드가 최선의 방법이 아닐 수도 있다는 것을 깨달았습니다. 그래서 그는 아래와 같이 코드를 다시 만들었습니다.
<div class="site-navigation">
</div>
좋아 보이네요. 그렇죠?
하지만 John은 코드를 망쳤습니다.
어떻게 망쳤냐구요?
어딘가에 있는 Javascript에서 변경 전 클래스 명인 siteNavigation를 사용하고 있었습니다!
//the Javasript code
const nav = document.querySelector('.siteNavigation')
클래스 이름이 변경됨에 따라서 nav 변수가 null이 되었습니다.
이 얼마나 슬픈일이가요.
이런 경우를 방지하기 위해 개발자들은 여러 가지 전략을 내놓았습니다.
1. js- class 이름 사용하기
버그를 경감시키는 한 가지 방법으로 DOM 요소와의 관계를 나타내기 위해 js-* 클래스 명을 사용합니다.
For example:
<div class="site-navigation js-site-navigation">
</div>
그리고 Javascript 코드는 아래와 같습니다.
//the Javasript code
const nav = document.querySelector('.js-site-navigation')
이런 규칙을 통해, js-site-navigation 클래스 명을 본 사람은 해당 DOM 요소가 JavaScript와 관계있다고 이해할 수 있습니다.
2. Rel 속성 사용하기
저는 이 기술을 사용하지 않습니다만 이렇게 사용하는 사람을 본 적이 있습니다
당신은 이걸 인식할 수 있나요?
<link rel="stylesheet" type="text/css" href="main.css">
기본적으로 rel 특성은 링크된 자원이 참조하는 문서와의 관계를 정의합니다.
John의 경우에서 이 기법을 사용하는 사람은 다음과 같이 코드를 작성할 것입니다.
<div class="site-navigation" rel="js-site-navigation">
</div>
그리고 자바스크립트는 다음과 같이 작성합니다.
const nav = document.querySelector("[rel='js-site-navigation']")
저는 이 방법에 대해서 확신이 없지만, 여기서 주장하는 바는 "자바스크립트와 관계가 있어, 그래서 나는 rel 속성으로 그것을 나타냅니다"입니다.
웹은 같은 문제를 해결하기 위한 각기 다른 "방법"들을 가진 큰 장소입니다.
3. data 속성 사용하지 않기
일부 개발자는 data 속성을 자바스크립트를 위해서 사용합니다. 이건 옳지 않습니다. 정의에 따르면, data 속성은 사용자 데이터 저장에 사용됩니다.
트위터에 보이는 것처럼 data 속성을 적절히 사용합니다.
수정 #1: 답변에 있는 일부 놀라운 사람들의 언급에 의하면 rel 속성을 사용하는 경우, 특정 상황에 data 속성을 사용해도 된다고 합니다. 당신이 결정해 주세요.
Bonus Tip: 추가 CSS 주석 작성
이것은 네이밍 규칙과 관계는 없지만, 마찬가지로 당신의 시간을 줄여줄것 입니다.
많은 웹 개발자들이 자바스크립트 주석을 작성하지 않으려고 하거나 몇 개만 남깁니다, 하지만 제 생각에는 당신은 많은 CSS 주석을 남겨야 합니다.
CSS는 가장 우아한 언어가 아니기 때문에, 잘 구축된 주석은 당신의 코드를 이해하는 시간을 줄여줄 수 있습니다.
이것은 고통스럽지 않습니다.
부트스트랩 소스코드가 얼마나 잘 설명하는지 보세요.
당신은 color: red가 빨간색을 나타낸다는 점을 주석 달 필요가 없습니다. 하지만 당신이 덜 명백한 (추가적인 설명이 필요한) CSS를 다루고 있다면 얼마든지 주석을 다세요.
Pro가 될 준비가 되었나요?
당신의 CSS 기술을 빠르게 끌어올리기 위해서 무료 CSS 가이드를 준비했습니다.
마치며 & 참고
처음 이 원글을 보고 번역해야지 하고 나중에 보니 벌써 하신 분이 계시네요!
하지만 아쉬운 부분이 있기도 하고 원작자분께도 이미 허락받았기도 해서 다시 번역해 봅니다.
의역을 생각보다 많이 넣었는데 잘못된 혹은 이해 안 되시는 내용이 있으면 코멘트 부탁드리겠습니다!
CSS Naming Conventions that Will Save You Hours of Debugging - Ohans Emmanuel