Mit BEM-Methodik und einer kleinen Dateigröße

Ich versuche, in die BEM-Methodik einzutauchen. Obwohl es für alle Projektgrößen die "Muss" -Methode zu sein scheint, bin ich irgendwie unzufrieden damit oder versuche ich es nur falsch zu benutzen?Mit BEM-Methodik und einer kleinen Dateigröße

Mit BEM wird das CSS in so etwas unterteilt.

.block { 
    /* Block code goes here */ 
} 

.block--is-hidden { 
    /* Block modifier code goes here */ 
} 

.block__element { 
    /* Element code goes here */ 
}

Das scheint für mich ziemlich gut zu sein, solange Sie nicht einige Code wiederverwenden. Angenommen, ich verwende Bootstrap oder ein anderes CSS Framework/Library. Ich möchte nur das Raster verwenden. Davon abgesehen könnte mein Markup irgendwie so aussehen.

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     ... 
    </div> 
    </div> 
</div>

Laut BEM wäre das ein Nein. Stattdessen sollten alle Gitterklassen in unseren entsprechenden Block- und Elementklassen eingebettet sein. Ein möglicher Weg, dies zu erreichen, wäre durch SASS und es ist @include. Für mich ergibt dies grundsätzlich redundanten Code.

Also meine Frage ist jetzt. Fehle ich etwas? Ich meine, mit BEM, während für z.B. Laden Bootstraps .container Code in jeden einzelnen meiner eigenen Block-Styling würde nur in eine massive Ausgabe CSS-Datei führen. Ist meine Vorgehensweise korrekt? Und wenn ja - würde ich die anfängliche Ladezeit nur für die Idee von besser organisiertem CSS und besser lesbarem Markup opfern?

Quelle

2017-07-23 Aer0

Definieren Sie "massive CSS-Ausgabe". Sie sagen "in der Zukunft könnte dies massiv sein" ohne tatsächliche Zahlen, um Ihre Behauptung zu stützen. Außerdem ist das Parsen von CSS ziemlich schnell und gzip hilft beim Laden mit einem Setup wie BEM, bei dem Muster in Klassennamen wiederholt werden, was die Übertragung des Inhalts nahezu unmöglich macht. Im Wesentlichen fordern Sie Eingaben für reine Vermutungen, die niemand genau beantworten kann. – Garbee

Sie haben gzip/deflate vergessen. –

Gibt es einen Grund, warum Ihre block s auf Containerebene beginnen müssen? Ich bin nicht sicher, ob es eine Verletzung der BEM-Methode genau ist, aber ich persönlich "beginne" meine block s mehr auf der Ebene html> body> .container. Also:

<html> 
<body> 

    <div class="container"> 
    <div class="cheesecake"> 
     <h1 class="cheesecake__heading"></h1> 
    </div> 
    </div> 

</body> 
</html

Mit SCSS suchen so etwas wie:

.cheesecake { 
    &__heading {} 
}

Und so weiter.

Quelle

2017-07-23 11:59:03

Mit BEM-Methodik und einer kleinen Dateigröße

Antwort

Verwandte Themen