인프런 커뮤니티 질문&답변
작성한 질문수
class명 네이밍 컨벤션 질문입니다!
작성
·
66
0
단순 호기심 질문이긴 한데요.
클래스명 보면 banner__title처럼 언더스코어를 두개씩 지정하시던데, 단순히 baner_title처럼 언더스코어 하나만 사용했을때와 다른 어떤 이유나 숨겨진 미세팁 같은게 있을까요?
아니면 딱히 이유 없이 경력이 쌓이면서 습관화 돼서 사용하시는 관례인건가요?
답변 2
0
안녕하세요.
근래 바쁜일이 있어서 답변이 좀 늦었습니다.
하지만 인프런 AI 인턴이 잘 대답해주었네요.
제가 사용한 방식은 BEM 방법론에 따른 네이밍 방식입니다.
BEM 방식에 대한 설명은 인프런 답변이 너무 잘 대답해주어서 따로 생략하겠습니다.
더 궁금하신 게 있으시면 질문주세요!
감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다. dlsrksrhk님.
CSS 클래스 네이밍에서 banner__title와 같은 형식은 주로 BEM(Block Element Modifier) 네이밍 컨벤션을 따르고 있는 것입니다. 이 컨벤션은 코드의 구조와 명확성을 높이기 위한 방법으로, 대규모 웹 프로젝트에서 특히 유용하게 사용됩니다.
BEM 방식의 구조:
Block: 독립적으로 사용될 수 있는 개별 UI 구성 요소를 나타냅니다. 예:banner
Element: 블록 내부에서 사용되는 하위 구성 요소입니다. 예:title
Modifier: 블록이나 요소의 상태나 변형을 나타냅니다. 예:banner--active
BEM의 장점:
- 가독성 증가: 클래스명이 역할을 명확히 구분하므로 코드를 읽고 이해하기 쉽게 만듭니다.
- 재사용 용이: 같은 블록 내의 다른 요소이나 상태를 쉽게 파악할 수 있어 코드 재사용에 용이합니다.
- 유지보수 용이: 팀 프로젝트 시 일관성 있는 네이밍은 개발자 간의 협업을 수월하게 만듭니다.
- 가독성 증가: 클래스명이 역할을 명확히 구분하므로 코드를 읽고 이해하기 쉽게 만듭니다.
banner_title처럼 언더스코어 하나만 사용할 경우, BEM의 구조가 무너지게 되어 동일한 이름이 다른 의미로 해석될 수도 있습니다. 즉, banner라는 블록 내부의 title이라는 요소의 명확한 구분이 어렵게 되죠.
관련 질문과 답변으로 서비스를 더 활용해 보실 수 있습니다:
이런 네이밍 규칙을 통해 HTML/CSS의 구조적 명확성과 유지보수를 돕는다는 점에서 중요하니까요, 프로젝트의 일관성을 위해 시스템을 활용하시면 더욱 효율적일 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.