CSS 네이밍 (BEM)

CSS 네이밍

CSS 의 네이밍에 규칙을 정해 디버깅을 용이하게 하고 코드 리딩을 더 빠르게 함

• 좋은 CSS 네이밍 규칙의 목적

  1. selector 이름만 보고 무엇을 하는 지 알 수 있어야 함

  2. selector 이름만 보고 어디에서 사용하는 지 알 수 있어야 함

  3. 클래스 이름 간의 관계를 알기 위해서는 클래스 이름만 살펴보면 됨

• Camel Case 보단 하이픈( - )

  Camel Case 는 JS 같은 프로그래밍 언어에서 사용하는 방식

  CSS 에서는 하이픈 주로 사용

  CSS 의 속성 이름과 같은 형식이기 때문

• BEM(Block Element Modifier) 명명 규칙 사용

  하이픈 명명 규칙 + 추가적인 규칙

  목적을 이루기 위해 더 체계적으로 정한 규칙

  • B (Block)

    기본적인 components 를 나타냄

    하이픈 사용함

  • E (Element)

    요소 (Element) 를 나타냄

    component 를 이루고 있는 구성요소를 표현할 때 사용

    component(B) 이름 뒤에 2개의 밑줄(__) 을 사용해 명명

  • M (Modifier)

    수정을 나타냄

    추가적인 속성을 가질 떄 component 를 수정한다는 의미

    component(B) 이름 뒤에 하이픈 두개(–) 를 사용해 명명

• JS Hook 과의 관계

  JS 가 selector 를 사용하고 있을 때

  1. js- 클래스 이름 사용

     JS 코드와 DOM element 간의 관계가 있음을 이해할 수 있음

  2. Rel 속성 (attribute) 사용

     rel 속성은 링크된 자원이 참조하는 문서와의 관계를 정의하며 이를 이용

  3. data attribute 금지

     data-* 를 JS hook 로 금지

     사용자 지정 데이터를 저장하는데만 사용해야 함