Wie strukturiere ich CSS mit der BEM-Methode für adaptive Webseiten?

Question

Es ist einfach, BEM für feste Layouts zu verwenden. Wie sieht es mit der css styles Struktur für adaptive Webseiten mit Medienabfragen aus?

html Beispiel:

<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> 

weniger Probe:

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

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

    &--small { 
     //some styles 
    } 
} 

• .T-news - Seitenvorlage. Es ist ein Block, der die Position von Blöcken innerhalb definiert.
• .B-Post - BEM Block
• .B-post__title - BEM-Element von B-post
• .B-post__text - rot - BEM Modifikator von b-post__text von B-post

Soll ich Medienanfragen innerhalb oder außerhalb meiner Blöcke stellen?

Answer 1

Meiner Erfahrung nach erkannte ich, dass Blöcke aus Gründen der Flexibilität und Modularität nicht für ihre Breiten oder Ränder verantwortlich sein sollten. Mit "elastischen" Blöcken in einem Projekt können sie moved around werden, um verschiedene Bereiche (mit verschiedenen Größen) einer Seite zu belegen, ohne Funktionalität oder Layout zu beeinträchtigen. Was die Ränder anbelangt, ist es einfacher, zwischen den Blöcken konsistente Leerzeichen zu halten, wenn sie auf einer höheren Ebene definiert sind: ein Vorlagenblock wie, nehme ich an, t-news ist (in Anbetracht der "t" ist für Vorlage).

BEM dreht sich alles um Modularität, jeder Code, der sich auf einen bestimmten Block bezieht, bleibt im Blockordner im file system, daher sollte es bei Medienabfragen, die nur ein Teil des CSS sind, nicht anders sein. Das Wichtigste ist, zu wissen, was das CSS tut, zum Beispiel: Wenn ein Regelwerk Bereiche und Ränder in einer Vorlage definiert, ob es dafür Medienabfragen benötigt oder nicht, sollten diese Regeln Teil des Blocks sein verantwortlich für diese Definitionen.

Dieser Ansatz kann eine Menge von Medien-Anfragen generiert, und es kann ein Problem sein, mit Rendering-Leistung, aber nach this article können mehrere Medien-Anfragen Leistung beeinflussen nur, wenn sie unterschiedliche voneinander sind. Wiederholungen der gleichen Regel, wie @media (max-width: 850px), werden serialisiert und als eins interpretiert.

Auf diese Weise gehen Medienabfragen in Bezug auf Bereiche und Ränder in den Vorlagenblock und zusätzliche Medienabfragen, die sich auf die Komponenten selbst beziehen, werden in die Komponentenblöcke aufgenommen. Da die Vorlage für die Größen verantwortlich ist, würde ich den "kleinen" Modifikator, in Ihrem Beispiel, in den Template-Block ändern.

Auch würde ich mit green und red als Modifikatoren überdenken, da Farben während der Lebensdauer eines Projekts ändern können. Ich schlage vor, etwas zu versuchen, das nicht das Aussehen der Elemente beschreibt, wie correct und alert.

Schließlich sollten Sie daran denken, dass Modifikatoren Elementklassen im HTML folgen sollten, wie b-post__text b-post__text--alert.

Hier ist Ihre aktualisierten Code:

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; 
    } 
} 

Hoffnung, das hilft.