BEM에서 이것을 표시하는 가장 좋은 방법 CSS

Question

저는 BEM을 CSS 구성 방법으로 사용하여 CSS를 구성하고 프로젝트 과정에서 거의 모든 것이 모듈로 바뀌 었습니다.

모듈의 레이아웃 스타일을 상위 모듈에 넣습니다. 그것은 잘 작동하고 있습니다. 나를 혼란 된 나는의 보류를 파악할 수없는 것을

이 같은 것입니다 : 내가 가지고있는 다음과 같은 말 :이 단계에서 그래서

<div class="picture-holder"> 
    <div class="picture-box"> 
    <img class="image" /> 
    <span class="caption">text</span> 
    </div> 
    <div class="picture-box"> 
    <img class="image" /> 
    <span class="caption">text</span> 
    </div> 
</div> 

BEM의 규칙을 다음, 나는 추가합니다 그것에 모듈의 상위 클래스 이름은 자신의 모듈 이름입니다 :

<div class="picture-holder"> 
    <div class="picture-holder__picture-box"> 
    <img class="image" /> 
    <span class="caption">text</span> 
    </div> 
    <div class="picture-holder__picture-box"> 
    <img class="picture-box__image" /> 
    <span class="picture-box__caption">text</span> 
    </div> 
</div> 

다음 각 하나에 유일한 모듈 이름을 추가

<div class="picture-holder"> 
    <div class="picture-holder__picture-box picture-box"> 
    <img class="image" /> 
    <span class="caption">text</span> 
    </div> 
    <div class="picture-holder__picture-box picture-box"> 
    <img class="picture-box__image image" /> 
    <span class="picture-box__caption caption">text</span> 
    </div> 
</div> 

이 모양이 맞습니까? 사진 - holder.sass - - picture.sass - caption.sass

그것은 것 같다 이 사진-box.sass - 당신이 모듈 스타일의 각? 을 잡고 개별 파일을 부를 것이다 무엇

이처럼 중첩 될 때마다 의미가 거의없는 모듈 또는 "그림", "이미지", "상자"또는 "캡션"과 같이 너무 일반적인 모듈로 끝납니다.

위로 동일한 문제가 발생합니다. 계층 구조. 따라서 사이트 주위에 div이라는 줄이있는 곳 (예 : .container)은 .container-header, .container-main 및 .container-footer입니다.

저는 BEM과 모듈의 모든 주요 개념을 좋아하지만 모듈과 관련된 내용은 혼란 스럽습니다.

BEM을 설명하는 모든 기사는이 문제에 대해 이야기하지 않으며이 문제를 해결하지 못하는 간단한 간단한 예를 보여줍니다.

내가 잘못 했습니까?

기본적으로이 주제에 대한 사람들의 생각과 개선 방법을 원하십니까?

Answer 1

올바른 경로에 있지만 모듈 접두사없이 '기본'클래스를 추가하지 않아도됩니다.

<div class="picture-holder"> 
    <div class="picture-box"> 
    <img class="picture-box__image" /> 
    <span class="picture-box__caption">text</span> 
    </div> 
    <div class="picture-box"> 
    <img class="picture-box__image" /> 
    <span class="picture-box__caption">text</span> 
    </div> 
</div> 

당신이 '그림 상자'를 사용하려는 방법에 따라이 더 간단 수 :

여기

<div class="picture-holder"> 
    <div class="picture-holder__picture-box picture-box"> 
    <img class="image" /> 
    <span class="caption">text</span> 
    </div> 
    <div class="picture-holder__picture-box picture-box"> 
    <img class="picture-box__image image" /> 
    <span class="picture-box__caption caption">text</span> 
    </div> 
</div> 

당신 가능성 필요가 무엇 : 여기

은 버전입니다

<div class="picture-holder"> 
    <div class="picture-holder__box"> 
    <img class="picture-holder__image" /> 
    <span class="picture-holder__caption">text</span> 
    </div> 
    <div class="picture-holder__box"> 
    <img class="picture-holder__image" /> 
    <span class="picture-holder__caption">text</span> 
    </div> 
</div>