30 Praktik Terbaik CSS untuk Pemula

() translation by (you can also view the original English article)

CSS adalah bahasa yang digunakan oleh hampir setiap pengembang di beberapa titik. Meskipun itu adalah bahasa yang kadang-kadang kita anggap biasa, itu sangat kuat dan memiliki banyak nuansa yang dapat membantu (atau melukai) desain kita. Berikut adalah tiga puluh praktik CSS terbaik yang akan membuat Anda menulis CSS yang solid dan menghindari beberapa kesalahan mahal.

1. Buat Dapat Dibaca

Pembacaan CSS Anda sangat penting, meskipun kebanyakan orang mengabaikan mengapa itu penting. Daya baca CSS Anda yang besar membuatnya lebih mudah dipertahankan di masa depan, karena Anda akan dapat menemukan elemen lebih cepat. Juga, Anda tidak akan pernah tahu siapa yang mungkin perlu melihat kode Anda nanti.

<editors-note> Saat menulis CSS, sebagian besar pengembang termasuk dalam satu dari dua grup.

Grup 1: Semua dalam satu baris

1
2	.someDiv { background: red; padding: 2em; border: 1px solid black; }

Grup 2: Setiap gaya mendapatkan barisnya sendiri


.someDiv {
  background: red;
  padding: 2em;
  border: 1px solid black;
}

Kedua praktik itu dapat diterima sepenuhnya, meskipun biasanya Anda akan menemukan bahwa kelompok dua menghina kelompok satu! Ingat saja - pilih metode yang paling sesuai dengan ANDA. Itu yang terpenting. </editors-note>

2. Tetap Konsisten

Sepanjang baris menjaga kode Anda dapat dibaca adalah memastikan bahwa CSS konsisten. Anda harus mulai mengembangkan "sub-bahasa" Anda sendiri dari CSS yang memungkinkan Anda untuk menyebutkan sesuatu dengan cepat. Ada kelas-kelas tertentu yang saya buat di hampir setiap tema, dan saya menggunakan nama yang sama setiap waktu. Sebagai contoh, saya menggunakan ".caption-right" untuk melayang gambar yang berisi keterangan ke kanan.

Pikirkan tentang hal-hal seperti apakah Anda akan menggunakan garis bawah atau tanda pisah dalam ID dan nama kelas Anda, dan dalam kasus apa Anda akan menggunakannya. Ketika Anda mulai membuat standar Anda sendiri untuk CSS, Anda akan menjadi jauh lebih mahir.

3. Mulailah dengan Kerangka

Beberapa ahli desain mengolok-olok pemikiran menggunakan kerangka CSS dengan setiap desain, tetapi saya percaya bahwa jika orang lain telah meluangkan waktu untuk mempertahankan alat yang mempercepat produksi, mengapa menemukan kembali roda? Saya tahu kerangka kerja tidak boleh digunakan dalam setiap contoh, tetapi sebagian besar waktu mereka dapat membantu.

Banyak desainer memiliki kerangka mereka sendiri yang telah mereka ciptakan dari waktu ke waktu, dan itu ide yang bagus juga. Ini membantu menjaga konsistensi dalam proyek.

<catatan-editor> Saya tidak setuju. Kerangka kerja CSS adalah alat yang fantastis ... bagi mereka yang tahu cara menggunakannya.

Kerangka kerja CSS adalah alat yang fantastis ... bagi mereka yang tahu cara menggunakannya.

Jika Anda baru mulai menggunakan CSS, saya pribadi menyarankan agar Anda menjauh dari kerangka kerja ini setidaknya selama setahun. Jika tidak, Anda hanya akan membingungkan diri sendiri. Pelajari CSS ... lalu ambil pintasan! </editors-note>

4. Gunakan Reset

