BEM에 대해 나름대로 정리해 보았습니다.

신졸로 처음으로 BEM이라는 말을 하고, 공부를 했으므로 정리했습니다.
이번에는 scss를 사용한다고 가정합니다.
틀린 곳이 많이 있을까 생각하기 때문에,
코멘트 주시면 다행입니다.

원래 BEM이란?

Block, Element, Modifier의 약어. 프런트 엔드 디자인 사상 중 하나.

Block

자주 재사용하는 요소. card이거나 list이거나.

Element

Block 안에서만 존재할 수 있는 것. 부품. ListTitle은 list 안에서만 존재할 수 있다.

Modifier

Block이나 Element로, 조금 바꾸고 싶을 때에 사용한다. "글자를 붉게하고 싶다."

※ 블록을 큰 요소. Element를 작은 요소라고 파악하면, 번역을 모르기 쉽다. (자신이 그랬다)
기본적으로, 잘 반복하는 것이 Block. 게다가, 그 Block에서 밖에 사용하지 않는 것이 Element라고 파악하면 알기 쉬웠다.

BEM을 사용하면 무엇이 좋은지

여기 을 참고로 공부했습니다.
이하 발췌했습니다.

장기간 유지 보수가 가능한 설계로 빠른 버전 개발을 신속하게
개발 속도가 빠르고 장기간 유지 보수하기 쉬운 설계를 실현하려면 설계 규칙을 명확하게 규정해야합니다. 규칙을 명확하게 규정함으로써, class명의 명명 규칙이나 파일 구조 등으로, 개인 개인이 고민하는 시간이 적어져, 그만큼 개발 스피드가 오를 것으로 기대할 수 있습니다.

팀 확장성
팀의 규모 확장이 용이하기 위해서는 팀에 들어간 새로운 멤버가 가능한 한 단기간에 즉전력이 될 필요가 있습니다. 팀에 새로운 멤버가 들어가도 그 멤버가 BEM마저 이해하고 있으면 즉시 전력이 됩니다. 또한 시간이 지나도 팀이 바뀌어도 유지 보수 가능한 상태를 유지할 수 있습니다. BEM은 팀의 공용 언어 역할을 합니다.

코드 재사용성
코드 재사용성은 웹 사이트를 구성하는 부품이 얼마나 독립적으로 설계되었는지에 따라 결정됩니다. 부품을 완전히 독립적으로 만들 수 있으면 코드 재사용이 용이해집니다. 여기서 재사용이란 CSS에 의한 외형의 이야기뿐만 아니라, JavaScript에 의한 행동도 포함하고 있습니다.

즉, 메인터넌스하기 쉽고, 모두에게 알기 쉽고, 한 번 쓴 코드를 사용해 돌기 쉬워진다고 하는 것.

MindBEMding

BEM 중에서도 CSS의 명명 규칙을 가리킨다 (자신 없음)

기본적으로, 「Block__element--Modifier」라고 하는 느낌으로 쓴다.
elementの前はアンダースコアを２つModifierの前にはハイフンを２つ

존재가 허용되는 형태 4개

sample.html


<div class="Block">
</div>

<div class="Block Block--Modifier">
</div>

<div class="Block">
  <div class="Block__element">
  </div>
</div>

<div class="Block">
  <div class="Block__element Block__element--Modifier">
  </div>
</div>

sample.scss

.Block{
  &--Modifier{  
  }
  &__element{
    &--Modifier
  }
}

기본적으로는 이것만!
이것만으로 여러가지 표현할 수 있다.

margin의 취급에 대해서

margin는 Block 또는 Element에 붙이지 말라.
(재사용하기 어렵다)
margin을 사용하고 싶을 때는 다음과 같이하면 좋다.

sample.html

  <div class="MainBlock">
    <div class="MainBlock__text">
      1番目
    </div>
    <div class="MainBlock__text">
      2番目
    </div>
    <div class="MainBlock__text">
      3番目
    </div>
  </div>

sample.scss

.MainBlock{
  &__text{
  }
}

.MainBlock{
  & &__text{
   //ここにmarginを書く
  }
}

사고방식의 간은, 「재이용할 수 있을지 어떨지」
어떤 요소를 재사용할 때 마음대로 여백이 생기지 않도록 주의

Block과 Element와 Modifier만으로는 부족하지만

Blockの中にBlockをつくる。

sample.html

<div class="List">
    <div class="ListItem">
      <div class="ListItem__left">
        <img src="Lena.jpg" alt="Lena" style="width: 100%">
      </div>
      <div class="ListItem__right">
        <div class="TextCard">
          <div class="TextCard__headingText">
            見出し
          </div>
          <div class="TextCard__mainText">
            本文本文本文本文本文本文
          </div>
        </div>
      </div>
    </div>

    <div class="ListItem">
      <div class="ListItem__left">
        <img src="Lena.jpg"" alt="lena style="width: 100%">
      </div>
      <div class="ListItem__right">
        <div class="TextCard">
          <div class="TextCard__headingText">
            見出し
          </div>
          <div class="TextCard__mainText">
            本文本文本文本文本文本文
          </div>
        </div>
      </div>
    </div>

sample.scss


.List {
  width: 80%;
  margin: 0 auto;
}

.ListItem {
  &__left {
    display: inline-block;
    width: 30%;
    height: auto;
  }
  &__right {
    display: inline-block;
    width: 60%;
    height: auto;
    vertical-align: top;
  }
}

.TextCard {
  width: 100%;
  color: #000;
  &__headingText {
    font-size: 30px;
  }
  &__mainText {
    font-size: 20px;
  }
}