CSS-KLASSEN MIT BEM BENENNEN

Dieser Beitrag wurde ursprünglich an gepostet mein Blog.

GUT – Bsperren Emüde Modifier ist die Art, CSS-Klassen zu benennen, damit sie aussagekräftiger und wiederverwendbar sind.

BEM hilft dabei, Namenskollisionen zu vermeiden und den Aufwand für das Modifizieren von CSS-Klassen zu reduzieren, wenn Änderungen vorgenommen werden müssen. Wie Sie bei der Arbeit mit großen Projekten wissen, kann das Ändern einer einzelnen CSS-Klasse zu Dutzenden von betroffenen Seiten führen. BEM hilft, all diese Probleme zu vermeiden.

Lassen Sie mich erklären, was ich über BEM wusste:

B – Block

Block ist ein unabhängiger, wiederverwendbarer und eigenständiger Teil des Designs. Blöcke können ineinander verschachtelt werden.

  
  <section class="hero">
    
    <a href="#" class="btn">Click Me!!</a>
  </section>

E – Element

Element gehört zu einem Block und kann nicht eigenständig sein. Es kann einfach nicht außerhalb des Blocks verwendet werden, zu dem es gehört. Elemente können ineinander verschachtelt werden. Die CSS-Klasse wird als Blockname plus zwei Unterstriche plus Elementname gebildet.

  
  <div class="hero">
    
    <div class="hero__content">

      
      <h1 class="hero__title">I'm main title</h1>

      
      <p class="hero__text">Cupiditate dolores iste reiciendis ea non iure est.</p>
    </div>
  </div>

M – Modifikator

Modifikatoren werden verwendet, um das Standardverhalten oder den Status eines Elements oder Blocks zu ändern. Außerdem sind Modifikatoren nicht eigenständig, dh sie können nicht außerhalb von Blöcken verwendet werden, zu denen sie gehören. Sie zeigen, welche Größe, wie unterschiedlich oder wie sie sich von den Standardeinstellungen verhalten. Die CSS-Klasse wird als Blockname plus zwei Minuszeichen plus Elementname gebildet.

  <div>
    
    <a href="#" class="btn">I'm OG</a>

    
    <a href="#" class="btn btn--red">I'm red</a>
    
    
    <a href="#" class="btn btn--red btn--large">I'm red and large</a>
  </div>

Sie können sich hier auch ein Video darüber ansehen GUT

Similar Posts

Leave a Reply

Your email address will not be published.