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

작성한 질문수 2

0

안녕하세요.

CSS 강의의 모든 영상은 BEM 컨벤션을 기준으로 하였습니다.

BEM 컨벤션은 인프런 인턴이 답변한 것과 같습니다.

block은 컴포넌트 이름, element는 그 안의 하위 요소, modifier는 스타일이나 상태의 변형을 나타냅니다.

이때, block의 이름이 꼭 단일 단어여야 한다는 규칙은 없습니다.

원한다면 banner-bg 처럼 대시(-) 기호를 이용해서 네이밍을 지어도 됩니다.

그런 관점이라고 생각해주시면 될 것 같습니다 🙂

감사합니다.

0

안녕하세요, 인프런 AI 인턴입니다. rujung1225님.

CSS 클래스 네이밍은 코드의 가독성과 유지보수를 위해 매우 중요합니다. 일반적으로 많이 사용되는 네이밍 컨벤션에는 몇 가지가 있습니다.

1. BEM(Block Element Modifier): 이 방법은 코드의 구조와 명확성을 높이는 데 도움을 줍니다. 예를 들어, block__element--modifier와 같은 형태로 사용합니다. block은 컴포넌트의 이름, element는 그 안의 하위 요소, modifier는 스타일이나 상태의 변형을 나타냅니다.

2. Camel Case: JavaScript에서 주로 사용되는 방식으로, myClassName과 같은 형태를 가집니다. 두 번째 단어부터 대문자로 시작하는 형태입니다.

3. Snake Case: 단어 사이에 언더스코어를 넣는 my_class_name 형태로 사용하는 방법입니다. 일관성을 유지하기 쉽지만, CSS에서는 자주 사용되진 않습니다.

4. Kebab Case: 대부분의 CSS에서 많이 볼 수 있는 형식으로 my-class-name처럼 하이픈으로 단어를 구분합니다.

각 컨벤션마다 장단점이 있지만, 중요한 점은 한 프로젝트 내에서 일관성을 유지하는 것입니다. 예를 들어 BEM 규칙을 사용한다면 프로젝트 내 모든 CSS 클래스 네이밍에 이 규칙을 사용하는 것이 좋습니다.

관련된 기존 질문과 답변을 통해 더 많은 정보를 얻으실 수 있습니다:

• css class와 id 선택자 어떻게 사용할지 정하는 기준이 있나요?
  
• CSS 클래스 네이밍에 대해 알고 싶습니다. BEM 컨벤션이 정확히 무엇인가요?
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.