css 지정시 class 네이밍에 대해 질문이 있습니다.

Question

안녕하세요. 강의 잘 보고 있습니다. 심플 배너 해설 영상을 보고 있는데 css class 명이 어떨때는 banner-bg 이런식이고 어떤때 에는 cousre__txt 이런식으로 네이밍을 지으시는 것 같은데 권장되는 규칙같은게 있는 건가요??

sucoding · Answer

안녕하세요. CSS 강의의 모든 영상은 BEM 컨벤션을 기준으로 하였습니다. BEM 컨벤션은 인프런 인턴이 답변한 것과 같습니다. block은 컴포넌트 이름, element는 그 안의 하위 요소, modifier는 스타일이나 상태의 변형을 나타냅니다. 이때, block의 이름이 꼭 단일 단어여야 한다는 규칙은 없습니다. 원한다면 banner-bg 처럼 대시(-) 기호를 이용해서 네이밍을 지어도 됩니다. 그런 관점이라고 생각해주시면 될 것 같습니다 🙂 감사합니다.

communityai8509 · Answer

안녕하세요, 인프런 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 클래스 네이밍에 이 규칙을 사용하는 것이 좋습니다. 관련된 기존 질문과 답변을 통해 더 많은 정보를 얻으실 수 있습니다: css class와 id 선택자 어떻게 사용할지 정하는 기준이 있나요? CSS 클래스 네이밍에 대해 알고 싶습니다. BEM 컨벤션이 정확히 무엇인가요? 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.