[HTML/CSS] 네이밍에 대해 고민해보자

또나·2023년 4월 4일
0
post-thumbnail

몇몇의 웹페이지 그리고 강의를 보며 코드를 분석하다가 클래스명에 의문이 생겼다. 어떤 페이지는 하이픈을 쓰고, 또 어떤 페이지는 언더바를 쓰고.. 사람마다 다 다른 스타일로 짜여져 있었기 때문이다. 네이밍에 기본적인 규칙은 없는지 단지 개인의 기호일 뿐인 건지 궁금해졌다.

이번 학습 목표는 어떤 식으로 네이밍을 짜야 효율적이고 가독성이 좋은 것인지 알아보고 나만의 CSS 컨벤션을 세워 일관성있는 코딩을 하게 되는 것..!



Q1. Coding Convention 이란?

해당 언어로 작성된 프로그램의 각 측면에 대한 프로그래밍 스타일, 관행 및 방법을 권장하는 특정 프로그래밍 언어에 대한 일련의 지침이다. 즉, 나 외에 다른 사람들도 내가 작성한 코드를 보고 쉽고 빠르게 이해할 수 있도록 하나의 작성 표준을 정해둔 것. 코딩 컨벤션의 장점은 생산성과 가독성이 높아진다는 것이다.

ex ) 에어비앤비 | 네이버 | 교보문고

예시를 보면 알겠지만 회사마다 들여 쓰기, 주석, 선언, 공백 등 정해진 규칙이 다르므로 협업시 룰을 따르면 되겠다.



Q2. 네이밍에 어떤 단어를 써야할까?

🔹 공통규칙

- 네이밍의 첫 시작에 숫자, 대문자, 특수문자를 사용하지 않는다.
- 네이밍 조합은 형태_의미_순서_상태 를 기본 순서로 사용한다.
- 네이밍 정의시 prefix, subfix, suffix를 최대한 많이 사용한다.

ex) btn_cancle_01_off.png

- id는 낙타표기법(camelcase) 으로 사용한다.
- id는 화면에서 한 번만 사용이 되므로, 고유기능을 쉽게 인지할 수 있도록 네이밍한다.
- class는 하이픈 방식으로 사용한다. 두개의 단어를 사용할 땐 낙타표기법.

ex) id="btnSch" (x) id="btnSearch" (o)
ex) class="btn-blackLine-on"

🔹 레이아웃

네이밍설명
#container페이지를 감싸는 전체 영역
#header헤더, 머리글 영역
#content컨텐츠, 본문 영역
#footer푸터, 바닥글 영역

💡 Container와 Wrapper의 차이
둘 다 레이아웃을 위한 div지만 컨테이너는 여러 요소를, 랩은 단일 요소를 감싸기 위해 클래스 명으로 작성한다. 하지만 사람들마다 사용하는 방법과 보는 관점, 취향이 다르므로 어느 것이 맞고 틀림을 가릴 수 없다.


🔹 참고


🔹 prefix, 형태


🔹 subfix, 용도


🔹 subfixx, 상태




Q3. CSS방법론, BEM이란?

B Blcok : 블록 E Element : 요소 M Modifier : 수식어 의 약자
CSS방법론 중 가장 많이 쓰이고 있다. 클래스 이름만 보고도 쉽게 이해할 수 있다는 것이 큰 장점. 선택자를 보고 무엇을 하는지, 어디서 사용하는지, class들의 관계를 알 수 있다.

🔹 작명규칙

- 태그, id를 사용하지 않고 class만 사용한다.
- 개발, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 가능한 한 명확하게 만든다.
- 소문자, 숫자만을 이용해서 작명한다.
- 여러단어의 조합은 싱글 하이픈으로 연결하여 작명한다.
- 외형 묘사가 아닌 구조적, 의미적인 이름을 짓는다.

ex) class="red" (x)  class="error" (o)

- block, __element, —modifier 의 조합으로 클래스명을 작성한다.


🔹 B - block, 블록

재사용 할 수 있는 기능적으로 독립적인 페이지 구성 요소.
Nav, Header, Footer 등이 해당.
다른 블록에 대한 종속성이 없어서 위치에 대한 값을 지정하면 안 된다.

스틱맨을 블록 구성으로 보고 예를 들었을 때 이렇다.

.stick-man {..}

🔹 E - element, 요소

블록안에서 특정 기능을 담당하는 부분. 그래서 자신이 속한 블록에 의존적이다.
예를들면 block 안에 있는 p, img 등이 그렇다.
block__element 형태로 사용하면 된다.

스틱맨은 머리, 팔과 다리 요소로 구성 되어있다.

.stick-man__head {..}
.stick-man__arms {..}
.stick-man__feet {..}

🔹 M - modifier, 수식어

블럭 또는 요소의 외형, 상태, 행동을 정의. 말 그대로 속성값이다. 단독 사용이 불가함!
생긴 게 조금 다르거나, 다르게 동작하는 블럭이나 요소를 만들 때 사용.
block--수식어 혹은 element--수식어 형태로 쓴다. 타입은 두가지가 있다.
1. boolean 타입 : 참/거짓, 즉 토글되는 두 가지의 상태값이 있을 때. ex) —focused
2. key-value 타입: 하이픈을 사용해 성질 - 내용을 표시한다 ex) theme-normal, color-red


스틱맨을 파란색이나 빨간색으로 꾸며줘야 한다면 이렇게 쓸 수 있겠다.

.stick-man--blue {..}
.stick-man--red {..}


혹은 머리(요소)가 다르다면 이렇게

.stick-man__head--small {..}
.stick-man__head--big {..}




💭 review

네이밍에 기본적인 규칙은 없는지, 개인의 기호일 뿐인 건지 궁금했었는데 둘 다 맞는 말이었다. 결국 회사나 개인에 따라 다르게 적용하므로 본인에 맞는 방법대로 일관성 있게 사용하는 습관을 기르는 게 중요하다는 결론

앞으론 네이밍 단어를 참고해 작명하되 간단한 프로젝트에선 하이픈 구분자로, 복잡한 구조에선 BEM을 이용해 봐야겠다. 네이밍에 감이 조금 잡혔다 예쓰! ✍️🤓



참고링크
네이밍규칙 | CSS방법론 | CSS네이밍 | BEM

profile
공부 기록장

0개의 댓글