[HTML/CSS] 어려운 css 클래스명 짓기 - BEM을 공부해보자

 

작동 방식

BEM 클래스 이름은 최대 세 부분으로 구성됩니다.

1. 블록: 구성요소의 가장 바깥쪽 상위 요소를 블록으로 정의합니다.
   블록은 새로운 구성 요소의 최상위 수준 추상화입니다. 이 블록은 상위 블록으로 간주되어야 합니다.
2. 요소: 구성 요소 내부에는 요소라고 하는 하나 이상의 하위 요소가 있을 수 있습니다.
    __element 이중 under__scores 접두사가 붙은 요소는 하위 요소를 식별하는 CSS 선택기입니다
   . 이러한 CSS 선택기를 사용하여 더 효과적으로 제어할 수 있는 요소를 타겟팅할 수 있습니다.
3. 수정자: 블록이나 요소는 수정자로 표시되는 변형을 가질 수 있습니다.
    –modifier 이중 대시가 접두어로 붙은
   수정자는 특정 요소의 변형을 식별하는 CSS 선택기입니다. 이는 기본 구성 요소 자체의 모양과 느낌을 변경하지 않고 특정 구성 요소의 테마나 스타일을 조작하는 데 사용됩니

세 가지를 모두 이름에 사용하면 다음과 같습니다.

[block]__[element]--[modifier]

two daches 스타일 `block-name__elem-name--mod-name--mod-val`

카멜케이스 스타일 `blockName-elemName_modName_modVal`

리액트스타일 `BlockName-ElemName_modName_modVal`

<header class="header">
    <!--
    `header__button` — block element `header`;
    `button` — block;
    `button_theme_islands` — modifier.
    -->
    <button class="header__button button button_theme_islands">...</button>
</header>

요소 제목이 블록 뉴스레터 내부에 있음을 class="newsletter__heading" 로 의미

<div class="newsletter">
  <div class="newsletter__heading">
    Newsletter
  </div>
  <input type="email" class="newsletter__input">
  <button class="newsletter__button">Unsubscribe</button>
  <button class="newsletter__button">Subscribe</button>
</div>

 

<button class="newsletter__button">
    Unsubscribe
</button>
<button class="newsletter__button newsletter__button--call-to-action">
    Subscribe
</button>

조금 보기 흉하더라도 원래 클래스와 수정자 클래스를 결합하는 것이 중요합니다

 

.newsletter {
  text-align: center;
}

.newsletter .newsletter__heading {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.newsletter .newsletter__input {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 1rem;
  min-width: 300px;
}

.newsletter .newsletter__button {
  padding: 0.5rem;
  color: #c0c0c0;
  background: #fafafa;
  font-size: 16px;
}

.newsletter .newsletter__button.newsletter__button--call-to-action {
  background: #74B9FF ;
  border-color: #74B9FF;
  color: white;
}

 

 

나는 완전한 블록 재사용이라는 BEM 원칙을 완전히 준수하지 않더라도 몇 가지 최소한의 전역 스타일을 설정으로 사용하는 것을 선호합니다.

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Ropa+Sans');

html {
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}
보시다시피 이러한 기본값은 매우 작습니다. 더 큰 글꼴 크기를 설정하고 가져온 더 예쁜 글꼴을 기본값으로 설정합니다. 나는 또한 상자 모델을 설정하고 있습니다 . 모든 구성요소에 대해 이 모든 작업을 수행할 수 있지만 제 생각에는 실용적이지 않습니다.

그런 일로 논쟁하지 맙시다. 그다지 중요하지 않습니다.

 

 

제가 항상 궁금했던 것 중 하나는 미디어 쿼리를 어디에 넣을 것인가였습니다. BEM을 사용하면 접근하기가 매우 쉽습니다. 해당 블록을 자신이 속한 블록에 넣기만 하면 됩니다 . 뭔가가 옆으로 흘러갈 때 검색할 위치를 정확히 알 수 있으므로 유지 관리에 많은 도움이 됩니다.

각 블록은 서로 다른 뷰포트에서의 자체 동작에 대해서만 책임을 집니다.

 

 

 

 

 

https://simple-web.dev/bem-by-example

https://sourcedcode.com/blog/css/what-is-bem-with-examples 👍