5 Langkah untuk Menulis Lebih Baik CSS Part II
Ini adalah bagian kedua dari 5 Langkah untuk Menulis Better CSS. Ada banyak tutorial CSS yang tersedia di internet namun beberapa tutorial yang bermanfaat. Dalam tutorial ini Anda akan menemukan 5 langkah untuk menulis kode css yang lebih baik untuk proyek web berikutnya. Saya harap Anda akan menikmati tutorial ini.
1. Jauhkan CSS deklarasi dalam satu baris
Anda harus selalu menjaga deklarasi CSS dalam satu baris, membantu dalam file CSS Anda tetap bersih dan lebih kecil. Hal ini juga membantu untuk menghilangkan spasi dan karakter yang tidak diinginkan.
Good Kode
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
Kode Buruk
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
2. Combine Elements
Salah satu cara terbaik untuk menyimpan baris kode adalah dengan mengelompokkan penyeleksi. Ada beberapa contoh di bawah ini dari apa yang saya maksudkan.
Good Kode
h1, h2, h3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
Kode Buruk
: Arial, Helvetica, sans-serif ; color : # 333 ; } h2 { font-family : Arial, Helvetica, sans-serif ; color : # 333 ; } h3 { font-family : Arial, Helvetica, sans-serif ; color : # 333 ; } h1 (font-family: Arial, Helvetica, sans-serif; color: # 333;) h2 (font-family: Arial, Helvetica, sans-serif; color: # 333;) h3 (font-family: Arial, Helvetica, sans-serif; color: # 333;)
3. Gunakan "Margin" untuk Pusat Layout
Banyak pemula untuk CSS bisa tidak tahu mengapa Anda tidak bisa hanya menggunakan float: center untuk mencapai efek yang berpusat pada tingkat blok elemen. Kalau saja semudah itu! Sayangnya, Anda harus menggunakan.
Kode
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * atas, bawah - dan kiri, kanan * / width: xxxpx; )
4. Komentar Anda CSS
Itu ide yang bagus untuk komentar kode Anda dalam beberapa bagian. Untuk menambahkan komentar, cukup tambahkan / * di belakang komentar, dan * / untuk menutupnya, seperti:
Kode
KODE /******** START HERE ********/
5. Menggunakan CSS Compress Tools
jika Anda tidak ingin membuang-buang waktu Anda dalam memodifikasi style sheet lama Anda Anda dapat menggunakan alat kompres css online, itu membuat pekerjaan Anda dalam hitungan detik.
check this online kompres css tools ...
Css Tidy
Bersih Css
Css Optimizer
Css Flumpcakes pengoptimasi
cssdrive Css Comperasor
Css W3C Validator
Kesimpulan
Ini hanya beberapa tips yang membantu saya untuk menulis kode yang lebih baik. Saya harap tutorial ini juga akan membantu Anda untuk menulis kode yang lebih baik dan bersih. Terapkan Tips untuk Anda saat ini dan proyek-proyek berikutnya, dan Anda pasti akan menghargai upaya.
Jika Anda Pikirkan bahwa tutorial dapat lebih baik, silahkan berbagi dengan kami. Komentar kami
jika Anda ingin menerima lebih banyak tutorial dari kami, silahkan pertimbangkan untuk berlangganan feed dengan RSS atau email.
Promosikan Kami
Artikel Terkait:
jika anda menikmati membaca artikel ini, silakan periksa artikel lain yang terkait di bawah ini:
Revell mengatakan pada: November 27, 2009 at 9:05 Said:
Hai,
Pertama-tama, nice article! Tidak ada banyak artikel yang membahas gaya penulisan CSS. Saya punya beberapa pikiran pada titik pertama sekalipun. Menurut pendapat saya lebih baik untuk menggunakan gaya penulisan yang panjang sementara mengembangkan dan memiliki skrip "mengecilkan" CSS Anda ketika digunakan di lingkungan hidup.
Dave mengatakan pada: November 27, 2009 di 10:06 Said:
Aku benar-benar tidak setuju dengan poin 1. Bila Anda sudah punya 3 pernyataan, 1 baris kode yang besar, tetapi bila ada 6 atau 7, itu jadi sangat sulit untuk dibaca.
Semua itu untuk menyelamatkan mungkin 1kb? Aku tidak mengerti.
Selain itu, beberapa ide yang baik di sini.
Dave terakhir blog .. 2 more must-have plugin untuk memungkinkan CMS Wordpress
Nicolo 'Fasce mengatakan pada: November 27, 2009 di 10:34 Said:
Saya setuju dengan Dave, titik 1 adalah salah, hanya karena jika Anda bekerja dalam sebuah tim itu sangat sulit untuk membaca satu baris kode.
Anda juga harus menulis kode dalam urutan abjad untuk tujuan yang sama.
EJ Semeijn mengatakan pada: November 27, 2009 at 10:57 Said:
Mengapa kita berhenti posting tips-tips? Internet sudah penuh ini tips dasar. Dan saya juga tidak setuju dengan # 1. Itu tidak membuat kode Anda lebih mudah untuk mengerti, itu hanya membuatnya lebih sulit.
Tips saya akan meletakkan struktur halaman di CSS anda, membuat bagian untuk RESET, judul, BENTUK, HTML ELEMENTS, dll Dengan cara itu FONTS CSS Anda akan lebih mudah untuk dipahami.
safetycopy mengatakan pada: November 27, 2009 at 9:38 Said:
Saya setuju dengan beberapa komentar orang lain - contoh titik 1 kode buruk kode tidak buruk - hanya alternatif gaya. Posting ini hanya akan berguna untuk menyelesaikan pemula dan kita tidak ingin memulai mengajar mereka asumsi buruk sudah!
safetycopy terakhir blog .. Foto
Josh mengatakan pada: November 29, 2009 at 4:38 Said:
Aku melakukan semua ini, kecuali yang terakhir. Saya tidak menemukan itu berguna untuk kompres css saya, tetapi tidak seperti semua pembaca sebelumnya saya sangat setuju pada point # 1. Aku baru saja mulai menulis CSS dalam satu baris dan itu sudah luar biasa. Yang bergulir telah jauh berkurang. Saya kira ini adalah pilihan pribadi. Sesuatu yang membantu adalah bahwa editor saya menggunakan kode wraps turun ke baris berikutnya sehingga tidak ada horisontal bergulir.
Josh terakhir blog .. Addicted to Flickr
FAQPAL mengatakan pada: November 29, 2009 at 4:06 Said:
Pemula tips yang baik, saya tidak mengecilkan CSS saya baik, mungkin proyek yang jauh lebih besar akan mendapat manfaat dari minifying, tapi rata-rata situs tersebut tidak benar-benar perlu.
Sejauh yang # 1 pergi, saya pikir kata-kata adalah apa yang melempar orang-orang mati, alih-alih mengatakan, "Bad Code", mungkin ada yang berkata seperti safetycopy telah menyarankan, "Kode alternatif".
FAQPAL terakhir blog .. Bubble Effect dengan CSS
favSHARE mengatakan pada: November 30, 2009 at 12:49 Said:
Artikel ini telah bersama pada favSHARE.net. Pergi dan suara itu!
favSHARE terakhir blog .. 25 Web Layout Tutorial
Jean-Patrick Smith mengatakan pada: Desember 11, 2009 at 11:15 Said:
Saya biasanya membuat file PHP yang mencakup semua file css, minifies itu, dan menambah kompresi + berakhir header.
Dengan begitu saya tidak harus setuju dengan titik # 1 ...
Apa yang lebih penting daripada memiliki semua CSS Anda pada satu baris adalah mengurangi jumlah panggilan HTTP dengan CSS sprite dan menggabungkan semua CSS / JS ke dalam satu file.