Beherrschen der CSS-BEM-Benennung mit praktischen Beispielen: Pure HTML, Angular und Next.js

Im vorherigen Artikel haben wir die Grundlagen der BEM-Namenskonvention in CSS untersucht und warum sie für die Aufrechterhaltung sauberen und skalierbaren Codes von entscheidender Bedeutung ist.

CSS BEM-Namenskonvention: Was es ist, warum es wichtig ist und wie man es verwendet?

Ahmet Erkan Paşahan ・ 14. September

#css #bem #html #Programmierung

Dieses Mal werden wir anhand praktischer Beispiele tiefer eintauchen, um zu sehen, wie BEM in verschiedenen Umgebungen funktioniert: Pure HTML, Angular und Next.js.

BEM ist nicht auf grundlegende HTML-Strukturen beschränkt; Es kann effektiv in jedem modernen Frontend-Framework angewendet werden. Am Ende dieses Artikels werden Sie ein klareres Verständnis dafür haben, wie Sie BEM in verschiedenen Entwicklungsumgebungen implementieren.

Beispiel 1: Verwendung von BEM in reinem HTML

In diesem Beispiel erstellen wir eine Benutzerprofilkarte, deren Stil sich je nach Online- oder Offline-Status des Benutzers dynamisch ändert. Dies ist ein häufiger Anwendungsfall in realen Anwendungen, bei denen sich Elemente je nach Zustand oder Zustand ändern müssen.

HTML:

<div class="user-card user-card--offline">
  <img src="profile.jpg" alt="User Avatar" class="user-card__avatar" />
  <div class="user-card__info">
    <h2 class="user-card__name">John Doe</h2>
    <p class="user-card__status">Offline</p>
  </div>
</div>

CSS:

.user-card {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #f5f5f5;
  max-width: 300px;
}

.user-card__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-card__info {
  display: flex;
  flex-direction: column;
}

.user-card__name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-card__status {
  font-size: 14px;
  color: #888;
}

.user-card--online {
  border-color: #4caf50;
  background-color: #e8f5e9;
}

.user-card--online .user-card__status {
  color: #4caf50;
}

.user-card--offline {
  border-color: #f44336;
  background-color: #ffebee;
}

.user-card--offline .user-card__status {
  color: #f44336;
}

Erklärung:

• Die Benutzerkarte ist der Block, der die Benutzerprofilkarte darstellt.
• Modifikatoren wie „Benutzerkarte – online“ und „Benutzerkarte – offline“ ändern das Erscheinungsbild der Karte basierend auf dem Status des Benutzers.
• user-card__avatar, user-card__name und user-card__status sind Elemente des user-card-Blocks, der jeweils den Avatar, den Namen und den Status darstellt.
• Durch die Verwendung von BEM wird deutlich, welche Stile für den Block gelten und welche Stile sich je nach Status des Benutzers ändern.

Beispiel 2: Anwenden von BEM in Angular

In diesem Angular-Beispiel erstellen wir eine interaktive Schaltfläche, die beim Klicken einen Ladestatus anzeigt. Dies ist ein häufiger Anwendungsfall in Formularen oder interaktiven Elementen, bei denen sich der Status der Schaltfläche aufgrund von Benutzerinteraktionen oder API-Aufrufen ändert.

Winkelkomponente (button.component.html):

<button class="button" [ngClass]="{'button--loading': isLoading, 'button--primary': !isLoading}" (click)="handleClick()">
  <span *ngIf="!isLoading">{{ buttonText }}</span>
  <span *ngIf="isLoading">Loading...</span>
</button>

Komponentenstile (button.component.css):

