본 내용은 "견고한 UI 설계를 위한 마크업 가이드 by 정찬명 | 패스트캠퍼스" 강의에 대해 정리한 글입니다.

Naming things

" 컴퓨터 과학에는 두 가지 난제가 있다.
캐시를 무효로 만드는 것과 작명" - Phil Karlton

작명 규칙을 잘못 관리한 사례

의미를 파악할 수 없는 작명

.bx {...}
.cnt {...}
.mt {...}

전역 공간을 선점한 흔한 이름

.content {...}
.button {...}
.top {...}

선택 규칙을 잘못 관리한 사례

//reset.css 
a { text-decoration: none; } 

//local.css 
.module a { text-decoration: underline; } 
#special.module a { text-decoration: none; } // X 
#another#special.module a { text-decoration: underline; } // X

CSS selector specificity(선택자 우선순위 규칙)

참고링크

• https://www.w3.org/TR/selectors/
• https://specificity.keegan.st/

CSS selector specificity

https://cssstats.com/ 은 CSS 셀렉터 사용에 대한 평가를 해주는 사이트다.

BEM state 2020 ( 만족도 : 81.84% )

BEM의 명명 규칙

• Block 재사용 가능한 독립적인 블록
• Element 블록을 구성하는 종속적인 하위 요소
• Modifier 블록 또는 요소의 변형(모양, 상태, 동작)
  참고자료 : https://en.bem.info/

BEM 특징

1. 의미론적 클래스 선택자 작명 규칙.
2. 다른 형식의 선택자 사용 제한.
3. 전역에서 유일한 이름 권장.
4. 낮은 선택자 특이성 유지.
5. HTML/CSS 연결이 느슨. 병렬 개발 가능
   참고자료 : https://naradesign.github.io/bem-by-example.html

BEM의 명명규칙

1. 두 개의 언더바(__)는 하위 요소를 의미
2. 두 개의 하이픈(--)은 상태 변형을 의미
3. 하나의 이름에 요소, 변형은 각 한 번만 허용

.block {}
.block__element {}
.block__element--modifier {}
.block-modifier {}

구분자 (__,--)로 분리한 1~3개의 설명자 형식 외 다른 형식을 허용하지 않음.

BEM의 선택 사항

선택 사항 : 키워드 연결 방법

1. PascalCase : 단어의 앞자리를 대문자로 표기
2. camelCase : 두번째 단어부터 단어부터 앞자리 대문자로 표기 (추천)
3. kebak-case : 단어별 하이픈(-)으로 구분하여 표기
4. snakecase : 단어별 언더라인()으로 구분하여 표기

BEM 응용 예제

이름 공간을 위한 접두어 사용 추천, camelCase 사용 예시

.lzModal{}
.lzModal__title{}
.lzBtn{}
.lzBtn--small{}
다른 라이브러리와 공존 가능

BEM 예제

'블록'이 요소 또는 변형을 반드시 요구하는 것은 아니다.

// 단순 블록 O
<button class="btn"> 

'변형'은 블록 또는 요소의 스타일을 확장한다.

// 변형 추가 O 
<button class="btn btn--submit"> 
<em class="info__label info_label--warning">

'변형'클래스 단독 사용 불가. 항상 블록 또는 요소와 함께 사용.

// 변형 단독 X 
<button class="btn--submit">
// 변형 추가 O 
<button class="btn btn--submit"> 
<em class="info__label info_label--warning">

'선택자 특이성'이 높아지는 중첩 구조, 타입 선택자는 안티 패턴.

// X 
.photo {} /* 특이성 10 */ 
.photo img{} /* 특이성 11 */ 
.photo figcaption{} /* 특이성 11 */ 

제어하려는 모든 요소에 클래스 이름을 부여. 특이성을 관리한다.

// O 
.photo {} /* 특이성 10 */ 
.photo__img{} /* 특이성 10*/ 
.photo__caption {} /*특이성 10 */ 

블록/요소 이름 생략 금지. 요소/변형 이름 중복 금지.

// X 
.__elem {} 
.--modi {} 
.block__elem1_elem2{} //elem이름 두번 작성 x
.block--modi1-modi1{}

Summary

1. 의미론 작명법으로 읽고 이해하기 쉽다.
2. 생소한 이름에 약어를 사용하지 않는다.
3. 특이성을 '020'보다 작게 유지한다.
4. 선택자 이름은 전역 공간에서 유일하다.
5. HTML/CSS 병렬 개발이 가능하다.

Atomic / Utility First CSS의 장점(두번째로 많이 사용)

1. 라이브러리 타입으로 빠른 스타일 구축 가능
2. 다른 방법론과 함께 사용 가능
3. 스타일 관점의 작명. 의미론을 사용하지 않음
4. HTML 코드에 스타일이 강하게 연결됨
5. HTML/CSS 병렬 개발 불가능. 소규모 팀 또는 단일 엔지니어 개발에 적합