2016-10-22 5 views
0

나는 BEM 방법론을 따르고 있으며 때로는 꽤 많은 수업을 듣기 때문에 내가 제대로하고 있는지 확실치 않습니다. 믹스와 플레이스 홀더를 사용하기 시작하면서 코드를 모듈화하고 재사용 할 수있게했습니다.BEM 너무 많은 수업?

클래스 특정하는 SCS 파일 :

.l-page-width { 
    display: inline-block; 

    &_background_white { 
    @extend %background_white; 
    } 

    &_padding_bot-top { 
    @extend %padding_bot-top; 
    } 

    &_center_absolute { 
    @extend %center_absolute; 
    } 
} 

자리 표시 자 :

내가 예를 들어 다음과 같은하는 SCS가 코드 재사용을 가지고 :하지만 어떤 경우에는 내가 같은 코드로 끝날 것

%background { 
    &_white { 
    background: $white; 
    } 
} 

%padding { 
    &_bot-top { 
    padding-bottom: span(.35); 
    padding-top: span(.35); 
    } 
} 

%center { 
    &_absolute { 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    overflow: auto; 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
} 

HTML

<div class="l-page-width l-page-width_background_white l-page-width_padding_bot-top l-page-width_center_absolute"> 

<div class="c-quote c-quote_padding_lr"> 
      <h1 class="c-quote__title c-quote__title_outline_black"> 
       Title Here 
      </h1> 
      <p class="c-quote__content"> 
       content text here 
      </p> 
     </div> 
</div> 

내가 다시 BEM 정보 사이트를 읽고 그와 함께 와서 지금은 훨씬 더 의미가있다 :

<div class="l-page-width"> 
    <div class="l-page-width__c-quote c-quote"> 
     <h1 class="c-quote__title c-quote__title_outline_black"> 
      Title Here 
     </h1> 
     <p class="c-quote__content"> 
      content text here 
     </p> 
    </div> 
</div> 

하는 SCS :

.l-page-width__c-quote { 
    @extend %background_white; 
    @extend %padding_bot-top; 
    @extend %padding_lr; 
    @extend %align_center; 
} 

내가

+0

이러한 뷰별 클래스를 모두 갖게 된 것은 틀린 것입니다. https://en.bem.info/methodology/quick-start/ – tadatuta

+0

을 다시보십시오. 그러나 다시 읽게 될 것입니다. 그러나 뷰 특정 속성을 구체화하는 가장 좋은 방법은 무엇인지 혼란스러워합니다. 내가하고 싶지 않아야 블록에서 그들을 지정해야합니다 – HendrikEng

+0

ur 도움말에 대한 @ tadatuta 감사합니다. 내가 다시 생각하면 다시 읽은 후 코드를 바꿨어요 빨리 ifs를 더 잘 확인할 수 있습니까? 고마워. – HendrikEng

답변

0

하려고하지 마십시오 코드를 복잡하게 만들거나 톤이나 도우미, 믹스 인 등을 사용하지 마십시오. 간단하고 충분한 코드를 작성하십시오.
l-page-width__c-quote c-quote -이 선택자는 요소에 대해 아무 말도하지 않습니다. 나는 그것이 무엇인지 상상조차 할 수 없다. 그런 식으로 클래스 이름을 지정하지 마십시오. 요소의 모양을 설명합니다. 완벽한 수업 이름은 news, news__title, news__date 등입니다.
사용자 지정 접두사를 사용하지 마십시오. 사용자가 무엇을 의미하는지 모르는 사람은 누구도 사용하지 마십시오.
동일한 코드를 두 번 쓰는 데는 아무런 문제가 없습니다. 훨씬 더 나쁜 것은 동일한 믹스 인 또는 플레이스 홀더로 만들어진 두 개의 블록 중 하나를 수정하거나 일부 요소가이 모양을 갖는 이유를 이해하려고 시도 할 때입니다.

믹스 인 또는 플레이스 홀더를 포기하지 않았습니다. 우리는 단지 이들을 절대로 사용해야합니다.