BEM CSS - 믹스 요소/수정 자

Question

BEM 구조에 대한 질문이 있습니다. 요소/수식어를 섞는 것이 의미 적으로 옳은가요? 나는 영웅과 포트폴리오 모듈을 가지고있다. 영웅 모듈에서 portfolio__item을 사용하고 싶지만 hero__item의 기본 스타일을 사용해야합니다. 이것은 올바른 방법인가요?이 요소들을 혼합 할 수 있습니까? 난 당신이 hero 블록 내에서 portfolio__item 요소를 배치 할 가정 - - 그것은 좋은 일이 아니다

<section class="hero hero--collage hero--bottom-decoration">  
    <div class="portfolio__item hero__item hero__item--animated"> 
     <a href="http://www.google.nl"> 
      <div class="hero__hover"> 
       <span class="hero__hover__content h1">Hover title</span> 
      </div> 
      <img src="http://www.google.nl" class="hero__image"> 
     </a> 
    </div> 
</section> 


<section class="portfolio"> 
    <div class="portfolio__item"> 
     <a href="http://www.google.nl"> 
      <img src="http://www.google.nl" class="hero__image"> 
     </a> 
    </div> 
</section> 

Answer 1

"는 의미 론적으로 올바른 요소/수정을 혼합하는 것입니다." 한 블록 내에서 블록을 중첩 할 수 있지만 다른 블록의 요소 내에서 블록의 요소를 중첩 할 수는 없습니다. 당신은 hero__item 요소에 수정을 사용할 수 있습니다

그것의 스타일을 변경합니다

<div class="hero__item hero__item--portfolio"></div> 

처럼 생각했다.

Answer 2

원하는대로 할 수 있습니다. 그러나 BEM 방법론은 말한다 :

블록 세트 네임 스페이스

이이 글을 읽을 수있는 좀 지저분합니다. 나는 그것을 한눈에 이해할 수 없다. BEM - 블록의 목표는이므로 동일한 블록을 다시 쓸 필요가 없습니다. 그리고 스타일에도 똑같습니다. 이 수정자를 사용하면 필요한 모든 블록을 재사용하고 조정할 수 있습니다.

당신은 그래서 '블록 이름'당신은 모든 인스턴스의 스타일을 일치시킬 수 있습니다에 블록 요소

<img src="http://www.google.nl" class="block-name hero__image"> 

을 혼합 할 수 있습니다. 영웅 이미지 또는 다른 요소에서 고유 한 스타일을 일치시킬 수 있습니다.

당신은 요소

당신은 2 LVL을 쓸 필요가없는 요소를 만들 수 없습니다. 원인 블록 집합 네임 스페이스의 이름입니다.

<span class="hero__hover__content h1">Hover title</span> 

그냥

<span class="hero__hover-content h1">Hover title</span> 

---

문서 : https://en.bem.info/methodology/naming-convention/