이름 짓기는 모든 개발자에게 주어지는 첫번 째 시련이라고 생각한다
CSS의 이름은 어떤 기준으로 지어야 맛있게 지을 수 있을지 알아보자
개발자는 왜 이름을 왜 잘 지어야 할까?
웹 개발자로 공부하기 이전에 게임 클라이언트 쪽을 공부하였는데, 당시에도 변수, 함수명 짓는데 정말 고생하였다
그러면서 느낀 이름을 잘 지어야 하는 이유는 다음과 같다
1. 헷갈림 방지
이름을 속된 말로 🐶떡같이 짓게 되면 사용시에 굉장히 헷갈린다
만약 변수명을 num으로 지어 놓았다면 이게 몇 마리인지, 몇 개인지, 몇 초인지, 몇 번째 인지 만든 당사자조차 제대로 알 수가 없다.
2. 가독성 향상
내가 짠 코드를 남이 보는 경우는 굉장히 흔한 상황이다
그런데 함수명을 func1, func2, func3으로 지어 놓았다면 이 함수들의 기능을 이해하기 위해서 타인은 함수 본문을 직접 훑어보아야만 한다
하지만 addNumbers, subNumbers, divNumbers 라고 지어 놓았다면?
'아 숫자를 연산하는 함수들이구나~'하고 바로 이해 할 수 있을 것이다
CSS도 마찬가지!
CSS에서 이름을 잘 지어야하는 이유도 내가 느꼈던 것들과 크게 다르지 않다
선택자 이름을 보고 어디서 사용하는지, 어떤 일을 하는지 다른 요소와의 관계는 어떠한지 등을 이름을 통해 바로 알 수 있게 하기 위해서 좋은 이름을 지어야 한다
BEM 명명 규칙을 사용하자
B(Block)
기본 page component를 나타낸다
-를 사용하자
.main-box { }E(Element)
component의 구성요소를 나타낸다
__를 사용하자
.main-box__candy { }M(Modifier)
modifier는 수정사항을 나타낸다
기본적으로 component나 element의 모양, 색상, 상태 등을 나타낸다
--를 사용하자
.main-box__candy--big { }js- 사용
js 파일에서만 수정 하지 않은 상황을 막기 위해서 js-를 붙인다
const likeButton = document.querySelector('js-like-button');
rel 속성을 사용할 수도 있다
const likeButton = document.querySelector("[rel='js-like-button']");끝~
