css tidak berulang

CSS tidak berulang: cara mengurus dan mengendalikan CSS dengan lebih baik

CSS (helaian gaya berlatarkan) ialah salah satu teknologi terpenting dalam pembangunan bahagian hadapan, digunakan untuk pengindahan halaman, reka letak dan kesan interaktif. CSS kerap digunakan semasa proses pembangunan, tetapi ramai pembangun akan menghadapi satu atau lebih masalah: konflik gaya CSS dan takrifan berulang, menjadikan kod sukar untuk diurus, diselenggara dan nyahpepijat. Bukan pertindihan CSS telah menjadi matlamat yang dikejar oleh banyak pembangun bahagian hadapan Artikel ini akan meneroka teknik dan kaedah.

1. Gunakan pemilih kelas

Dalam CSS, kedua-dua pemilih id dan pemilih kelas boleh memilih elemen untuk definisi gaya. Tetapi pemilih id hanya perlu muncul sekali dalam halaman untuk mengenal pasti elemen secara unik. Oleh itu, jika berbilang elemen perlu berkongsi gaya, pemilih kelas harus digunakan untuk mengelakkan definisi berulang.

Sebagai contoh, kami ingin menetapkan gaya berbilang butang pada halaman agar sama:

<button class="btn-primary">按钮1</button>
<button class="btn-primary">按钮2</button>
<button class="btn-primary">按钮3</button>

rrree

Menggunakan pemilih kelas boleh menentukan gaya dengan mudah tanpa perlu mengulangi definisi setiap kali .

2. Warisi gaya

Dalam CSS, elemen anak boleh mewarisi atribut gaya elemen induk. Sebagai contoh, kita boleh menetapkan warna dan fon semua teg p dengan cara berikut:

.btn-primary {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
}

Dengan cara ini, kita boleh menyelamatkan masalah menetapkan gaya dalam beberapa kes, dan juga menjadikan kod lebih ringkas.

3. Elakkan bersarang

Dalam CSS, anda boleh menggunakan peraturan bersarang untuk menggunakan gaya yang sama pada elemen berkaitan. Contohnya:

body {
  color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

p {
  /* 继承body的color和font-family */
}

Di sini, kami mentakrifkan kelas pembalut, yang mengandungi unsur h1 dan p. Peraturan bersarang memudahkan untuk menentukan gaya untuk elemen berkaitan. Walau bagaimanapun, menggunakan peraturan bersarang dengan mudah boleh membawa kepada peningkatan kerumitan pemilih dan boleh menyebabkan konflik gaya. Oleh itu, penyalahgunaan peraturan bersarang harus dielakkan.

4. Gunakan prapemproses

Pada masa ini, prapemproses CSS yang lebih popular termasuk Sass, Less, Stylus, dsb. Ia membolehkan kami menulis kod CSS modular yang lebih dioptimumkan, meningkatkan kebolehgunaan semula kod dan juga menyokong ciri lanjutan seperti campuran dan fungsi.

Sebagai contoh, dalam Sass, kita boleh mentakrifkan mixin bernama primer untuk digunakan dalam berbilang elemen:

.wrapper {
  background-color: #fafafa;
  padding: 16px;

  h1 {
    font-size: 28px;
    color: #333;
  }

  p {
    font-size: 14px;
    color: #666;
  }
}

Dengan cara ini, kita boleh lulus arahan @include Masukkan pengadun utama ke dalam . btn-kelas rendah untuk mengelak menulis gaya yang sama berulang kali.

5. Gunakan modulariti CSS

Pemodularan CSS ialah cara penulisan CSS yang lebih baharu, yang membolehkan kami menulis kod CSS yang lebih modular dan boleh digunakan semula. Ia menggunakan kaedah yang serupa dengan modul JavaScript untuk menentukan gaya komponen sebagai modul bebas, dengan itu mengelakkan pencemaran global dan konflik penamaan.

Sesetengah rangka kerja modular CSS yang popular termasuk BEM (Pengubahsuai Elemen Blok), SMACSS (Seni Bina Berskala dan Modular untuk CSS), dsb. Dengan menggunakan rangka kerja ini, kami boleh menentukan dan mengurus gaya CSS dengan lebih mudah.

Ringkasan

Tidak pertindihan CSS ialah matlamat yang sangat penting untuk kami mengoptimumkan pembangunan bahagian hadapan. Dalam pembangunan sebenar, kami boleh menggunakan pemilih kelas, gaya yang diwarisi, mengelakkan bersarang dan teknik lain untuk mengelakkan definisi CSS berulang Pada masa yang sama, menggunakan prapemproses CSS dan rangka kerja modular dalam kod boleh membantu kami mengurus dan mengendalikan CSS dengan lebih baik kebolehgunaan semula.

Atas ialah kandungan terperinci css tidak berulang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!