Re-Bersepeda adalah Buzzword dan In Web Development artinya tidak berbeda. Ini menghemat energi, dalam hal upaya!
Selama tahun menulis CSS dan HTML dari membuat desain, saya telah mengikuti beberapa praktik terbaik, dalam mengejar menghemat waktu dan energi dalam apa yang biasanya kita istilah sebagai "Re-Inventing the Wheel". Waktu dan waktu lagi, saya berkata pada diriku sendiri, bahwa saya harus membuat template, beberapa CSS yang dapat digunakan kembali standar yang saya akan menggunakan DARI BOX dalam pekerjaan masa depan saya. Meskipun tidak sepenuhnya tapi aku berhasil mencapai beberapa tujuan.
Dalam memajukan, Re-Gunakan CSS, saya telah melihat kerangka CSS beberapa yang umum tersedia bagi kita dan memutuskan untuk menempatkan mereka untuk digunakan, karena ini dicoba dan diuji dan diciptakan oleh pengembang berpengalaman banyak, dari diriku sendiri. Lebih penting "AVOID Perombakan".
Meskipun pengetahuan umum untuk para veteran, saya telah mencoba untuk menulis beberapa kunci konsep / praktik terbaik / pikiran yang telah dilakukan untuk menciptakan kerangka kerja ini, untuk membuat RE-CYCLING CSS mungkin. Berharap ini akan membantu beberapa pengembang CSS yang baru saja akan dan baru-baru naik kereta musik CSS!
Tombol Re-bersepeda dari CSS:
Gunakan Konvensi Penamaan
Hal ini menjadi faktor yang paling penting dalam membuat CSS / HTML yang dapat digunakan kembali. Memberikan nama yang konsisten untuk elemen halaman memungkinkan penggunaan kembali komponen halaman dan gaya mereka dengan sedikit atau modifikasi. Sejalan dengan argumen ini, Bahkan HTML5, dalam perubahan perubahan besar atas pendahulunya, adalah untuk memperkenalkan beberapa tag yaitu struktural. <article>, <section>, <header>, <aside>, dan <nav> [ Apa yang akan membawa HTML5? ]. Bahkan dengan HTML 4 (atau lebih rendah), yang terbaik untuk nama bagian standar dari halaman Anda consistanly seperti dalam contoh sederhana di bawah ini ...
Ingat, Sebagian besar halaman pada proyek Anda, akhirnya memiliki unsur-unsur inti yang sama struktural. Mengidentifikasi unsur-unsur inti halaman umum ....
<div id="container">
<div id="header"> ... </ div>
<div id="nav"> ... </ div>
<div id="sidebar"> ... </ div>
<div id="footer"> ... </ div>
</ Div> Ulang Styles Default (CSS Reset): Apakah Anda menggunakan kerangka atau menulis sendiri, Anda harus menyediakan CSS Mereset [ Apa CSS Mereset? ], karena mereka mengurangi atau kadang-kadang menghilangkan inkonsistensi visual yang terjadi antara berbagai browser. Dengan kata sederhana Mekanisme ulang CSS menetapkan gaya Elemen HTML untuk nilai nol atau nol, sehingga mengesampingkan nilai-nilai default browser mereka mungkin pose. Ini memberikan yang bersih untuk mengatur sifat-sifat kekosongan dari setiap elemen User-Agent Defaults [ CSS2.1 Pengguna Default Style Agen Lembar ]. Semua kerangka CSS punya mekanisme reset. Jika Anda menulis Anda sendiri CSS Mereset, kata hati-hati adalah bahwa jika Anda kebetulan lupa untuk me-reset properti kunci, Ini bisa menyebabkan lintas-browser isu, yang sangat sulit untuk debug. Ingat, Menyimpan salinan dari gaya reset dan menjatuhkan mereka ke dalam setiap proyek baru Anda buat.
tubuh, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pra, bentuk, fieldset, input, select, textarea,
p, blockquote, meja, th, td
{
border: 0px;
margin: 0;
padding: 0;
} Set Default (Styles baseline) untuk Elemen:
Setelah Anda telah mengatur (nol atau null) Nilai default dari atribut tertentu Elemen HTML tertentu, Hal ini diperlukan untuk menerapkan beberapa gaya di setiap contoh unsur-unsur. Pengaturan standar ini bisa bervariasi sesuai desain atau menurut praktek-praktek terbaik yang Anda ikuti.
Kebanyakan CSS kerangka kerja, selalu memperkenalkan beberapa default baru, selain ulang gaya default browser.
Default ini menjadi kosong dari User-Agent Defaults (dilucuti oleh Reset CSS), ini akan konsisten di seluruh browser.
Ingat, gaya baseline digunakan untuk mengatur gaya yang akan digunakan desain-lebar. misalnya.
html {font-size: 77%; font-family: Arial, sans-serif;}
kuat, h1, h2, h3, h4, h5, h6 {font-weight: bold;} Abstrak Styles untuk Komponen HTML umum dan Kelas Umum:
Kebanyakan proyek yang terdiri dari beberapa halaman akan memiliki elemen HTML yang umum digunakan di seluruh situs, untuk misalnya Semacam bentuk, peringatan dan kesalahan, Popup Custom, lightboxes dll Karena komponen tersebut digunakan lagi di seluruh proyek, Ini akan berguna untuk memberikan set kelas yang terkait dengan gaya standar untuk komponen dan Anda dapat menyimpan sendiri banyak waktu.
Selain menentukan definisi gaya dapat digunakan kembali untuk Komponen HTML umum, kita bisa abstrak gaya kelas yang berkaitan dengan tipografi, warna atau bahkan tata letak. Saya sendiri cenderung Anda gunakan ... kelas umum seperti Clearfix,, Font08 FontGrey, AlignL, DisplayB dll
bentuk masukan {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; height: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
bentuk textarea {border: 0px; background: # ffffff; color: # 000000; font-size: 0,9 em; line-height: 1.5em; overflow: terlihat;}
Fbold {font-weight: bold; color: # cccccc;}.
. Fgrey {color: # 666666;}
. Flightgrey {color: # bbbbbb;}
Clearfix {clear: both;}.
Pembagi {border-top: 1px solid # 647B06; border-bottom: 1px # 9CC00A padat; height: 0px;}.
Displayb {display: block;}. Displayn {display: none;}.
Alignr {text-align: right}.. Alignc {text-align: center}
Floatr {float: right;}. Floatl. {Float: left;} Perbaikan untuk quirks browser yang umum
Berbagai browser menerapkan kode CSS dan memberikan berbagai tingkat dukungan untuk spesifikasi CSS. Hasil ini .... "Browser quirks", bahwa kita pengembang yang tersisa untuk mengatasi. Terutama, IE6 menghantui coders paling CSS dengan batas waktu untuk bertemu. Kabar baiknya adalah pengalaman telah menghimpun perbaikan dapat digunakan kembali mungkin untuk masalah ini (Sering disebut sebagai CSS Hacks ).
Ingat, Simpan hacks / perbaikan berguna
/ * Zoom berikut: 1 aturan ini khusus untuk IE6 + IE7. * /
* Html. Clearfix,
*:. Pertama anak + html clearfix {
zoom: 1;
} Jauhkan Refining CSS Anda
- Kebiasaan kembali bersepeda tidak akan datang kepada Anda dalam hari. Ini harus dikembangkan. Jadi Anda berencana Re-Bersepeda. Ingatlah hal ini bahwa Anda bisa default abstrak gaya, definisi tipografi, Layouts, Styles Elemen HTML dll Cobalah untuk berpikir ke depan.
- Juga melihat kembali proyek-proyek masa lalu Anda, ini akan membantu mengidentifikasi gaya yang Anda cenderung sering digunakan di seluruh porjects. Abstrak itu.
- Hapus semua gaya yang tidak terpakai. Praktek ini akan menjaga kerangka CSS dari gejala yang umum disebut "Kembung" -
- Hapus gaya berulang-ulang.
- Membangun satu set gaya yang cukup fleksibel untuk port di seluruh proyek.
A Look At Kerangka CSS
Akhirnya. Jika Anda terinspirasi dan berniat untuk menggunakan satu atau lebih kerangka CSS, Heres adalah daftar cepat dari yang populer beberapa ....
- 960 Grid System : Sistem Grid 960 merupakan upaya untuk merampingkan alur kerja pengembangan web dengan memberikan dimensi yang umum digunakan, berdasarkan lebar 960 piksel. Ada tiga varian: 12, 16 dan 24 kolom, yang dapat digunakan secara terpisah atau bersama-sama. Pemikiran bahwa tidak ada yang Anda tidak dapat membuat satu untuk Anda sendiri cukup mudah, Kerangka kerja ini menyediakan template grid untuk cetak dalam format PDF, yang dapat digunakan untuk membuat sketsa designs.Bet halaman Anda, Akan membuat kesan profesional, jika Anda membawa beberapa lembar ketika Anda pergi ke klien untuk mengumpulkan persyaratan UI. Ini juga menyediakan template jaringan dasar untuk software desain populer seperti Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, dll menyediakan "starter untuk sepuluh" untuk memulai pekerjaan desain Anda.
- Cetak Biru : Cetak Biru menyediakan jelas diklasifikasikan file CSS untuk Mengatur ulang, Grids, Formulir, Cetak, Tipografi, Plugin untuk tombol, tab dan sprite dll ini juga menyediakan dukungan untuk IE sebagai terpisah termasuk.
- SenCSs : Tidak seperti dua di atas, SenCSs (Rasa diucapkan), tidak memiliki definisi CSS untuk Layout. Ini tidak termasuk font, bantalan, margin, tabel, daftar, header, blockquotes, bentuk dan banyak lagi.
- BlueTrip : klaim aslinya untuk ketenaran adalah bahwa, itu adalah kombinasi fitur terbaik yang disediakan oleh kerangka kerja lain lain seperti oli cetak, perjalanan Biru ... dari mana ia mendapatkan namanya. Keunggulan ini termasuk 24-kolom grid, gaya tipografi, gaya orm, mencetak, tombol dll
- YUI Grids : Dibawa ke anda oleh Developer Network Yahooo, mendukung cairan lebar (100%) layout serta telah ditetapkan fixed-width layout di 750px, 950px dan 974px, dan kemampuan untuk dengan mudah menyesuaikan untuk nomor apapun. Seperti yang Anda lihat, Its teknis hanya Komponen layout. YUI juga disediakan HTML / CSS set untuk elemen halaman lain
- YAML (Yet Another multicolumn Tata Letak)
- Emastic
Ingat, menggunakan kerangka CSS tidak berarti bahwa Anda malas untuk membuat satu sendiri ... Ini menyiratkan bahwa Anda cerdas untuk belajar dari pengalaman orang lain & kesalahan, SAVE TIME dan KENAIKAN PRODUKTIVITAS!
