ID dan penamaan kelas
Selalu gunakan ID dan nama kelas yang mencerminkan tujuan dan penggunaan elemen, atau nama umum lainnya. Daripada penampilan dan nama yang tidak jelas.
Nama yang spesifik dan mencerminkan tujuan elemen sebaiknya dipilih karena nama ini paling mudah dipahami dan paling kecil kemungkinannya untuk diubah.
Nama umum hanyalah nama alternatif untuk beberapa elemen. Mereka sama di antara elemen saudaranya dan tidak memiliki arti khusus.
Bedakan agar mempunyai arti khusus dan sering dibutuhkan sebagai “penolong”.
Meskipun semantik nama kelas dan ID tidak memiliki arti praktis untuk penguraian komputer,
Nama semantik biasanya merupakan pilihan yang tepat karena mewakili informasi yang tidak memberikan batasan ekspresif.
Tidak direkomendasikan
.fw-800 {
berat font: 800;
}
.merah {
warna: merah;
}menyarankan
.berat {
berat font: 800;
}
.penting {
warna: merah;
} Penghindaran ID yang wajar
Biasanya ID tidak boleh diterapkan pada gaya.
Gaya ID tidak dapat digunakan kembali dan Anda hanya dapat menggunakan ID satu kali per halaman.
Satu-satunya penggunaan ID yang efektif adalah untuk menentukan posisi dalam halaman web atau keseluruhan situs.
Meskipun demikian, Anda harus selalu mempertimbangkan untuk menggunakan class daripada id kecuali Anda hanya menggunakannya sekali.
Tidak direkomendasikan
#konten .judul {
ukuran font: 2em;
}menyarankan
.konten .judul {
ukuran font: 2em;
} Argumen lain yang menentang penggunaan ID adalah bahwa penyeleksi yang berisi ID memiliki bobot yang tinggi.
Selektor yang hanya berisi satu ID memiliki bobot lebih tinggi daripada pemilih yang berisi 1000 nama kelas, sehingga membuatnya aneh.
// Selector ini mempunyai bobot lebih tinggi dari selector berikut #content .title {
warna: merah;
}
// dari pemilih ini!
html badan div.content.news-content .title.content-title.important {
warna: biru;
} Hindari nama tag di pemilih CSS
Saat membuat penyeleksi, Anda harus menggunakan nama kelas yang jelas, tepat, dan semantik. Jangan gunakan pemilih tag. Lebih mudah untuk mempertahankannya jika Anda hanya peduli pada nama kelas Anda, bukan elemen kode Anda.
Berpikir dari perspektif pemisahan, tag/semantik html tidak boleh dialokasikan di lapisan presentasi.
Ini bisa berupa daftar terurut yang perlu diubah menjadi daftar tidak berurutan, atau div yang perlu diubah menjadi artikel.
Jika Anda hanya menggunakan nama kelas yang bermakna,
Dan tanpa menggunakan pemilih elemen, maka Anda hanya perlu mengubah markup html Anda tanpa mengubah CSS Anda.
Tidak direkomendasikan
div.content > header.content-header > h2.title {
ukuran font: 2em;
}menyarankan
.content > .content-header > .title {
ukuran font: 2em;
} setepat mungkin
Banyak pengembang front-end tidak menggunakan sub-selektor langsung saat menulis rantai pemilih (catatan: perbedaan antara sub-selektor langsung dan pemilih turunan).
Terkadang, hal ini dapat menyebabkan masalah desain yang menyakitkan dan terkadang memakan kinerja.
Namun, bagaimanapun juga, ini adalah praktik yang sangat buruk.
Jika Anda tidak menulis pemilih yang sangat umum yang harus cocok dengan akhir DOM, Anda harus selalu mempertimbangkan subselektor langsung.
Pertimbangkan DOM berikut:
<artikel kelas="konten berita-konten"> <span class="title">Berita acara</span> <div class="isi-tubuh"> <div class="judul konten-judul"> Lihat ini </div> <p>Ini adalah konten artikel berita</p> <div class="penggoda"> <div class="title">Beli ini</div> <div class="teaser-content">Ya!</div> </div> </div> </artikel>
CSS berikut akan diterapkan ke ketiga elemen dengan kelas judul.
Kemudian, untuk menyelesaikan gaya yang berbeda di bawah kelas judul di bawah kelas konten dan kelas judul di bawah kelas penggoda, hal ini memerlukan penyeleksi yang lebih tepat untuk menulis ulang gayanya lagi.
Tidak direkomendasikan
.konten .judul {
ukuran font: 2rem;
}menyarankan
.konten > .judul {
ukuran font: 2rem;
}
.content > .content-body > .title {
ukuran font: 1,5rem;
}
.content > .content-body > .teaser > .title {
ukuran font: 1,2rem;
} atribut singkatan
CSS menyediakan berbagai properti singkatan (seperti font) yang harus digunakan bila memungkinkan, bahkan ketika hanya satu nilai yang ditetapkan.
Penggunaan atribut yang disingkat berguna untuk efisiensi dan keterbacaan kode.
Tidak direkomendasikan
kode css:
gaya perbatasan atas: tidak ada; keluarga font: palatino, georgia, serif; ukuran font: 100%; tinggi garis: 1,6; bantalan-bawah: 2em; padding-kiri: 1em; padding-kanan: 1em; bantalan atas: 0;
menyarankan
kode css:
batas atas: 0; jenis huruf: 100%/1.6 palatino, georgia, serif; bantalan: 0 1em 2em;
0 dan satuan
Hilangkan unit setelah nilai "0". Jangan gunakan satuan setelah nilai 0 kecuali ada nilainya.
Tidak direkomendasikan
kode css:
bantalan-bawah: 0px; margin: 0em;
menyarankan
kode css:
bantalan-bawah: 0; margin: 0;
Notasi heksadesimal
Jika memungkinkan, gunakan notasi heksadesimal 3 karakter.
Nilai warna memungkinkan representasi seperti ini,
Representasi heksadesimal 3 karakter lebih pendek.
Selalu gunakan angka heksadesimal huruf kecil.
Tidak direkomendasikan
warna: #FF33AA;
menyarankan
warna: #f3a;
Pemisah antara ID dan nama Kelas
Gunakan tanda hubung (dash) untuk memisahkan kata pada ID dan nama Kelas. Untuk meningkatkan pemahaman pelajaran, jangan menggunakan karakter apa pun (termasuk tidak ada) selain tanda hubung (tanda hubung) untuk menghubungkan kata dan singkatan pada pemilih.
Selain itu, sebagai standar, pemilih atribut default mengenali tanda hubung (tanda hubung) sebagai pemisah kata untuk [atribut|=nilai],
Jadi sebaiknya gunakan tanda hubung sebagai pemisah.
Tidak direkomendasikan
.gambar demo {}
.status_kesalahan {} menyarankan
#id-video {}
.contoh-iklan {}Peretasan
Hindari deteksi agen pengguna dan “peretasan” CSS – coba pendekatan lain terlebih dahulu. Perbedaan gaya mudah diselesaikan melalui deteksi agen pengguna atau filter CSS khusus, solusi, dan peretasan. Kedua metode tersebut harus dianggap sebagai upaya terakhir untuk mencapai dan memelihara basis kode yang efisien dan mudah dikelola. Dengan kata lain, deteksi dan peretasan agen pengguna dalam jangka panjang
Akan merugikan proyek, karena proyek harus selalu mengambil jalur yang hambatannya paling kecil. Meskipun demikian, deteksi dan peretasan agen pengguna dapat dengan mudah digunakan terlalu sering di masa mendatang.
Urutan deklarasi
Ini adalah garis besar kasar urutan penulisan properti CSS dalam pemilih. Hal ini penting untuk memastikan keterbacaan dan kemampuan pemindaian yang lebih baik.
Sebagai praktik terbaik, kita harus mengikuti urutan berikut (sesuai urutan tabel di bawah):
Sifat struktural:
menampilkan
posisi, kiri, atas, kanan dll.
meluap, mengapung, jernih, dll.
margin, bantalan
Sifat ekspresif:
latar belakang, perbatasan dll.
fonta, teks
Tidak direkomendasikan
.kotak {
keluarga font: 'Arial', sans-serif;
batas: 3px padat #ddd;
kiri: 30%;
posisi: mutlak;
transformasi teks: huruf besar;
warna latar belakang: #eee;
kanan: 30%;
tampilan: blok;
ukuran font: 1,5rem;
meluap: tersembunyi;
bantalan: 1em;
margin: 1em;
}menyarankan
.kotak {
tampilan: blok;
posisi: mutlak;
kiri: 30%;
kanan: 30%;
meluap: tersembunyi;
margin: 1em;
bantalan: 1em;
warna latar belakang: #eee;
batas: 3px padat #ddd;
keluarga font: 'Arial', sans-serif;
ukuran font: 1,5rem;
transformasi teks: huruf besar;
}akhir pernyataan
Untuk memastikan konsistensi dan ekstensibilitas, setiap pernyataan harus diakhiri dengan titik koma dan membungkus setiap pernyataan pada baris baru.
Tidak direkomendasikan
kode css:
.tes {
tampilan: blok; tinggi: 100px
}menyarankan
kode css:
.tes {
tampilan: blok;
tinggi: 100 piksel;
}Akhir dari nama atribut
Gunakan spasi setelah titik dua pada nama properti. Untuk alasan konsistensi,
Selalu gunakan spasi antara atribut dan nilai (tetapi jangan ada spasi antara atribut dan titik dua).
Tidak direkomendasikan
kode css:
jam3 {
berat font: tebal;
}menyarankan
kode css:
jam3 {
berat font: tebal;
}Pemisahan penyeleksi dan deklarasi
Selalu gunakan baris baru untuk setiap pemilih dan deklarasi properti.
Tidak direkomendasikan
kode css:
a:fokus, a:aktif {
posisi: relatif; atas: 1px;
}menyarankan
kode css:
jam1,
h2,
jam3 {
berat font: normal;
tinggi garis: 1.2;
}Pemisahan aturan
Aturan selalu dipisahkan oleh baris kosong (double newline).
menyarankan
kode css:
html {
latar belakang: #fff;
}
tubuh {
margin: otomatis;
lebar: 50%;
}kutipan CSS
Lampirkan pemilih atribut atau nilai atribut dalam tanda kutip ganda (“”), bukan tanda kutip tunggal (“”).
Jangan gunakan tanda kutip untuk nilai URI (url()).
Tidak direkomendasikan
kode css:
@import url('//cdn.com/foundation.css');
html {
font-family: 'open sans', arial, sans-serif;
}
isi:setelah {
konten: 'jeda';
}menyarankan
kode css:
@import url(//cdn.com/foundation.css);
html {
font-family: "open sans", arial, sans-serif;
}
isi:setelah {
konten: "jeda";
}Sarang pemilih (SCSS)
Di Sass Anda dapat membuat sarang penyeleksi, yang dapat membuat kode lebih bersih dan lebih mudah dibaca. Susun semua penyeleksi, namun cobalah untuk menghindari penyeleksi bertumpuk tanpa konten apa pun.
Jika Anda perlu menentukan beberapa atribut gaya untuk elemen anak, dan elemen induk tidak memiliki atribut gaya,
Rantai pemilih CSS biasa dapat digunakan.
Ini akan mencegah skrip Anda terlihat terlalu rumit.
Tidak direkomendasikan
kode css:
// Bukan contoh yang baik dengan tidak memanfaatkan sarang sama sekali
.isi {
tampilan: blok;
}
.content > .news-article > .title {
ukuran font: 1.2em;
}Tidak direkomendasikan
kode css:
// Menggunakan metode bersarang lebih baik tetapi tidak di semua kasus
// Hindari membuat sarang ketika tidak ada atribut dan gunakan rantai pemilih sebagai gantinya
.isi {
tampilan: blok;
> .artikel berita {
> .judul {
ukuran font: 1.2em;
}
}
}menyarankan
kode css:
// Contoh ini mengambil pendekatan terbaik saat membuat sarang tetapi gunakan rantai pemilih jika memungkinkan
.isi {
tampilan: blok;
> .artikel berita > .judul {
ukuran font: 1.2em;
}
}Memperkenalkan baris kosong dalam sarang (SCSS)
Tinggalkan baris kosong antara pemilih bersarang dan properti CSS.
Tidak direkomendasikan
kode css:
.isi {
tampilan: blok;
> .artikel berita {
warna latar belakang: #eee;
> .judul {
ukuran font: 1.2em;
}
> .artikel-catatan kaki {
ukuran font: 0,8em;
}
}
}menyarankan
kode css:
.isi {
tampilan: blok;
> .artikel berita {
warna latar belakang: #eee;
> .judul {
ukuran font: 1.2em;
}
> .artikel-catatan kaki {
ukuran font: 0,8em;
}
}
}Kueri Media Kontekstual (SCSS)
Di Sass, Anda juga dapat menggunakan kueri media kontekstual saat Anda menyarangkan penyeleksi.
Di Sass, Anda dapat menggunakan kueri media pada tingkat pengumpulan apa pun.
CSS yang dihasilkan akan diubah sehingga kueri media akan dirender sebagai pemilih yang digabungkan.
Teknologi ini sangat nyaman,
Membantu menjaga konteks kueri media berada.
Pendekatan pertama memungkinkan Anda menulis gaya seluler terlebih dahulu dan kemudian menggunakan kueri media kontekstual untuk menyediakan gaya desktop di mana pun Anda membutuhkannya.
Tidak direkomendasikan
kode css:
// Contoh seluler pertama ini terlihat seperti CSS biasa yang seluruh struktur SCSS diulangi
// di bagian bawah kueri media. Ini rawan kesalahan dan mempersulit pemeliharaan karena tidak mudah untuk dihubungkan
// konten dalam media query ke konten di bagian atas (gaya seluler)
.halaman konten {
ukuran font: 1,2rem;
> .utama {
warna latar: asap putih;
> .berita terbaru {
bantalan: 1rem;
> .artikel berita {
bantalan: 1rem;
> .judul {
ukuran font: 2rem;
}
}
}
> .konten {
margin-atas: 2rem;
bantalan: 1rem;
}
}
> .halaman-footer {
margin-atas: 2rem;
ukuran font: 1rem;
}
}
@layar media dan (lebar minimum: 641 piksel) {
.halaman konten {
ukuran font: 1rem;
> .main > .berita-terbaru > .artikel-berita > .title {
ukuran font: 3rem;
}
> .halaman-footer {
ukuran font: 0,8rem;
}
}
}menyarankan
kode css:
// Ini adalah contoh yang sama seperti di atas tetapi di sini kita menggunakan kueri media kontekstual untuk menempatkan gaya yang berbeda
// untuk media yang berbeda ke dalam konteks yang tepat.
.halaman konten {
ukuran font: 1,2rem;
@layar media dan (lebar minimum: 641 piksel) {
ukuran font: 1rem;
}
> .utama {
warna latar: asap putih;
> .berita terbaru {
bantalan: 1rem;
> .artikel berita {
bantalan: 1rem;
> .judul {
ukuran font: 2rem;
@layar media dan (lebar minimum: 641 piksel) {
ukuran font: 3rem;
}
}
}
}
> .konten {
margin-atas: 2rem;
bantalan: 1rem;
}
}
> .halaman-footer {
margin-atas: 2rem;
ukuran font: 1rem;
@layar media dan (lebar minimum: 641 piksel) {
ukuran font: 0,8rem;
}
}
}Pemilih pesanan dan induk bersarang (SCSS)
Saat menggunakan fungsi bersarang Sass,
Yang penting adalah memiliki urutan bersarang yang jelas,
Berikut ini adalah urutan yang harus dimiliki oleh blok SCSS.
Atribut gaya pemilih saat ini <br/>Pemilih kelas semu dari pemilih induk (:huruf pertama, :hover, :aktif, dll)
Elemen kelas semu (:sebelum dan :setelah)
Gaya deklarasi pemilih induk (.selected, .active, .enlarged, dll.)
Gunakan sub-pemilih kueri media kontekstual Sass sebagai bagian terakhir
Contoh berikut akan mengilustrasikan bagaimana pengurutan ini akan mencapai struktur yang jelas sambil memanfaatkan pemilih induk Sass.
Direkomendasikan
kode css:
.penggoda produk {
// 1. Atribut gaya
tampilan: blok sebaris;
bantalan: 1rem;
warna latar: asap putih;
warna: abu-abu;
// 2. Pemilih semu dengan pemilih induk
&: arahkan kursor {
warna: hitam;
}
// 3. Elemen semu dengan pemilih induk
&:sebelum {
isi: "";
tampilan: blok;
batas atas: 1 piksel abu-abu solid;
}
&:setelah {
isi: "";
tampilan: blok;
batas atas: 1 piksel abu-abu solid;
}
// 4. Nyatakan kelas dengan pemilih induk
&.aktif {
warna latar: merah muda;
warna: merah;
// 4.2. Pemilih semu di pemilih kelas negara bagian
&: arahkan kursor {
warna: merah gelap;
}
}
// 5. Pertanyaan media kontekstual
@layar media dan (lebar maksimal: 640 piksel) {
tampilan: blok;
ukuran font: 2em;
}
// 6. Sub pemilih
> .konten > .judul {
ukuran font: 1.2em;
// 6.5. Kueri media kontekstual di sub pemilih
@layar media dan (lebar maksimal: 640 piksel) {
spasi huruf: 0,2em;
transformasi teks: huruf besar;
}
}
}