CSS adalah bentuk utama tata letak halaman web saat ini, dan juga merupakan konten inti yang diperkenalkan kepada Anda oleh 52CSS.com Karena CSS banyak digunakan di hampir semua situs web, mari luangkan waktu untuk membuat style sheet dan memastikannya memenuhi standar yang baik. Tips berikut akan sangat membantu pemula CSS selama proses pengembangan. Anda dapat mempelajari sepuluh keterampilan yang harus diketahui oleh pemula DivCSS dan pemahaman mereka tentang standar Web.
1. Indeks Definisi di sini akan membantu Anda dan pengembang lain memahami situs web dan file CSS. Definisi tersebut juga akan membantu Anda memahami apa yang ada di dalam file CSS. Bagian indeks berisi paragraf komentar CSS yang diformat.
1. Berikan informasi penulis file CSS 2. Tentukan desain website (jumlah kolom, statis/dinamis) [kolom, statis/cair]
3. Melacak versi file secara terus menerus (sangat berguna ketika file memiliki banyak penulis atau perlu ditingkatkan di masa mendatang)
2. Titik jangkar Jangkar seperti penanda dalam file CSS yang sama. Jangkar memungkinkan Anda melihat seluruh file CSS dengan jelas dan menjaganya tetap teratur.
Jangkar perlu didefinisikan pada indeks CSS (disebutkan di atas), dan karena CSS tidak memiliki sistem jangkar sendiri, saya menggunakan trik sederhana untuk menentukan jangkar dalam dokumen.
Caranya adalah dengan menggunakan karakter yang relatif jarang untuk menentukan komentar. Saat Anda ingin mencari titik jangkar, Anda dapat menyalin dan mencari penentu titik jangkar dari indeks dan menemukan titik jangkar.
3. Redefinisi Definisi ulang adalah metode yang digunakan untuk mengganti gaya tag default HTML dan mendefinisikannya kembali. Pernahkah Anda melihat kode CSS seperti ini, ia hanya ingin memberi gaya pada elemen tertentu!
Penggunaan yang sangat indah dalam CSS adalah penyeleksi kontekstual, mari kita gunakan:
4. Aturan penamaan Faktor kuncinya adalah memberikan nama yang tepat dan bersih pada elemen. Ini akan menghindari kebingungan dan membuatnya lebih mudah dan cepat untuk membaca CSS Anda.
5. Singkatan Fitur singkatan pada CSS adalah properti yang memungkinkan Anda menggabungkan banyak properti bertipe sama menjadi satu.
Singkatan CSS membuat proses pengembangan lebih mudah dan menjaga file CSS Anda tetap bersih, singkat, dan mudah dibaca.
6. Sprite Menerjemahkannya ke dalam elf sepertinya tidak memperdalam pemahaman persepsi artikel tersebut. Sebaliknya, ketika saya membacanya dalam bahasa Inggris, saya tidak memahaminya, jadi saya tidak menerjemahkannya. Menggabungkan semua gambar latar belakang menjadi satu dan menggunakan pemosisian latar belakang untuk menampilkan bagian-bagian yang berbeda inilah yang kami sebut CSS Sprite.
Sprite CSS dapat mengurangi jumlah permintaan HTTP, menghemat bandwidth, dan membuat pembacaan lebih cepat. Pada saat yang sama, ini juga dapat menghindari ketidakstabilan gambar (misalnya, ketika mouse melewati satu gambar, efek gambar lain dapat ditampilkan, dan gambar terakhir akan menunggu setengah hari pada koneksi Internet yang lambat untuk muncul) .
Contoh Sprite CSS terbaik dan terpopuler adalah sistem menu di situs web Apple:
7. Klarifikasi Eksplisitasi pemilih adalah proses memprioritaskan mana yang akan digunakan ketika beberapa aturan dapat digunakan untuk elemen yang sama.
Sederhananya, setiap pemilih CSS memiliki bobot. Jumlah seluruh bobot pemilih menentukan propertinya dalam dokumen. Kejelasan bisa sangat membantu ketika dokumen CSS sangat besar sehingga Anda tidak tahu elemen mana yang memiliki bobot lebih besar.
Kejelasan adalah area yang sangat luas dalam CSS sehingga sulit untuk dijelaskan hanya dalam beberapa kalimat. Mari kita lihat sebuah contoh:
8. Penyetelan ulang atribut Penyetelan ulang properti global memastikan bahwa situs web muncul hampir sama di semua browser. Dalam setiap kasus, browser yang berbeda menggunakan serangkaian pengaturan gaya default mereka sendiri untuk semua situs web, yang akan menyebabkan situs web kami tampil berbeda di browser yang berbeda. Penyetelan ulang properti global akan memperbaiki situasi ini dan memungkinkan Anda membangun situs dari basis yang benar-benar konsisten.
Saya tidak selalu menyarankan penggunaan framework CSS, tetapi Anda tetap perlu menggunakan reset CSS. Ada banyak metode reset yang berbeda di luar sana, mulai dari yang sederhana hingga yang rumit.
9. Peretasan CSS Walaupun merupakan CSS yang sempurna, namun tidak dapat menghasilkan tampilan yang sama persis di semua browser. Setiap browser memiliki cara berbeda dalam mengartikan CSS. Secara keseluruhan, jika Anda ingin situs web Anda konsisten di semua browser, Anda harus menggunakan CSS Hacks.
Menggunakan CSS Hacks akan mengurangi kesalahan saat memvalidasi CSS, saya setuju. Cara alternatif untuk mencapai hal ini adalah dengan menggunakan satu file CSS yang berbeda untuk setiap browser dan memberi tahu browser CSS spesifik mana yang harus digunakan dengan menyertakan tag khusus browser di HTML. Saya selalu membuat "fuck-ie.css" di semua proyek saya :) (Catatan Penerjemah: Penulis di sini menggunakan kata-kata makian untuk mengungkapkan kemarahannya terhadap IE. Jika diterjemahkan sebagai "kawin dengan IE.css", dunia akan melakukannya. bukankah itu akan lebih harmonis?)
Setelah menggunakan metode ini, "file CSS utama" Anda akan diverifikasi. Pada saat yang sama, file "fuck-ie.css" juga akan diverifikasi, tetapi hanya akan menimpa "file CSS utama" di browser IE.
10. Verifikasi Penting untuk selalu memvalidasi CSS saat Anda membuatnya. Hal ini akan memastikan bahwa CSS Anda bebas dari kesalahan dan dapat diinterpretasikan dengan benar oleh semua browser.
W3C Validator adalah alat validasi CSS online yang sangat populer.
