📌 HTML에서 BEM 작명법은 기본이지! 🤡

개발 용어와의 싸움

웹 개발 공부하면서 아직도 어려운 것은 배우면 배울수록 쏟아지는 낯선 용어들이다. 왜 그렇게 줄임말은 많은지..
마치 10대들만 쓰는 신세대 용어를 배우는 기분이다.

그래도 한 분야의 공부는 그 용어만 제대로 알아도 대화는 통하듯이 계속해서 노출된다면 익숙해지면서 자연스러워진다.

이런 용어들은 굳이 찾아서 공부하는 것도 애매한데 그래도 모르면 개발 관련 문서들을 읽기가 어렵다. 읽다 찾고 읽다 찾고...

오늘은 "BEM" 이란 용어를 알아보자!

(BAAM! 을 생각했다면 조용히 돌아가기 누르세요..)

진짜로 get started!

BEM(Block Element Modifier)

HTML 클래스 속성의 작명법이다.

두 가지 작명법이 있는데,

• 요소_일부분 : Underscore(Lodash) 기호로 표기하며 -> 요소의 일부분임을 의미한다.

• 요소--상태 : Hyphen(Dash) 기호로 표기하며 -> 요소의 상태를 나타낸다.

예를 들면!

• 이런식으로 html 구조를 만들고 각 요소의 class의 이름을 쓸 때 주로 사용되는 관습적인 작명법이다!

Block

• html 요소의 가장 바깥쪽 상위 요소를 블록이라고 한다.
• header, section, footer 등으로 semantic 하게 작성한다.

Element

• html 요소 안쪽에 하나 이상의 요소가 있는 것을 의미한다.
• _Underscore(Lodash)로 나타낸다.

Modifier

• 변형된 상태를 말한다.
• --Hyphen을 쓰는 경우다.

나의 생각

사실 초보 개발자 입장에서 html 구조 만들고 css로 제어하기 위해 클래스 이름을 마구잡이로 부여하는 경우가 많다. (그리고 css하다가 멘붕이 온다...)

html 구조 다 잡고 css 하면서 꼬이니까 class 이름을 바꾸려 하지만 그럴거면 다 지우고 하는게 낫다 ㅎㅎ..!

그래서 이런 관습적인 부분이 중요하다고 생각하는데
규칙대로 표기하면 확실히 헷갈리는 것이 줄어든다.

이렇게 나중에 명확히 알 수 있도록 semantic(의미적으로) 하게 클래스나 id 이름을 설정하는 것도 확실히 해두면 나중에 협업할 때도 소통이 잘 될거라 생각한다.

변수명 정하기도 개발자들에게 어려운 숙제인데 의미가 명확하게 전달되면서도 간결하게 만드는 것이 쉽지 않다.

다양한 코드를 뜯어보고 작성해보면서 감을 익히면 작명 센스도 많이 좋아질 것이라 생각한다.