[CSS] 디버깅 시간을 절약 할 수있는 CSS 명명 규칙

많은 개발자들이 CSS를 싫어한다고 들었습니다. 내 경험에 의하면, 이것은 CSS를 배우는 데 시간을 투자하지 않아 생긴 결과입니다.
CSS는 가장 훌륭한 '언어'는 아니지만 20년 넘게 웹 스타일을 성공적으로 강화했습니다. 너무 심하게 나쁘지는 않자나, 그치?
그러나 더 많은 CSS를 작성하면 큰 단점이 있습니다.
CSS를 유지 보수하기가 어렵습니다.
잘못 작성된 CSS는 빠르게 악몽으로 변할 것입니다.
몇 가지 이름 지정 규칙을 사용하면 약간의 스트레스와 무수한 시간을 절약 할 수 있습니다.
presentation
너 전에 거기에 있었니?

하이픈으로 구분 된 문자열 사용

자바 스크립트를 많이 작성하면 camel case의 경우 변수(variables)를 쓰는 것이 일반적입니다.
var redBox = document.getElementById('...')
좋다~, 맞지?
문제는이 형식의 명명이 CSS에 적합하지 않다는 것입니다.
이것을하지 마십시오 :
.redBox { border: 1px solid red; }
대신 다음을 수행하십시오.
.red-box { border: 1px solid red; }
이것은 꽤 일반적인 CSS 명명 규칙입니다. 틀림없이 더 읽기 쉽습니다.
또한 CSS 속성 이름과 일치합니다.
// Correct
.some-class { font-weight: 10em }
// Wrong
.some-class { fontWeight: 10em }

BEM 명명 규칙

팀에서는 CSS selectors 작성에 대한 다양한 접근 방식이 있습니다. 일부 팀에서는 하이픈 구분 기호를 사용하지만 다른 일부 팀에서는 BEM이라는 더 체계적인 명명 규칙을 사용하는 것을 선호합니다.
일반적으로 CSS 명명 규칙이 해결하려고하는 세 가지 문제가 있습니다.
  1. selector무엇을 하는지는 이름만 보고 알 수 있습니다.
  2. selector를 보기만 해도 어디에 사용할 수 있는지 알 수 있습니다.
  3. 클래스 이름 간의 관계를 알기 위해서는 클래스 이름을 살펴 보기만 해도 된다.
다음과 같이 작성된 클래스 이름을 본 적이 있습니까?
.nav--secondary { ... }
.nav__header { ... }
이것은 BEM 명명 규칙입니다.

BEM을 5살 아이에게 설명하기

