중첩 클래스 네이밍 규칙을 따르는 방법은 다음과 같습니다:

1. 블록(Block):
   • 블록은 독립적인 의미 단위의 컨테이너입니다.
   • 블록은 일반적으로 웹 페이지에서 재사용될 수 있는 컴포넌트들을 나타냅니다.
   • 블록은 기능을 가지지 않으며 다른 블록과 독립적으로 작동합니다.
   • 블록의 클래스 이름은 기본적으로 block이나 프로젝트 요구 사항에 따라 다른 이름을 할당할 수 있습니다.

   예시:

   .block {
     /* 스타일 적용 */
   }
   

2. 요소(Element):
   • 요소는 블록의 일부로서 특정한 기능을 가지는 부분입니다.
   • 요소는 블록 내에서만 존재하며 독립적으로 사용되지 않습니다.
   • 요소의 클래스 이름은 블록의 클래스 이름 뒤에 두 개의 밑줄(__)을 붙여서 작성합니다.

   예시:

   .block__element {
     /* 스타일 적용 */
   }
   

3. 수정자(Modifier):
   • 수정자는 블록이나 요소의 특정한 상태나 특징을 나타냅니다.
   • 수정자는 필수적이지 않으며, 블록이나 요소의 외관을 변경하거나 추가적인 기능을 제공합니다.
   • 수정자의 클래스 이름은 블록 또는 요소의 클래스 이름 뒤에 두 개의 대시(--)를 붙여서 작성합니다.

   예시:

   .block--modifier {
     /* 스타일 적용 */
   }
   

중첩 클래스 네이밍 규칙을 따르면 클래스 이름의 구조화와 계층화가 가능해지므로, 코드의 구조를 쉽게 파악할 수 있습니다. 또한 CSS 스타일링과 자바스크립트 이벤트 처리에서도 유용하게 사용할 수 있습니다. BEM 규칙은 다양한 프로젝트에서 널리 사용되며, 코드의 일관성과 팀 협업을 강화하는 데 도움이 됩니다.

참고: BEM Methodology