인프런 커뮤니티 질문&답변
작성한 질문수
css 지정시 class 네이밍에 대해 질문이 있습니다.
작성
·
83
0
안녕하세요. 강의 잘 보고 있습니다.
심플 배너 해설 영상을 보고 있는데 css class 명이 어떨때는 banner-bg 이런식이고 어떤때 에는 cousre__txt 이런식으로 네이밍을 지으시는 것 같은데 권장되는 규칙같은게 있는 건가요??
답변 2
0
안녕하세요.
CSS 강의의 모든 영상은 BEM 컨벤션을 기준으로 하였습니다.
BEM 컨벤션은 인프런 인턴이 답변한 것과 같습니다.
block은 컴포넌트 이름, element는 그 안의 하위 요소, modifier는 스타일이나 상태의 변형을 나타냅니다.
이때, block의 이름이 꼭 단일 단어여야 한다는 규칙은 없습니다.
원한다면 banner-bg 처럼 대시(-) 기호를 이용해서 네이밍을 지어도 됩니다.
그런 관점이라고 생각해주시면 될 것 같습니다 🙂
감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다. rujung1225님.
CSS 클래스 네이밍은 코드의 가독성과 유지보수를 위해 매우 중요합니다. 일반적으로 많이 사용되는 네이밍 컨벤션에는 몇 가지가 있습니다.
BEM(Block Element Modifier): 이 방법은 코드의 구조와 명확성을 높이는 데 도움을 줍니다. 예를 들어,
block__element--modifier와 같은 형태로 사용합니다.block은 컴포넌트의 이름,element는 그 안의 하위 요소,modifier는 스타일이나 상태의 변형을 나타냅니다.Camel Case: JavaScript에서 주로 사용되는 방식으로,
myClassName과 같은 형태를 가집니다. 두 번째 단어부터 대문자로 시작하는 형태입니다.Snake Case: 단어 사이에 언더스코어를 넣는
my_class_name형태로 사용하는 방법입니다. 일관성을 유지하기 쉽지만, CSS에서는 자주 사용되진 않습니다.Kebab Case: 대부분의 CSS에서 많이 볼 수 있는 형식으로
my-class-name처럼 하이픈으로 단어를 구분합니다.
각 컨벤션마다 장단점이 있지만, 중요한 점은 한 프로젝트 내에서 일관성을 유지하는 것입니다. 예를 들어 BEM 규칙을 사용한다면 프로젝트 내 모든 CSS 클래스 네이밍에 이 규칙을 사용하는 것이 좋습니다.
관련된 기존 질문과 답변을 통해 더 많은 정보를 얻으실 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.