Sebagian besar kerangka kerja CSS memiliki reset bawaan, tetapi jika Anda tidak akan menggunakannya, setidaknya pertimbangkan untuk menggunakan reset. Menyetel ulang pada dasarnya menghilangkan inkonsistensi browser seperti tinggi, ukuran font, margin, judul, dll. Pengaturan ulang memungkinkan tata letak Anda terlihat konsisten di semua browser.

MeyerWeb adalah reset populer, bersama dengan reset pengembang Yahoo. Atau Anda selalu dapat menggulung reset Anda sendiri, jika itu menggelitik kecintaan Anda.

5. Atur Stylesheet dengan Struktur Top-down

Selalu masuk akal untuk meletakkan stylesheet Anda dengan cara yang memungkinkan Anda dengan cepat menemukan bagian dari kode Anda. Saya merekomendasikan format top-down yang menangani gaya yang muncul dalam kode sumber. Jadi, contoh stylesheet dapat dipesan seperti ini:

Kelas umum (badan, a, p, h1, dll.)
#header
#nav-menu
#main-content

<catatan-editor> Jangan lupa untuk berkomentar setiap bagian! </editors-note>

1
2	/**** main content *******/
3
4	styles goes here...
5
6	/**** footer *******/
7
8	styles go here...

6. Gabungkan Elemen

Elemen dalam stylesheet terkadang berbagi properti. Alih-alih menulis ulang kode sebelumnya, mengapa tidak menggabungkannya saja? Misalnya, elemen h1, h2, dan h3 Anda mungkin semua berbagi font dan warna yang sama:

1
2	h1, h2, h3 {font-family: tahoma, color: #333}

Kita bisa menambahkan karakteristik unik untuk masing-masing gaya header ini jika kita inginkan (mis. H1 {size: 2.1em}) nanti di stylesheet.

7. Buat HTML Anda Pertama

Banyak desainer membuat CSS mereka pada saat yang sama ketika mereka membuat HTML. Tampaknya logis untuk menciptakan keduanya pada saat yang sama, tetapi sebenarnya Anda akan menghemat lebih banyak waktu jika Anda membuat seluruh mockup HTML terlebih dahulu. Alasan di balik metode ini adalah Anda tahu semua elemen tata letak situs Anda, tetapi Anda tidak tahu apa CSS yang Anda perlukan dengan desain Anda. Membuat tata letak HTML terlebih dahulu memungkinkan Anda untuk memvisualisasikan seluruh halaman secara keseluruhan, dan memungkinkan Anda untuk memikirkan CSS Anda secara lebih menyeluruh, dari atas ke bawah.

8. Gunakan Banyak Kelas

Terkadang bermanfaat untuk menambahkan beberapa kelas ke elemen. Katakanlah Anda memiliki <div> "kotak" yang ingin Anda gambarkan dengan benar, dan Anda sudah mendapat kelas. Tepat di CSS Anda yang memadukan semuanya ke kanan. Anda cukup menambahkan kelas tambahan dalam deklarasi, seperti:

1
2	<div class="box right"></div>

Anda dapat menambahkan banyak kelas yang Anda inginkan (ruang terpisah) ke deklarasi apa pun.

<catatan-editor> Sangat berhati-hati ketika menggunakan id dan nama kelas seperti "kiri" dan "kanan." Saya akan menggunakannya, tetapi hanya untuk hal-hal seperti posting blog. Bagaimana bisa? Mari kita bayangkan, di ujung jalan, Anda memutuskan bahwa Anda lebih suka melihat kotak melayang ke KIRI. Dalam hal ini, Anda harus kembali ke HTML dan mengubah nama kelas - semua untuk menyesuaikan presentasi halaman. Ini tidak lucu. Ingat - HTML adalah untuk markup dan konten. CSS adalah untuk presentasi.

Jika Anda harus kembali ke HTML Anda untuk mengubah presentasi (atau styling) dari halaman, Anda melakukannya dengan salah!

</editors-note>

9. Gunakan Doctype Kanan

Deklarasi doctype sangat penting apakah atau tidak markup dan CSS Anda akan memvalidasi. Bahkan, seluruh tampilan dan nuansa situs Anda dapat sangat berubah tergantung pada DOCTYPE yang Anda nyatakan.

Pelajari lebih lanjut tentang DOCTYPE yang akan digunakan di A List Apart.

<editors-note>

Saya menggunakan doctype HTML5 untuk semua proyek saya.

1
2	<!DOCTYPE html>

"Apa yang baik tentang DOCTYPE baru ini, terutama, adalah bahwa semua browser saat ini (IE, FF, Opera, Safari) akan melihatnya dan mengalihkan konten ke mode standar - meskipun mereka tidak menerapkan HTML5. Ini berarti Anda bisa mulai menulis halaman web Anda menggunakan HTML5 hari ini dan membuatnya bertahan untuk waktu yang sangat, sangat lama. "

- John Resig

</editors-note>

10. Gunakan Tulisan Cepat

Anda dapat mengecilkan kode Anda secara signifikan dengan menggunakan tulisan cepat saat menyusun CSS Anda. Untuk elemen seperti padding, margin, font dan beberapa lainnya, Anda dapat menggabungkan gaya dalam satu baris. Misalnya, div mungkin memiliki gaya berikut:


	#crayon {
		margin-left:	5px;
		margin-right:	7px;
		margin-top:	8px;
	}

