BEM방식

Block Element Modifier

.BLOCK_ELEMENT--MODIFIER{/* ... */}

요소들을 일정 부분의 컴포넌트로 나눠 블록으로 지정하는 방식
기본적으로 ID를 사용하지 않으며, class만을 사용한다

.BLOCK이라는 요소 안에 '_'를 추가하여 ELEMENT 적용

<section class="group-intro">
	<h3 class="headline">Home appliances</h3>
	<div class="flex-area reverse">
		<div class="img-box">
       		<img src="./assets/images/intro4.jpg" alt="">
       	</div>
		<div class="text-box">
           <p>
           좋은 제품 연구소 QUQU는 UHD TV 및 다양한 생활가전도 고객님께 제공하기 위해 많은 제품들을 개발 중 입니다.
           </p>
			<a href="" class="link-detail">자세히 알아보기</a>
		</div>
	</div>
</section>

.group-info_headerlin{}
.group-info_reverse{}
이와 같이 클래스를 적용한다면

• 코드량 감소 (간결한 선택자)
• 중복 문제 해소 (명확한 선택자)
• 이해하기 쉬운 구조 (높은 가독성) 그러나 경우에 따라 BEM 방식이 정답은 아니기 때문에 상황에 따라 적절하게 사용해야 한다.

  Block Element Modifier

  Block
  
  재사용이 가능한 기능적으로 독립적인 페이지 컴포넌트를 블럭이라고 함
  개별적으로 사용할 수 있는 단위.

  ---

  Element
  
  블록을 구성하는 단위.
  블록은 독립적인 형태, 엘리먼트는 의존적인 형태.
  자신이 속한 블록 내에서만 의미를 가지기 때문에 개별적으로 쓰일 수 없다.

  ---

  Modifier
  
  블록이나 엘리먼트의 속성을 담당
  다르게 동작하는 블록이나 엘리먼트를 만들 때 사용.

BEM 참고 자료
bem.info
cheat-sheet