Setiap orang dapat menulis kode CSS, meskipun kode tersebut berfungsi untuk proyek Anda sekarang. Tapi bisakah CSS menjadi lebih baik? Meskipun webjx.com memperkenalkan berbagai teknik di bidang ini, mulailah menggunakan lima aspek ini untuk meningkatkan CSS Anda, yang akan membuat Anda terlihat lebih profesional dan membuat kode Anda lebih baik!
1. Setel ulang
Pertama-tama, izinkan saya memberi tahu Anda dengan serius bahwa Anda harus selalu mengatur ulang kategori tertentu. Baik Anda menggunakan Eric Meyer Reset, YUI Reset, atau menulis kode reset Anda sendiri, gunakan saja.
Itu dapat dengan mudah menghapus padding dan margin dari semua elemen:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pra, formulir, kumpulan bidang, tabel, th, td { margin: 0;
Eric Meyer Reset dan YUI Reset keduanya sangat kuat, tetapi bagi saya, keduanya berlebihan. Saya pikir pada akhirnya Anda harus mengatur ulang semuanya dan kemudian mendefinisikan ulang properti semua elemen. Itu sebabnya Eric Meyer merekomendasikan penggunaan yang lebih efisien (reset stylesheet) dan Anda tidak hanya menggunakan reset stylesheet miliknya, drag dan drop ke proyek Anda. Sesuaikan (reset stylesheet) dan buat reset stylesheet Anda sendiri.
Oh, tolong berhenti menggunakan:
* {margin: 0; bantalan: 0;
Luangkan lebih banyak waktu untuk membuatnya, menurut Anda apa yang akan terjadi pada tombol radio saat Anda melepas bantalannya? Elemen bentuk terkadang dapat melakukan hal-hal yang funky, jadi cara paling efektif adalah menjadikannya independen.
2. Menyortir
Sebuah tes kecil: Contoh ini akan membuat Anda berpikir tentang bagaimana menemukan atribut margin yang tepat dengan lebih cepat?
Contoh#1
div#tajuk h1 {
indeks-z: 101;
warna: #000;
posisi: relatif;
tinggi garis: 24px;
margin-kanan: 48 piksel;
batas bawah: 1px solid #dedede;
ukuran font: 18px;
}
Contoh#2
div#header h1 { batas bawah: 1 piksel solid #dedede; warna: #000; ukuran font: 18 piksel; tinggi garis: 24 piksel; posisi margin: relatif;
Anda tidak dapat memberi tahu saya bahwa Contoh#2 tidak dapat menemukan properti margin yang tepat dengan lebih cepat. Urutkan properti elemen Anda berdasarkan abjad. Membuat CSS Anda secara konsisten akan membantu Anda menghemat waktu mencari properti tertentu.
Saya tahu beberapa orang mengatur kode mereka dengan satu cara dan yang lain dengan cara lain, tetapi di perusahaan saya, kami membuat keputusan konsensus bahwa semua kode akan disusun berdasarkan abjad. Pastinya membantu untuk bekerja dengan orang lain dengan mengatur kode Anda dengan cara ini. Saya merasa ngeri setiap kali saya menemukan style sheet berjenjang yang propertinya tidak diurutkan berdasarkan abjad.
3. Organisasi
Anda harus mengatur style sheet Anda sehingga konten terkait saling berdekatan, sehingga lebih mudah untuk menemukan apa yang Anda cari. Gunakan anotasi yang lebih efisien. Sebagai contoh, inilah cara saya menyusun cascading style sheet saya:
/*****Reset*****/Menghapus padding dan margin elemen.
/*****Elemen Dasar*****/Tentukan gaya elemen dasar: body, h1-h6, ul, ol, a, p, dll.
/*****Kelas Generik*****/ Mendefinisikan gaya sederhana, seperti float satu sisi, menghapus margin bawah suatu elemen, dll. Tentu saja, sebagian besar tidak terkait dengan semantik yang kita inginkan, tetapi mereka adalah Penting untuk memproses kode secara efisien.
/*****Tata Letak Dasar*****/Tentukan templat dasar: header, footer, dll. Membantu menentukan elemen dasar tata letak halaman web
/*****Header*****/Tentukan semua elemen Hearder
/*****Konten*****/Tentukan semua elemen di kotak konten
/*****Footer*****/Tentukan semua elemen Footer
/*****Dll*****/Tentukan penyeleksi lainnya. Dengan memberi anotasi dan mengelompokkan elemen serupa ke dalam grup, Anda akan menemukan apa yang Anda inginkan dengan lebih cepat.
4. Konsistensi
Tidak peduli bagaimana Anda memutuskan untuk menulis kode, tetaplah konsisten. Saya bosan dengan perdebatan CSS 1 baris vs. multi baris. Tidak perlu berdebat. Setiap orang mempunyai pendapatnya, jadi pilihlah cara kerja yang Anda sukai dan konsistenlah di semua stylesheet Anda.
Secara pribadi, saya akan menggunakan kombinasi keduanya. Jika seorang pemilih memiliki lebih dari 3 atribut, saya akan memotongnya dan menulisnya dalam beberapa baris.
div#header { mengapung: kiri; lebar: 100%;
div#header div.kolom {
perbatasan-kanan: 1px solid #ccc;
mengapung: benarkanan;
margin-kanan: 50 piksel;
bantalan: 10 piksel;
lebar: 300 piksel;
}
div#header h1 { float: kiri; posisi: relatif; lebar: 250px }
Jadi temukan cara yang Anda suka untuk bekerja dan kemudian tetap konsisten.
5. Mulailah dari tempat yang tepat
Jangan mencoba mendekati stylesheet Anda sampai bahasa markup selesai.
Ketika saya bersiap untuk membagi halaman web, sebelum membuat file CSS, saya perlu melihat pratinjau dan menandai semua dokumen antara tag pembuka badan dan tag penutup badan. Saya tidak akan menambahkan DIV, ID, atau pemilih kelas tambahan. Saya akan menambahkan beberapa DIV umum, seperti pendengar, konten, footer, karena saya tahu hal-hal ini ada.
Dengan memberi tag pada dokumen terlebih dahulu, Anda tidak akan mengalami masalah divities1 dan class2! /*Anda hanya perlu menambahkan hal-hal tersebut setelah Anda mulai menulis CSS dan menyadari bahwa Anda memerlukan pengait lain untuk melakukannya. mencapai apa yang ingin Anda capai.*/(Teks asli tidak diterjemahkan).
Gunakan pemilih turunan CSS untuk menentukan elemen turunan; jangan hanya menambahkan pemilih kelas atau ID ke suatu elemen secara otomatis. Ingat: CSS tidak ada gunanya tanpa dokumen (atau struktur markup) yang diformat dengan baik.
Meringkaskan
Ini dapat membantu saya menulis kode CSS dengan lebih baik. Tapi ini tidak berarti akhir dari daftar ini. Selanjutnya, saya akan membawa beberapa orang lain untuk berbagi dengan Anda. Anda dipersilakan untuk memperhatikan webjx.com.