Anda bisa menggabungkan gaya tersebut dalam satu baris, seperti:

1
2	#crayon {
3	margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively.
4	}

Jika Anda memerlukan bantuan lebih lanjut, berikut panduan lengkap tentang properti singkatan CSS.

11. Komentar CSS Anda

Sama seperti bahasa lain, itu ide bagus untuk berkomentar kode Anda dalam beberapa bagian. Untuk menambahkan komentar, cukup tambahkan / * di belakang komentar, dan * / untuk menutupnya, seperti:

1
2	/* Here's how you comment CSS */

12. Memahami Perbedaan Antara Blok vs. Elemen Inline

Elemen blok adalah elemen yang secara alami menghapus setiap baris setelah mereka menyatakan, mencakup seluruh lebar ruang yang tersedia. Elemen inline hanya membutuhkan ruang sebanyak yang mereka butuhkan, dan jangan memaksakan baris baru setelah digunakan.

Berikut adalah daftar elemen yang baik sebaris atau blokir:

1	span, a, strong, em, img, br, input, abbr, acronym

Dan elemen blok:

1	div, h1...h6, p, ul, li, table, blockquote, pre, form

13. Alfabetkan Properti Anda

Meskipun ini lebih merupakan tip yang sembrono, ini bisa berguna untuk pemindaian cepat.


	#cotton-candy {
		color: #fff;
		float: left;
		font-weight:
		height: 200px;
		margin: 0;
		padding: 0;
		width: 150px;
	}

<catatan-editor> Ehh ... mengorbankan kecepatan untuk keterbacaan yang sedikit lebih baik? Saya akan lulus - tetapi putuskan sendiri! </editors-note>

14. Gunakan Kompresor CSS

Kompresor CSS membantu mengecilkan ukuran file CSS dengan menghapus jeda baris, spasi putih, dan menggabungkan elemen. Kombinasi ini dapat sangat mengurangi ukuran file, yang mempercepat pemuatan browser. CSS Optimizer dan CSS Compressor adalah dua alat online terbaik yang dapat mengecilkan CSS.

Perlu dicatat bahwa menyusutkan CSS Anda dapat memberikan keuntungan dalam kinerja, tetapi Anda kehilangan sebagian dari keterbacaan CSS Anda.

15. Memanfaatkan Kelas Generik

