cari
Rumahhujung hadapan webtutorial cssMenguasai 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.

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 class="user-card__avatar lazy" src="/static/imghwm/default1.png" data-src="profile.jpg" alt="User Avatar">
  <div class="user-card__info">
    <h2 id="John-Doe">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" isloading>
  <span>{{ buttonText }}</span>
  <span>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" :>
          <a href="/" classname="nav__link">Home</a>
        </li>
        <li classname="{`nav__item" :>
          <a href="/about" classname="nav__link">About</a>
        </li>
        <li classname="{`nav__item" :>
          <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!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
@KeyFrames CSS: Trik yang paling banyak digunakan@KeyFrames CSS: Trik yang paling banyak digunakanMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityAndPowerIncreatingSmoothcsSanimations.KeyTrickSinclude: 1) definisiMoothTransitionSbetweenStates, 2) AnimatingMultiplePropertiSti

Kaunter CSS: Panduan Komprehensif untuk Penomboran AutomatikKaunter CSS: Panduan Komprehensif untuk Penomboran AutomatikMay 07, 2025 pm 03:45 PM

Csscountersareusedtomanageautomaticnumberinginwebdesigns.1) mereka yang boleh dimanfaatkan, listitems, andcustomnumbering.2) AdvancedusesIndenestedNumberingsystems.3) cabaran yang terkandung di dalam cabaran

Bayang-bayang tatal moden menggunakan animasi yang didorong oleh tatalBayang-bayang tatal moden menggunakan animasi yang didorong oleh tatalMay 07, 2025 am 10:34 AM

Menggunakan bayang -bayang skrol, terutamanya untuk peranti mudah alih, adalah sedikit UX yang telah diliputi oleh Chris sebelum ini. Geoff merangkumi pendekatan yang lebih baru yang menggunakan harta animasi-masa. Berikut adalah satu lagi cara.

Mengkaji semula peta imejMengkaji semula peta imejMay 07, 2025 am 09:40 AM

Mari kita lari melalui penyegaran cepat. Peta imej tarikh kembali ke HTML 3.2, di mana, pertama, peta sisi pelayan dan kemudian peta sisi klien yang ditakrifkan di atas imej menggunakan elemen peta dan kawasan.

Negeri Devs: Tinjauan untuk Setiap PemajuNegeri Devs: Tinjauan untuk Setiap PemajuMay 07, 2025 am 09:30 AM

Kajian Negeri Devs kini dibuka untuk penyertaan, dan tidak seperti tinjauan sebelumnya ia meliputi segala -galanya kecuali kod: kerjaya, tempat kerja, tetapi juga kesihatan, hobi, dan banyak lagi. 

Apakah grid CSS?Apakah grid CSS?Apr 30, 2025 pm 03:21 PM

CSS Grid adalah alat yang berkuasa untuk mewujudkan susun atur web yang rumit dan responsif. Ia memudahkan reka bentuk, meningkatkan kebolehcapaian, dan menawarkan lebih banyak kawalan daripada kaedah yang lebih lama.

Apakah CSS Flexbox?Apakah CSS Flexbox?Apr 30, 2025 pm 03:20 PM

Artikel membincangkan CSS Flexbox, kaedah susun atur untuk penjajaran yang cekap dan pengedaran ruang dalam reka bentuk responsif. Ia menerangkan penggunaan Flexbox, membandingkannya dengan grid CSS, dan butiran sokongan penyemak imbas.

Bagaimanakah kita boleh membuat laman web kami responsif menggunakan CSS?Bagaimanakah kita boleh membuat laman web kami responsif menggunakan CSS?Apr 30, 2025 pm 03:19 PM

Artikel ini membincangkan teknik untuk membuat laman web responsif menggunakan CSS, termasuk tag Meta Viewport, grid fleksibel, media cecair, pertanyaan media, dan unit relatif. Ia juga meliputi menggunakan grid CSS dan Flexbox bersama -sama dan mengesyorkan rangka kerja CSS

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.