BEM은 전체 사용자 인터페이스를 작은 재사용 가능한 구성 요소(components)로 분할하려고 시도합니다.
아래 이미지를 고려하십시오.
presentation
이것은 스틱 - 남자입니다. 이미지를 수상 경력이 있습니다 :)
사실 수상 경력이 없습니다 :(
스틱 맨은 디자인 블록과 같은 구성 요소(component)를 나타냅니다.
BEM의 B가 'Block'을 의미한다고 이미 짐작할 수 있습니다.
실제 세계에서 이 'block'은 사이트 navigation, header, footer 또는 다른 디자인 블록을 나타낼 수 있습니다.
위에서 설명한 연습에 따라이 구성 요소(component)의 이상적인 클래스 이름은 stick-man입니다.
구성 요소(component)는 다음과 같이 스타일을 지정해야합니다.
.stick-man { }
여기서는 구분 된 문자열(strings)을 사용했습니다. Good!
presentation

요소(Elements)에 대한 E

'BEM'의 E는 요소(Elements)를 나타냅니다.
전반적으로 디자인 블록은 거의 고립되어 살지 않습니다.
예를 들어, 스틱 맨은 head한 개, arms이 두 개, feet이 두 개 있습니다.
presentation
head, feetarms은 구성 요소(component) 내의 모든 요소(elements)입니다. 그것들은 하위 구성 요소(child components), 즉 전체 상위 구성 요소(parent component)의 하위 구성 요소((child components))로 볼 수 있습니다.
BEM 명명 규칙을 사용하면 요소(element) 이름 뒤에 2 개의 밑줄(two underscores)을 추가하여 요소(element) 클래스 이름을 파생시킵니다.
예:
.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

수정(Modifiers)에 대한 M

'BEM'의 M은 수정(Modifiers)의 약자입니다.
stick- man이 수정되고 blue 또는 red stick- man을 가질 수 있다면 어떨까요?
presentation
현실 세계에서는 red 단추 또는 blue 단추가 될 수 있습니다. 이것들은 해당 구성 요소(component)의 수정(modifications)입니다.
BEM을 사용하면 수정(modifier) 클래스 이름은 요소(element) 이름 옆에 하이픈(hyphens) 두 개를 추가하여 파생됩니다.
예:
.stick-man--blue {
}
.stick-man--red {
}
마지막 예제는 부모 구성 요소(parent component)가 수정(modified)되었음을 보여줍니다. 항상 그런 것은 아닙니다.
head 사이즈가 다른 stick-men 이 있다면 어떨까요?
presentation
이번에는 요소(element)가 수정(modified)되었습니다. 요소(element)는 전체 포함 블록 내의 하위 구성 요소(child component)임을 기억하십시오.
.stick-manBlock, .stick-man__head 요소(element)를 나타냅니다.
위의 예에서 볼 수 있듯이 이중 하이픈은 다음과 같이 사용될 수 있습니다.
.stick-man__head--small {
}
.stick-man__head--big {
}
다시 위의 예에서 이중 하이픈(hyphens)을 사용합니다. 이것은 수식어(denote)를 나타내는 데 사용됩니다.
이제 우리는 알게되었습니다.
이것이 기본적으로 BEM 명명 규칙이 작동하는 방식입니다.
개인적으로, 나는 단순한 프로젝트를 위해 하이픈 delimeter 클래스 이름만을 사용하는 경향이 있습니다.
더 복잡한 사용자 인터페이스를위한 BEM.
BEM에 대해 더 많이 읽을 수 있습니다.

명명 규칙을 사용하는 이유


컴퓨터 과학에는 두 가지 어려운 문제가 있습니다. 캐시 무효화(cache invalidation) 및 이름 지정 작업 - Phil Karlton
이름을 짓는 일은 어렵습니다. 우리는 일을 더 쉽게 만들고 앞으로 유지 보수 할 수있는 코드로 시간을 절약하려고 노력하고 있습니다.
CSS에서 올바르게 이름을 지정하면 코드를 읽고 유지 관리하기가 쉽습니다.
BEM 명명 규칙을 사용하면 마크업(markup)을 보면서 디자인 구성 요소(components) / 블록(blocks) 간의 관계를보다 쉽게 ​​볼 수 있습니다.
자신감이 좀 생기나요?

자바 스크립트 Hooks과 CSS 이름

오늘은 존의 업무 첫날입니다.
그는 다음과 같은 HTML 코드를 넘깁니다.
<div class="siteNavigation">
</div>
John은 이 글을 읽었으며 이것이 CSS에서 이름을 짓는 가장 좋은 방법이 아닐 수도 있음을 깨달았습니다. 그래서 그는 다음과 같이 코드베이스를 리팩터링(refactors)합니다 :
<div class="site-navigation">
</div>
좋아 보이네? 워~
John에게 알려지지 않은 코드베이스를 깨뜨렸다.😩😩😩
어떻게?
JavaScript 코드의 어딘가에 이전 클래스 이름 인 siteNavigation과의 관계가 있습니다.
//the Javasript code
const nav = document.querySelector('.siteNavigation')
따라서 클래스 이름이 변경되면 nav 변수(variable)가 null이됩니다.
얼마나 슬픈가...
이와 같은 경우를 방지하기 위해 개발자는 다른 전략을 제시했습니다.

1. js- 클래스 이름 사용

이러한 버그를 완화하는 한 가지 방법은 문제의 DOM 요소(element)와의 관계를 나타 내기 위해 js-* 클래스 이름을 사용하는 것입니다.
예:
<div class="site-navigation js-site-navigation">
</div>
그리고 자바 스크립트 코드에서 :
//the Javasript code
const nav = document.querySelector('.js-site-navigation')
규약에 따라js-site-navigation 클래스 이름을 보는 사람은 JavaScript 코드에서 DOM 요소(element)와 관계가 있음을 이해합니다.

2. Rel 속성(attribute) 사용

나는 이 기술을 직접 사용하지 않지만 사용하는 사람들을 보았다.
이걸 구분할수 있나?
<link rel="stylesheet" type="text/css" href="main.css">
기본적으로 rel 속성(attribute)은 링크 된 자원이 참조하는 문서와의 관계를 정의합니다.
이전의 John의 예)에서 이 기법을 지지하는 사람들은 이렇게 할 것입니다.
<div class="site-navigation" rel="js-site-navigation">
</div>
그리고 자바 스크립트 :
const nav = document.querySelector("[rel='js-site-navigation']")
나는 이 기술에 대해 의구심을 가지지 만, 일부 코드베이스에서는 건너 뛰기 쉽습니다. 여기에있는 주장은 "음, 자바 스크립트와의 관계가 있으므로 rel 속성(rel attribute)을 사용하여 이를 나타냅니다."
웹은 똑같은 문제를 해결하기위한 많은 "방법"이 있는 큰 장소입니다.

3. 데이터 속성(data attributes)을 사용하지 마십시오.

일부 개발자는 데이터 속성(data attributes)을 JavaScript 후크(Hooks)로 사용합니다. 이것은 옳지 않습니다. 정의에 따라 데이터 특성은 사용자 지정 데이터를 저장하는 데 사용됩니다.
presentation
데이터 속성(data attributes)을 잘 사용합니다. Twitter에서 본 것처럼
Edit #1 : 사람들이 'rel'속성을 사용하면, 코멘트 섹션의 놀라운 사람들이 언급했듯이 어떤 경우에는 데이터 속성을 사용하는 것이 좋습니다.

보너스 팁 : CSS 코멘트 추가 작성

이것은 명명 규칙과는 아무런 관련이 없지만 시간을 절약 할 수 있습니다.
많은 웹 개발자가 자바 스크립트 주석을 쓰지 않거나 몇 가지를 고집하지는 않지만 더 많은 CSS 주석을 작성해야한다고 생각합니다.
CSS가 가장 우아한 "언어"가 아니기 때문에 잘 구성된 코드는 코드를 이해하려고 할 때 시간을 절약 할 수 있습니다.
이것은 전혀 아프지 않습니다.
부트 스트랩 소스 코드가 얼마나 잘 주석 처리되었는지 살펴보십시오.
색상을 말하기 위해 주석을 쓸 필요가 없습니다. color: red는 붉은 색을 나타냅니다. 그러나 CSS 트릭을 사용하는 것이 덜 분명한 경우 자유롭게 의견을 쓸 수 있습니다.

프로가 될 준비가 되었습니까?

나는 CSS 기술을 날카롭게 만들 수 있는 무료 CSS 가이드를 만들었습니다. 무료 전자 서적을 다운로드하십시오.
presentation


번역글 추천(신청) 받습니다.

PS. 안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일정고 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.

이 글은 번역글입니다. 원본링크입니다.