Menguasai penamaan BEM CSS dengan Contoh Praktikal: HTML Tulen, Sudut dan Next.js

Dalam artikel sebelumnya, kami meneroka asas konvensyen penamaan BEM dalam CSS dan sebab ia penting untuk mengekalkan kod yang bersih dan berskala.

Konvensyen Penamaan BEM CSS: Apakah Itu, Mengapa Ia Penting dan Cara Menggunakannya?

Ahmet Erkan Paşahan ・ 14 Sep

#css #bem #html #pengaturcaraan

Kali ini, kita akan menyelam lebih dalam dengan contoh praktikal untuk melihat cara BEM berfungsi merentas persekitaran yang berbeza: HTML Tulen, Sudut, dan Next.js.

BEM tidak terhad kepada struktur HTML asas; ia boleh digunakan dengan berkesan dalam mana-mana rangka kerja hadapan moden. Pada penghujung artikel ini, anda akan mendapat pemahaman yang lebih jelas tentang cara melaksanakan BEM dalam pelbagai persediaan pembangunan.

Contoh 1: Menggunakan BEM dalam HTML Tulen

Dalam contoh ini, kami akan mencipta kad profil pengguna yang menukar gayanya secara dinamik berdasarkan status dalam talian atau luar talian pengguna. Ini ialah kes penggunaan biasa dalam aplikasi dunia nyata di mana elemen perlu diubah berdasarkan keadaan atau keadaan.

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

Penjelasan:

• Kad pengguna ialah blok yang mewakili kad profil pengguna.
• Pengubah suai seperti kad pengguna--dalam talian dan kad pengguna--luar talian menukar rupa kad berdasarkan status pengguna.
• user-card__avatar, user-card__name dan user-card__status ialah elemen bagi blok kad pengguna yang mewakili avatar, nama dan status, masing-masing.
• Penggunaan BEM menjelaskan gaya yang digunakan pada blok dan gaya yang berubah berdasarkan status pengguna.

Contoh 2: Menggunakan BEM dalam Sudut

Dalam contoh Sudut ini, kami akan mencipta butang interaktif yang menunjukkan keadaan pemuatan apabila diklik. Ini ialah kes penggunaan yang kerap dalam bentuk atau elemen interaktif di mana keadaan butang berubah berdasarkan interaksi pengguna atau panggilan API.

Komponen Sudut (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>

Gaya Komponen (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;
}

Logik Komponen (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);
  }
}

Penjelasan:

• Blok butang mewakili butang asas.
• Arahan [ngClass] menambahkan butang secara dinamik--memuatkan apabila butang berada dalam keadaan pemuatan dan butang--utama apabila ia berada dalam keadaan lalai.
• Teks butang berubah berdasarkan keadaan isLoading.
• Kaedah handleClick mensimulasikan keadaan pemuatan dan menetapkannya semula selepas 2 saat, mewakili senario panggilan API biasa.

Contoh 3: Melaksanakan BEM dalam Next.js

Dalam contoh Next.js ini, kami akan mencipta menu navigasi yang menyerlahkan halaman aktif secara dinamik. Ini ialah senario biasa dalam aplikasi web di mana halaman semasa perlu ditunjukkan secara visual dalam navigasi.

Komponen Next.js (komponen/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>
  );
}

Gaya Next.js (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;
}

Penjelasan:

• Kait useRouter dari Next.js digunakan untuk mendapatkan laluan semasa (router.pathname).
• Item nav__--pengubah suai aktif digunakan secara dinamik berdasarkan sama ada halaman semasa sepadan dengan item menu.
• Halaman aktif diserlahkan dengan menukar warna teks dan menjadikan fon tebal.
• Pautan nav__ ialah elemen di dalam blok nav__item.

Kesimpulan

Menggunakan BEM dalam projek anda membolehkan anda mengekalkan ketekalan dan kebolehskalaan dalam CSS anda, walaupun semasa berurusan dengan komponen dinamik dan keadaan yang berubah-ubah. Dengan memanfaatkan BEM untuk pengurusan keadaan, perubahan kelas dinamik dan penggayaan bersyarat, anda boleh memastikan kod anda berstruktur, modular dan mudah diselenggara.

Contoh terperinci ini menyerlahkan cara BEM boleh digunakan dalam aplikasi dunia nyata, menjadikannya lebih mudah untuk mengurus komponen UI yang kompleks merentas rangka kerja yang berbeza.

Ikuti Saya untuk Lebih Kemas Kini!

Saya harap artikel ini membantu memperdalam pemahaman anda tentang menggunakan CSS BEM dalam platform yang berbeza. Jika anda berminat dengan lebih banyak artikel, petua praktikal dan cerapan tentang pembangunan web, pastikan anda mengikuti saya untuk mendapatkan kemas kini yang kerap. Jangan teragak-agak untuk menghubungi anda jika anda mempunyai sebarang soalan atau maklum balas—saya ingin berhubung dan mendengar daripada anda!

Atas ialah kandungan terperinci Menguasai penamaan BEM CSS dengan Contoh Praktikal: HTML Tulen, Sudut dan Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!