Anda akan menemukan bahwa ada gaya tertentu yang Anda terapkan berulang-ulang. Daripada menambahkan gaya khusus ke setiap ID, Anda dapat membuat kelas generik dan menambahkannya ke ID atau kelas CSS lainnya (menggunakan tip # 8).

Sebagai contoh, saya menemukan diri saya menggunakan float: kanan dan float: meninggalkan over di desain saya. Jadi saya hanya menambahkan kelas .left dan .right ke stylesheet saya, dan referensi dalam elemen.


	.left {float:left}
	.right {float:right}
	
	<div id="coolbox" class="left">...</div>

Dengan cara ini Anda tidak perlu terus-menerus menambahkan "float: left" ke semua elemen yang perlu diapungkan.

<editors-note> Silakan lihat catatan editor untuk # 8. </editors-note>

16. Gunakan "Margin: 0 auto" ke Center Layout

Banyak pemula untuk CSS tidak dapat mencari tahu mengapa Anda tidak bisa hanya menggunakan float: center untuk mencapai efek yang terpusat pada elemen-elemen tingkat blok. Kalau saja semudah itu! Sayangnya, Anda harus menggunakannya

1
2	margin: 0 auto; // top, bottom - and left, right values, respectively.

untuk memusatkan div, paragraf, atau elemen lain dalam tata letak Anda.

<catatan-editor> Dengan menyatakan bahwa margin kiri dan kanan suatu elemen harus identik, tidak ada pilihan selain memusatkan elemen di dalam elemen yang mengandung. </editor-note>

17. Jangan Hanya Membungkus DIV Di Sekitar Ini

Ketika memulai, ada godaan untuk membungkus div dengan ID atau kelas di sekitar elemen dan menciptakan gaya untuk itu.

1
2	<div class="header-text"><h1>Header Text</h1></div>

Kadang-kadang mungkin tampak lebih mudah untuk hanya membuat gaya elemen unik seperti contoh di atas, tetapi Anda akan mulai mengacaukan stylesheet Anda. Ini akan bekerja dengan baik:

1
2	<h1>Header Text</h1>

Maka Anda dapat dengan mudah menambahkan gaya ke h1 bukannya div orangtua.

18. Gunakan Firebug

Jika Anda belum mengunduh Firebug, hentikan dan lakukan. Serius Alat kecil ini harus dimiliki oleh pengembang web apa pun. Di antara banyak fitur yang disertakan dengan ekstensi Firefox (debug JavaScript, periksa HTML, temukan kesalahan), Anda juga dapat secara visual memeriksa, memodifikasi, dan mengedit CSS secara real-time. Anda dapat mempelajari lebih lanjut tentang apa yang dilakukan Firebug di situs web Firebug resmi.

19. Sukar Diretas

Hindari penggunaan sebagai peretasan khusus peramban jika mungkin. Ada tekanan luar biasa untuk memastikan bahwa desain terlihat konsisten di semua browser, tetapi menggunakan peretasan hanya membuat desain Anda lebih sulit dipertahankan di masa mendatang. Plus, menggunakan file reset (lihat # 4) dapat menghilangkan hampir semua penyimpangan rendering antara browser.

20. Gunakan Pemosisian Absolut dengan Hemat

Pemosisian absolut adalah aspek praktis dari CSS yang memungkinkan Anda untuk menentukan di mana tepatnya suatu elemen harus diposisikan pada suatu halaman ke piksel yang tepat. Namun, karena pengabaian posisi absolut untuk elemen lain di halaman, tata letak dapat menjadi sangat berbulu jika ada beberapa elemen yang benar-benar diposisikan di sekitar tata letak.

21. Gunakan Text-transform

Transformasi teks adalah properti CSS yang sangat berguna yang memungkinkan Anda untuk "menstandardisasi" bagaimana teks diformat di situs Anda. Misalnya, Anda ingin membuat beberapa header yang hanya memiliki huruf kecil. Cukup tambahkan properti text-transform ke gaya header seperti ini:

1	text-transform: lowercase;

Sekarang semua huruf di header akan menjadi huruf kecil secara default. Teks-transformasi memungkinkan Anda untuk memodifikasi teks Anda (huruf pertama dikapitalisasi, semua huruf kapital, atau semua huruf kecil) dengan properti sederhana.

22. Jangan gunakan Margin Negatif untuk Menyembunyikan h1 Anda

Seringkali orang akan menggunakan gambar untuk teks header mereka, dan kemudian menggunakan tampilan: tidak ada atau margin negatif untuk mengapung h1 dari halaman. Matt Cutts, kepala tim Webspam Google, secara resmi mengatakan bahwa ini adalah ide yang buruk, karena Google mungkin berpikir itu adalah spam.

Seperti Tuan Cutts katakan, hindari menyembunyikan teks logo Anda dengan CSS. Cukup gunakan alt tag. Sementara banyak yang mengklaim bahwa Anda masih dapat menggunakan CSS untuk menyembunyikan tag h1 asalkan h1 sama dengan teks logo, saya lebih suka melakukan kesalahan pada sisi yang aman.

23. Validasi CSS Anda dan XHTML

Memvalidasi CSS dan XHTML Anda lebih dari sekadar memberikan rasa bangga: itu membantu Anda dengan cepat menemukan kesalahan dalam kode Anda. Jika Anda sedang mengerjakan suatu desain dan untuk beberapa alasan hal-hal tidak tampak benar, coba jalankan markup dan validator CSS dan lihat kesalahan apa yang muncul. Biasanya Anda akan menemukan bahwa Anda lupa untuk menutup div di suatu tempat, atau titik koma yang hilang dalam properti CSS.

24. Ems vs. Pixel

Selalu ada perdebatan kuat apakah lebih baik menggunakan piksel (px) atau ems (em) ketika menentukan ukuran huruf. Piksel adalah cara yang lebih statis untuk menentukan ukuran font, dan ems lebih terukur dengan ukuran browser dan perangkat seluler yang berbeda. Dengan munculnya berbagai jenis penjelajahan web (laptop, seluler, dll.), Ems semakin menjadi standar untuk ukuran ukuran font karena memungkinkan bentuk fleksibilitas terbesar. Anda dapat membaca lebih lanjut tentang mengapa Anda harus menggunakan ems untuk ukuran font di thread forum yang bijaksana ini. About.com juga memiliki artikel bagus tentang perbedaan antara ukuran pengukuran.

<catatan-editor> Jangan bawa saya ke pertanian yang satu ini - tapi saya akan berani bertaruh itu, berkat pembesaran peramban, sebagian besar desainer default ke tata letak berbasis piksel. Apa yang kamu pikirkan? </editors-note>

25. Jangan Meremehkan Daftar

Daftar adalah cara yang bagus untuk menyajikan data dalam format terstruktur yang mudah untuk memodifikasi gaya. Berkat properti tampilan, Anda tidak harus hanya menggunakan daftar sebagai atribut teks. Daftar juga bagus untuk membuat menu navigasi dan hal semacam itu.

Banyak pemula menggunakan div untuk membuat setiap elemen dalam daftar karena mereka tidak mengerti bagaimana menggunakannya dengan benar. Ini sepadan dengan upaya untuk menggunakan memoles unsur-unsur daftar pembelajaran untuk menyusun data di masa depan.

<editors-note>

Anda akan sering melihat tautan navigasi seperti ini:

1
2	<a href="#">Home</a>
3	<a href="#">About</a>
4	<a href="#">Services</a>
5	<a href="#">Contact</a>

Padahal, secara teknis, ini akan bekerja dengan baik setelah sedikit CSS, itu ceroboh. Jika Anda menambahkan daftar tautan, gunakan daftar tidak berurut, konyol!

</editors-note>

26. Hindari pemilih ekstra

Sangat mudah untuk tanpa sadar menambahkan pemilih ekstra ke CSS kami yang mengacaukan stylesheet. Salah satu contoh umum menambahkan pemilih ekstra adalah dengan daftar.

1	body #container .someclass ul li {....}

Dalam contoh ini, hanya li .someclass akan bekerja dengan baik.

1	.someclass li {...}

Menambahkan pemilih ekstra tidak akan membawa Armageddon atau hal semacam itu, tetapi mereka menjaga agar CSS Anda sesederhana dan sebersih mungkin.

27. Tambahkan Margin dan Padding ke Semua

Browser yang berbeda membuat elemen berbeda. IE membuat elemen-elemen tertentu secara berbeda dari Firefox. IE 6 membuat elemen berbeda dari IE 7 dan IE 8. Sementara browser mulai mematuhi lebih dekat dengan standar W3C, mereka masih belum sempurna (* batuk batuk IE *).

Salah satu perbedaan utama antara versi browser adalah bagaimana padding dan margin dibuat. Jika Anda belum menggunakan reset, Anda mungkin ingin menentukan margin dan padding untuk semua elemen pada halaman, untuk berada di sisi yang aman. Anda dapat melakukan ini dengan cepat dengan reset global, seperti:

1
2	* {margin:0;padding:0;}

Sekarang semua elemen memiliki padding dan margin 0, kecuali ditentukan oleh gaya lain di stylesheet.

<editor-catatan> Masalahnya adalah bahwa, karena SEMUANYA dipertanyakan dengan metode ini, Anda berpotensi menyebabkan lebih banyak bahaya daripada bantuan. Apakah Anda yakin bahwa Anda ingin setiap margin dan padding elemen tunggal memusatkan perhatian? Jika demikian - itu bisa diterima. Tetapi setidaknya pertimbangkan itu. </editors-note>

28. Bila Sudah Siap, Coba CSS Berorientasi Objek

Pemrograman Berorientasi Objek adalah pemisahan elemen dalam kode sehingga lebih mudah untuk mempertahankan penggunaan kembali. CSS Berorientasi Objek mengikuti prinsip yang sama untuk memisahkan aspek-aspek berbeda dari stylesheet (s) ke dalam bagian yang lebih logis, membuat CSS Anda lebih modular dan dapat digunakan kembali.

Berikut ini adalah presentasi slide tentang bagaimana CSS Berorientasi Obyek bekerja:

Dari Nicole Sullivan.

Jika Anda baru di permainan CSS / XHTML, OOCSS mungkin sedikit tantangan di awal. Tetapi prinsip-prinsip yang besar untuk dipahami untuk pemrograman berorientasi objek pada umumnya.

29. Gunakan Beberapa Stylesheet

Bergantung pada kerumitan desain dan ukuran situs, terkadang lebih mudah untuk membuat stylesheet raksasa yang lebih kecil daripada satu stylesheet raksasa. Selain dari itu menjadi lebih mudah untuk desainer untuk mengelola, beberapa stylesheet memungkinkan Anda untuk meninggalkan CSS pada halaman tertentu yang tidak membutuhkannya.

Sebagai contoh, saya mungkin memiliki program pemungutan suara yang akan memiliki satu set gaya yang unik. Alih-alih memasukkan gaya jajak pendapat ke stylesheet utama, saya hanya bisa membuat poll.css dan stylesheet hanya ke halaman yang menunjukkan jajak pendapat.

<editor-note> Namun, pastikan untuk mempertimbangkan jumlah permintaan HTTP yang sedang dibuat. Banyak desainer lebih suka mengembangkan dengan banyak stylesheet, dan kemudian menggabungkannya menjadi satu file. Ini mengurangi jumlah permintaan HTTP menjadi satu. Juga, seluruh file akan di-cache di komputer pengguna. </editors-note>

30. Periksa Elemen Tertutup Pertama Saat Debug

Jika Anda memperhatikan bahwa desain Anda terlihat agak miring, ada kemungkinan besar itu karena Anda telah berhenti menutup </div> . Anda dapat menggunakan validator XHTML untuk membantu mengendus segala macam kesalahan juga.

Anda mungkin akan menikmati....

Ikuti kami di Twitter, atau berlangganan Nettuts + RSS Feed untuk lebih banyak tuts pengembangan web harian dan artikel.