나는 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;
}
내가
이러한 뷰별 클래스를 모두 갖게 된 것은 틀린 것입니다. https://en.bem.info/methodology/quick-start/ – tadatuta
을 다시보십시오. 그러나 다시 읽게 될 것입니다. 그러나 뷰 특정 속성을 구체화하는 가장 좋은 방법은 무엇인지 혼란스러워합니다. 내가하고 싶지 않아야 블록에서 그들을 지정해야합니다 – HendrikEng
ur 도움말에 대한 @ tadatuta 감사합니다. 내가 다시 생각하면 다시 읽은 후 코드를 바꿨어요 빨리 ifs를 더 잘 확인할 수 있습니까? 고마워. – HendrikEng