패스트캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 정리 2탄 BEM이 뭐지? CSS 네이밍 어떻게 하지?

"이름을 '개똥이'라고 짓는 것과 같다."

이름을 '개똥이'라고 짓는 것과 같다.

마크업을 할 때도 그렇고 프로그래밍을 할 때 고민이 되는 부분은 '변수와 함수의 이름을 뭐로 지을까?'이다.

 

프로그래밍뿐 아닌 작품명, 책 제목, 타이틀, 서브 타이틀, 상품명 등 다양한 분야에서도 작명으로 인해 많은 생각을 하게 된다. 그래서 그런지 컴퓨터 과학 분야에서 이런 말도 있다고 한다.

 

컴퓨터 과학에는 두 가지 난제가 있다. - Phil Karlton

1. 캐시를 무효로 만드는 것
2. 작명

이제부터 이름을 어떻게 작명하는게 좋을지 함께 공유하고 생각해보도록하자.

 

컴퓨터 과학에는 두 가지 난제가 있다. - Phil Karlton

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

"찔리시는 분?"

사례를 들어서 설명을 해주는데 조금 뜨끔했다. 작명을 하기 위한 고민을 안하고 귀찮아서 대충 이름을 지어서 작업을 하곤 했었는데 아래 사례들을 보니.. 잠시 반성을 하는 시간을 가져본다.(묵념) 

의미를 파악할 수 없는 작명

.bt { }
.cnt { }
.mt { }

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

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

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

아래와 같은 사례는 처음에 초기값을 none으로 처리해 놓고 정작 사용할 때 부모, 부모의 부모, 부모의 부모, 즉 대상자를 표시하기 위해 증조할아버지, 증조할머니까지 모시고 오는 꼴이 되어버린다.

//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(선택자 우선순위 규칙)

선택자 우선순위는 작업을 하다보면 '자연스럽게' 익혀지기도 하지만 한번 알고 넘어가는게 좋다. 우선순위를 모르면 위에서 말한 증조모까지 모시고와야하는 사실을 인지하고 이왕 보는김에 습득하고 넘어가면 좋을거 같다.

 

아래와 같은 점수표(?)를 봤을 때 가장 이상적인 규칙은 020보다 낮게 유지하는 것이 CSS코드를 관리하는데 좋다. 020을 유지하려면 아이디(#)를 이용한 클래스를 절대, Never, ever 사용하지 않기를 추천한다는 이야기니 지금 작업하면서 css 코드에서 #에다가 스타일을 매기고 class를 안넣었다면 언능 바꾸기를..(뭐.. 정답은 아니니까 동의하지 않는다면 굳이 바꿀 필요는 없다.)

ID	class, [attr], :class	type, ::element
0	0	0

선택자 우선순위 규칙 사례

a	0,0,1 > 001
.a	0,1,0 > 010
#a	1,0,0 > 100
#a a	1,0,1 > 101
#a.a a	1,1,1 > 111
#a#b[href]::before	2,1,1 > 211

참고링크

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

CSS 셀렉터 잘 사용하고 있나?

cssstats.com은 CSS 셀렉터 사용에 대한 평가를 해주는 사이트다. 국내 최대 포탈인 네이버와 다음을 기준으로 비교를 해봤는데 다음 포탈이 네이버보다 2배 가까이 셀렉서 사용을 잘 하고 있는 것으로 나타났다.(티스토리는 다음꺼 ㅋㅋ)

 

CSS 셀렉터는 위에서 언급한 증조모까지 모시고 오느냐, 아니면 부모님선에서 끝내야 정도의 차이라고 생각하면 좋을거 같다. 이정도 차이라면 부모님도 안모시고 오는 정도 인거 같은데.. 다음 굿.! 

네이버 포탈

다음 포탈

 

 

 

 

 

 

 

CSS 네이밍기법 BEM state 2020 ( 만족도 : 81.84% )

CSS 네이밍기법 BEM state 2020 ( 만족도 : 81.84% )

HTML&CSS 마크업을 공부하는 사람이라면 한번쯤은 들어봤을 BEM. Blcok Element Modifier의 약자로 사용자의 만족도가 가장 높은 네이밍 기법이다.

BEM 외 다른 네이밍 기법

BEM 외 네이밍 기법은 각각 만족도와 재사용을 원하는 비율이 다르다. BEM은 사용해본 사람들이 다시 사용할 예정이라는 비율이 75%로 가장 높다. 그래서 이번엔 BEM만 다루도록 하겠다.(1등만 기억하는 더러운 세상.. ㅋ)

1. Atomic CSS(Utility-first CSS)
2. ITCSS
3. CUBE CSS
4. SMACC
5. OOCSS

BEM의 명명 규칙

• Block 재사용 가능한 독립적인 블록
• Element 블록을 구성하는 종속적인 하위 요소
• Modifier 블록 또는 요소의 변형(모양, 상태, 동작)

참고자료 : https://en.bem.info/

BEM

BEM의 특징

1. 의미론적 클래스 선택자
2. 다른 형식의 선택자 사용 제한
3. 전역에서 유일한 이름 권장
4. 낮은 선택자 특이성 유지
5. HTML/CSS 연결이 느슨. 병렬 개발 가능

참고자료 : https://naradesign.github.io/bem-by-example.html

예제로 이해하는 BEM.

BEM의 명명규칙

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

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

BEM의 선택 사항

어떤 네이밍을 사용해도 상관은 없다. 각자의 스타일에 맡기는 네이밍~

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

BEM 응용 예제

아래와 공통으로 사용하는 Black명(Modal, Btn 등) 앞에 프로젝트의 약어를 표기하면 다른 라이브러리(부트스트랩 등)와 공존해서 사용할 수 있다.

//ts는 T-Story의 약어로 사용했다.
.tsModal{}
.tsModal__title{}
.tsBtn{}
.tsBtn--small{}

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

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

// 변형 단독 X
<button class="btn--submit">

 

아래와 같은 BEM 규칙에 어긋나는 것은 하지 말아야한다.

 

//선택자 특이성이 높아지는 중첩 구조, 타입 선택자는 안티 패턴. X
.photo{} /* 특이성 10 */
.photo img{} /* 특이성 11 */
.photo figcaption{} /* 특이성 10 */

//블록/요소 이름 생략 금지. 요소/변형 이름 중복 금지. X
.__elem {}
.--modi {}
.block__elem1_elem2{}
.block--modi1-modi1{}

Summary

Summary

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

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

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