적응 형 웹 페이지에 대한 BEM 방법론을 사용하여 CSS를 구조화하는 방법은 무엇입니까?

Question

고정 레이아웃에는 BEM을 사용하는 것이 쉽습니다. 미디어 쿼리가있는 적응 형 웹 페이지의 CSS 스타일 구조는 무엇입니까?

HTML 샘플 :

<div class="t-news"> 
    <div class="t-news__post b-post"> 
     <div class="b-post__title"></div> 
     <div class="b-post__text--green"></div> 
    </div> 
    <div class="t-news__post b-post--small"> 
     <div class="b-post__title"></div> 
     <div class="b-post__text--red"></div> 
    </div> 
</div> 

적은 샘플 :

이

.t-news { 
    &__post { 
     //some styles 
    } 
} 
.b-post { 
    &__title { 
     //some styles 
    } 
    &__text { 
     //some styles 

     &--red { 
       //some styles 
     } 
     &--green { 
       //some styles 
     } 
    } 

    &--small { 
     //some styles 
    } 
} 

• .T-뉴스 - 페이지 템플릿입니다. 블록 내부의 위치를 ​​정의하는 블록입니다.
• .B 포스트 - B-포스트 BEM 소자
• .B-post__text - - 레드 - BEM은
• .B-post__title 블록 B 포스트의 B-post__text의 BEM 개질제

블록 내부 또는 외부에 미디어 쿼리를 넣어야합니까?

Answer 1

내 경험에 따르면 유연성과 모듈성을 위해 블록이 너비 또는 여백에 책임 져서는 안된다는 것을 깨달았습니다. 프로젝트에서 "탄력적 인"블록을 사용하면 기능 또는 레이아웃을 손상시키지 않고 페이지의 다른 영역 (크기가 다른)을 차지하도록 moved around이 될 수 있습니다. 여백에 관해서는 블록이 더 높은 수준에서 정의되는 경우 블록 사이에 일정한 공백을 유지하는 것이 더 쉽습니다. 예를 들어 t-news과 같은 템플릿 블록은 ("t"는 템플릿을 고려한 것입니다).

BEM은 모두 모듈성을 기반으로하므로 특정 블록과 관련된 모든 코드는 file system의 블록 폴더에 있으므로 CSS의 일부인 미디어 쿼리와 다를 수 있습니다. 중요한 것은 CSS가 수행하는 작업을 파악하는 것입니다. 예를 들어 규칙 세트가 템플릿의 영역과 여백을 정의하는 경우 미디어 쿼리가 필요한지 여부에 관계없이 이러한 규칙은 다음과 같은 블록의 일부 여야합니다. 이러한 정의에 책임이있다.

이 방법은 미디어 쿼리를 많이 생성 할 수 있으며, 렌더링 성능과 우려가있을 수 있습니다,하지만 그들은 서로 다른을 경우에만, this article에 따라, 여러 미디어 쿼리 성능에 영향을 미칠 수 있습니다. 동일한 규칙 (예 : @media (max-width: 850px)) 반복은 직렬화되어 하나의 것으로 해석됩니다.

이렇게하면 영역 및 여백과 관련된 미디어 쿼리가 템플릿 블록으로 이동하고 구성 요소 자체와 관련된 추가 미디어 쿼리가 구성 요소 블록으로 이동합니다. 템플리트가 크기를 담당하기 때문에 예제의 "작은"수정자가 템플리트 블록으로 변경됩니다.

또한 프로젝트 수명 기간 동안 색상이 변경 될 수 있으므로 한정자로 green 및 red을 사용하는 것을 다시 생각해 보겠습니다. correct 및 alert과 같은 요소의 모양을 설명하지 않는 무언가를 시도해 보는 것이 좋습니다.

마지막으로 수식어는 b-post__text b-post__text--alert처럼 HTML에서 요소 클래스를 따라야한다는 것을 기억하십시오.

HTML을 :

<div class="t-news"> 
    <div class="t-news__post b-post"> 
     <div class="b-post__title">Title 1</div> 
     <div class="b-post__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div> 
    </div> 
    <div class="t-news__post b-post"> 
     <div class="b-post__title">Title 2</div> 
     <div class="b-post__text b-post__text--correct">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div> 
    </div> 
    <div class="t-news__post t-news__post--small b-post"> 
     <div class="b-post__title">Title 3</div> 
     <div class="b-post__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
    </div> 
    <div class="t-news__post t-news__post--small b-post"> 
     <div class="b-post__title">Title 4</div> 
     <div class="b-post__text b-post__text--alert">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
    </div> 
</div> 

SCSS :이 도움이

.t-news { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: flex-start; 
    margin: -0.5rem; 

    &__post { 
     margin: 0.5rem; 
     width: calc(50% - 1rem); 
     @media (max-width: 800px) { width: calc(100% - 1rem); } 

     &--small { 
      width: calc(25% - 1rem); 
      @media (max-width: 800px) { width: calc(50% - 1rem); } 
     } 
    } 
} 

.b-post { 
    box-sizing: border-box; 
    border: 1px solid #eeb; 
    background: #ffc; 
    padding: 0.5rem; 

    &__title { 
     font-size: 1.5rem; 
     @media (max-width: 800px) { font-size: 1.25rem; } 
    } 

    &__text { 
     font-size: 1rem; 

     &--correct { 
      color: green; 
     } 

     &--alert { 
      color: red; 
     } 
    } 

    &--small { 
     border: none; 
     font-style: italic; 
    } 
} 

희망

여기에 업데이트 된 코드입니다.