CSS를 사용하여 BEM을 설계할 때

참조 소스 이미지

개시하다

좋은 CSS를 쓰는 방법으로는 몇 가지 CSS 디자인이 있다.
그 전에 무엇이 좋은 CSS입니까?
예측하기 쉽다
재활용
• 간편한 유지 관리
• 확장 용이
듣건대
CSS 디자인의 좋은 CSS 디자인으로 요괴인 BEM이 있습니다.
물론 좋은 CSS를 달성할 수 있다면 필요없다
이번에 CSS 디자인 규칙 중 하나인 BEM을 총결하였다.

이른바 BEM

BEM은 Block, Element, Modifier의 약자이다
블록
Element→요소
Modifier(kye와value로 표시)→상태(변화)

왜 BEM을 사용합니까?

・장기 유지 보수가 가능한 디자인으로 1버전 빠른 개발을 위해
・팀의 확장성
• 코드의 재활용성
내가 사용하는 이유는 적목을 다시 이용할 수 있기 때문이다!?BEM을 사용합니다.
착륙 페이지 같은 거.
기존에 제작된 사이트 내에서 블록을 다른 사이트로 활용하려고 할 때는 HTML과 CSS 블록을 추출해 간단하게 재활용할 수 있다.(상속 따위는 신경 쓰지 마라.)

BEM 사용에 필요한 지식

블록, Element,Modifier라는 세 가지 개념을 이해

class명의 명명 규칙 이해

개념을 이해하고 명명 규칙에 따라 인코딩하면 OK

Block, Element, Modifier 세 가지 개념

전제로 웹 페이지는 블록의 집합으로 여겨진다.

1. 블록

Block

2.Element(요소)

블록의 구성 요소

3. 모뎀

• 블록, Element의 변화 축, 상태를 나타내는 속성의 역할
・Modifier는 이름(key)과 값(value)을 가지고 있어 여러 개의 Modifier를 동시에 사용할 수 있다
· 블록을 위한 모디파이터와 엘리먼트를 위한 모디파이터 두 종류가 있다

예제

Block
└　Element

<div class="search">                           <!--Block-->
  <input class="search__input" type="text">    <!--Element-->
  <input class="search__button" type="submit"> <!--Element-->
</div>

Block 및 Modifier
└　Element

<ul class="list  list_type_A">        <!--Block-->と<!--Modifier-->
  <li class="list__item"></li>　　　　　　　　　　　　　　　　<!--Element-->
  <li class="list__item"></li>　　　　　　　　　　　　　　　　<!--Element-->
</ul>

<ul class="list  list_type_B">        <!--Block-->と<!--Modifier-->
  <li class="list__item"></li>　　　　　　　　　　　　　　　　<!--Element-->
  <li class="list__item"></li>　　　　　　　　　　　　　　　　<!--Element-->
</ul>

Block
긴 Element 및 Modifier

<ul class="menu">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<!--Block-->
  <li class="menu__item"></li>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<!--Element-->
  <li class="menu__item  menu__item_state_current"></li>　　　　<!--Element-->と<!--Modifier-->
  <li class="menu__item"></li>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<!--Element-->
</ul>

이름의 명명 규칙

블록, Element, Modifier로 구분
일관된 이웃　「_ _」 - 를 사용합니다.
기본 규칙이 세 가지가 있어요.

블록과 Element의 분할

블록과 Modifier의 분할, Modifier의 키와value의 분할

블록이나 Element 이름을 두 개 이상의 단어로 나타낼 때의 단어와 단어의 구분

※ 중요한 것은 스웨터의 종류에 따라
· 블록과 엘리먼트의 분할인가요?
・혹시 모디파이어의 완결편인가?
· 단순한 단어 분할인가요?
하지만 확실하게 판별할 수 있도록.

총결산

이 가능하다, ~할 수 있다,...그렇다면 BEM 조합을 사용하는 것이 현재의 용도다.
다른 이유가 있으면 제가 사용하겠습니다.

참고 문장

BEM

・BEM의 CSS 디자인 참조
・BEM 기반 프런트엔드 디자인

양호한 CSS 설계 이해

・웹 제작자를 위한 CSS 디자인 교과서 현대 웹 개발에 없어서는 안 될'수정하기 쉬운 CSS'의 디자인 기법
・더 나은 CSS를 쓰기 위한 다양한 CSS 디자인 요약