.button {
  padding: 12px 24px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button--primary {
  background-color: #007BFF;
}

.button--loading {
  background-color: #666;
  cursor: not-allowed;
}

.button--loading span {
  font-size: 14px;
}

Komponentenlogik (button.component.ts):

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent {
  @Input() buttonText: string = 'Submit';
  isLoading: boolean = false;

  handleClick() {
    this.isLoading = true;

    setTimeout(() => {
      this.isLoading = false;
    }, 2000);
  }
}

Erklärung:

• Der Tastenblock stellt die Basistaste dar.
• Die [ngClass]-Direktive fügt dynamisch „button--loading“ hinzu, wenn sich die Schaltfläche in einem Ladezustand befindet, und „button--primary“, wenn sie sich im Standardzustand befindet.
• Der Text der Schaltfläche ändert sich basierend auf dem isLoading-Status.
• Die handleClick-Methode simuliert einen Ladezustand und setzt ihn nach 2 Sekunden zurück, was ein typisches API-Aufrufszenario darstellt.

Beispiel 3: Implementierung von BEM in Next.js

In diesem Next.js-Beispiel erstellen wir ein Navigationsmenü, das die aktive Seite dynamisch hervorhebt. Dies ist ein häufiges Szenario in Webanwendungen, bei denen die aktuelle Seite in der Navigation visuell angezeigt werden muss.

Next.js-Komponente (components/NavBar.js):

import { useRouter } from 'next/router';

export default function NavBar() {
  const router = useRouter();

  return (
    <nav className="nav">
      <ul className="nav__list">
        <li className={`nav__item ${router.pathname === '/' ? 'nav__item--active' : ''}`}>
          <a href="/" className="nav__link">Home</a>
        </li>
        <li className={`nav__item ${router.pathname === '/about' ? 'nav__item--active' : ''}`}>
          <a href="/about" className="nav__link">About</a>
        </li>
        <li className={`nav__item ${router.pathname === '/contact' ? 'nav__item--active' : ''}`}>
          <a href="/contact" className="nav__link">Contact</a>
        </li>
      </ul>
    </nav>
  );
}

Next.js-Stile (styles/NavBar.module.css):

.nav {
  background-color: #333;
  padding: 10px;
}

.nav__list {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav__item {
  margin: 0;
}

.nav__link {
  color: white;
  text-decoration: none;
}

.nav__item--active .nav__link {
  font-weight: bold;
  color: #007BFF;
}

Erklärung:

• Der useRouter-Hook von Next.js wird verwendet, um die aktuelle Route (router.pathname) abzurufen.
• Der Modifikator nav__item--active wird dynamisch angewendet, je nachdem, ob die aktuelle Seite mit dem Menüelement übereinstimmt.
• Die aktive Seite wird hervorgehoben, indem die Textfarbe geändert und die Schriftart fett formatiert wird.
• Der nav__link ist ein Element innerhalb des nav__item-Blocks.

Abschluss

Durch die Verwendung von BEM in Ihrem Projekt können Sie die Konsistenz und Skalierbarkeit Ihres CSS aufrechterhalten, selbst wenn Sie mit dynamischen Komponenten und sich ändernden Zuständen arbeiten. Durch die Nutzung von BEM für die Zustandsverwaltung, dynamische Klassenänderungen und bedingte Gestaltung können Sie Ihren Code strukturiert, modular und leicht zu warten halten.

Diese detaillierten Beispiele verdeutlichen, wie BEM in realen Anwendungen angewendet werden kann, wodurch die Verwaltung komplexer UI-Komponenten über verschiedene Frameworks hinweg vereinfacht wird.

Folgen Sie mir für weitere Updates!

Ich hoffe, dieser Artikel hat dazu beigetragen, Ihr Verständnis für die Verwendung von CSS BEM auf verschiedenen Plattformen zu vertiefen. Wenn Sie an weiteren Artikeln, praktischen Tipps und Einblicken in die Webentwicklung interessiert sind, folgen Sie mir für regelmäßige Updates. Zögern Sie nicht, mich zu kontaktieren, wenn Sie Fragen oder Feedback haben – ich würde mich gerne mit Ihnen in Verbindung setzen und von Ihnen hören!

Das obige ist der detaillierte Inhalt vonBeherrschen der CSS-BEM-Benennung mit praktischen Beispielen: Pure HTML, Angular und Next.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!