"Framework" adalah kata kunci yang cukup populer dalam pengembangan web saat ini. Misalnya, kerangka JavaScript YUI, JQuery, dan Prototipe telah menarik perhatian luas, dan kerangka aplikasi web Rails dan Dojo telah menarik lebih banyak perhatian. Tampaknya setiap orang menggunakan semacam kerangka kerja untuk mengembangkan situs web mereka sendiri. Tapi apa sebenarnya kerangka kerja itu? Apakah kerangka kerja hanya berguna bagi pemrogram?
Apa itu kerangka kerja?
Untuk memfasilitasi komunikasi, kami memberikan definisi terpadu tentang "kerangka kerja" (setidaknya dalam artikel ini): seperangkat alat, pustaka fungsi, konvensi, dan modul umum yang mencoba mengabstraksi tugas-tugas umum dan dapat digunakan kembali dan pengembang untuk fokus pada aspek unik pada proyek tugas dan menghindari duplikasi pengembangan. Secara umum, kerangka kerja adalah kerangka JavaScript dan kerangka aplikasi Web yang disebutkan di atas.
Penting untuk ditekankan bahwa kita tidak harus berbicara tentang konstruksi, pengemasan, dan distribusi. Sebaliknya, kerangka kerja hanya dapat digunakan oleh Anda atau tim Anda.
kerangka CSS
Terkadang, Anda mungkin merasakan manfaat dari kode CSS abstrak dan serupa, yang paling jelas terlihat di kalangan desainer yang mendesain beberapa situs web serupa pada saat yang bersamaan. Selain itu, para desainer di tim mendapat banyak manfaat dari pendekatan kerangka kerja ini. Misalnya, saya bekerja di sebuah surat kabar, dan 20+ situs web tersebut memiliki banyak kesamaan. Berdasarkan karakteristik situs berita, situs-situs tersebut cenderung lebih mirip daripada berbeda. Tetapi bahkan seorang desainer yang mengerjakan sebuah proyek yang terlihat sangat berbeda di permukaan dapat mengabstraksi beberapa bagian kecil yang umum untuk kerangka CSS.
Di Lawrence Journal-World, tempat saya bekerja, kami baru-baru ini membangun kerangka kerja CSS dan menemukan bahwa kerangka tersebut merupakan pengganda efisiensi yang sangat besar. Tentu saja, kami membutuhkan waktu berhari-hari untuk membuat kerangka kerja CSS sendiri, namun setelah kerangka tersebut selesai, pengembangan halaman web berkualitas tinggi menjadi sangat cepat. Terlebih lagi, karena setiap desainer di tim sekarang menggunakan kerangka kerja ini, ketika seorang desainer memodifikasi halaman web anggota tim lain, mereka tidak perlu lagi menghabiskan waktu 20 menit untuk memahami ide konstruksi orang lain dan dapat segera memulai.
Apakah ada yang bisa diabaikan?
Saat berinvestasi dalam kerangka CSS yang sangat holistik, yang ingin Anda cari adalah kode umum yang diulang terus menerus di setiap proyek. Tujuannya adalah untuk mengkonsolidasikan posisi inti dari kode-kode ini dan mengikuti "Jangan ulangi sendiri" t Ulangi Dirimu Sendiri)" metode pengkodean. Hal ini membuat pemeliharaan lebih mudah dan menghemat biaya bandwidth bagi pengunjung Anda.
Di hampir setiap proyek yang saya kerjakan, ada beberapa masalah CSS yang harus saya nyatakan:
"Reset ekstensif" dari gaya default browser, misalnya, menyetel margin dan padding semua elemen ke 0, menghapus batas kumpulan bingkai dan gambar, dll.
Sejajarkan dengan garis dasar. Ini mencakup hal-hal seperti mengatur margin untuk elemen tingkat blok seperti paragraf, header, dan daftar ke ketinggian garis dasar yang sama (atau beberapa).
Buat gaya dasar formulir.
Buat beberapa kelas CSS yang umum digunakan, misalnya .hide (setel tampilan ke tidak ada, yaitu menyembunyikan elemen), .mute (setel ke font lebih kecil dan warna lebih cerah).
Dan lucunya, banyak perancang situs web mendapati diri mereka menggunakan kembali struktur dasar yang sama berulang kali, jadi mengapa tidak membuatnya sendiri, dengan cara yang sangat fleksibel dan dapat digunakan di banyak situs web? Yahoo melakukan ini YUI. Saat kami membangun kerangka CSS untuk situs Lawrence Journal-World, saya mulai dengan melihat bagaimana Yahoo melakukannya. Kami cukup yakin bukan itu yang kami inginkan, namun ini menjadi contoh yang baik dan memberi kami banyak ide untuk dipikirkan dan bagaimana membangun kerangka kerja kami sendiri. Kami menyelesaikan masalah 16 sel yang cukup fleksibel untuk bekerja di setiap situs kami, meskipun setiap situs terlihat sedikit berbeda dari situs berikutnya. Selain itu, sebagian besar situs web berbagi widget, seperti menu drop-down, menu navigasi, tombol, dll. Ini juga merupakan objek utama yang perlu diabstraksi. Selain itu, Anda mungkin memiliki nama konten yang umum, misalnya thumbnail untuk daftar gambar. Anda dapat menstandardisasi penamaan CSS, seperti "daftar thumbnail", sehingga semua thumbnail yang menampilkan thumbnail menggunakan kelas CSS ini.
Hal lain yang harus dilakukan adalah mengekstrak peretasan (seperti kompatibilitas dengan browser lama tersebut) dan menambahkan modul gaya tambahan Anda sendiri. Saya mencobanya sendiri, tetapi ternyata peretasan tersebut terlalu eksklusif untuk diekstraksi ke dalam kerangka umum.
Apa manfaat sebenarnya?
Manfaat sebenarnya dari kerangka kerja ini adalah dapat mulai bekerja dengan cepat. Anda dapat membuat file (X)HMTL baru dan memperkenalkan kerangka kerja Anda. Anda tidak lagi harus berurusan dengan pengaturan ulang padding dan margin. Widget yang valid, dll. Tentu saja, Anda harus menyesuaikan tampilan dan nuansa untuk setiap situs. Untuk mencapai hal ini, yang perlu Anda lakukan hanyalah mengganti dan menambahkan gaya default jika diperlukan.
Tentu saja, meskipun Anda harus menyesuaikan tampilan setiap situs web, yang perlu Anda lakukan untuk mencapai hal ini adalah menambahkan beberapa baris kode ke gaya default. Misalnya, jika Anda menetapkan gaya navigasi horizontal dasar untuk semua tag UL dengan atribut kelas "tab" di bingkai Anda, dan memiliki batas abu-abu, Anda hanya memerlukan beberapa baris kode CSS untuk menyesuaikannya situs web sesuai dengan.
| Berikut isi kutipannya: ul.tabs li { perbatasan: tidak ada; gambar latar belakang: url('/gambar/tab/ ?tampilan-tab-khusus-situs.jpg'); } ul.tabs li { perbatasan: tidak ada; gambar latar belakang: url('/gambar/tab/ ?tampilan-tab-khusus-situs.jpg'); } |
Daftarnya melayang ke kiri, dan tautannya ditempatkan dalam bentuk blok di daftar. Tautannya juga melayang ke kiri, dan fontnya di tengah. Kerangka kerja ini akan membantu Anda menyelesaikan tugas-tugas ini seperti iklan yang mengganggu di situs web Anda pekerjaan desain, fokus saja Fokus pada detail spesifik dan menarik dari situs web Anda, daripada menulis kode CSS yang telah ditulis jutaan kali sebelumnya.
Bagaimana cara membangun kerangka CSS?
Ada beberapa cara yang mungkin untuk membangun kerangka kerja, namun yang paling umum, dan bisa dibilang yang paling berguna, adalah dengan mengabstraksi CSS umum ke dalam file stylesheet mandiri yang hanya berisi bagian tertentu dari keseluruhan. Misalnya, Anda dapat memiliki satu gaya menangani tipografi dan gaya lainnya menangani pengaturan ulang massal. Metode yang baik ini memungkinkan Anda untuk secara selektif memperkenalkan gaya yang Anda perlukan. Mungkin ada enam atau tujuh file gaya berbeda dalam kerangka kerja Anda, tetapi Anda tidak memerlukan satu atau dua di antaranya, asalkan tidak diimpor. Kerangka kerja yang dibuat oleh tim kami terdiri dari 5 file gaya:
reset.css —menangani pengaturan ulang
type.css — menangani tipografi
grid.css — menangani tata letak
widgets.css — menangani widget seperti menu tab, menu drop-down, dan tombol "lainnya"
base.css — Berisi semua file stylesheet lainnya sehingga kita hanya perlu mereferensikan base.css di (X)HTML untuk menggunakan seluruh kerangka CSS. Kami kemudian menyimpan kerangka tersebut di tempat terpisah sehingga setiap situs mengimpor bingkai ini. Tentu saja, setiap situs web juga memerlukan style sheet yang unik, dan gaya yang unik tersebut merupakan pelengkap yang diperlukan untuk kerangka tersebut.
nasihat
Metode ini bagus, tetapi juga membawa masalah baru: meningkatkan jumlah link http untuk setiap halaman. Untuk situs web dengan lalu lintas besar dan menengah, jika lebih dari 5 koneksi HTTP ditambahkan ke setiap halaman, administrator sistem mungkin mendapat masalah besar. Dua kemungkinan solusi:
Masukkan semua gaya ke dalam satu file alih-alih membaginya menjadi beberapa modul. Masalahnya di sini adalah fleksibilitas kerangka kerja untuk hanya menyertakan file tertentu hilang dan pemeliharaan menjadi rumit.
Ada program sisi server yang secara dinamis memproses beberapa file menjadi respons. Saya belum melihat hal ini dilakukan, namun akan sangat efisien jika dilakukan dengan baik. Mengambil kerangka kerja saya di atas sebagai contoh, proses pemrosesan dinamis ini dipicu ketika base.css diminta, bukan ketika type.css, grids.css, dll. Dengan cara ini, file individual masih tersedia dan seluruh kerangka kerja valid pada versi platform.
Singkatnya, penting untuk dicatat bahwa tujuan kami bukanlah untuk menjadi abstrak mungkin. Sebaliknya, tujuannya adalah untuk memberikan permulaan yang cepat dan proses desain yang lebih efisien yang selalu mungkin dilakukan. Jika Anda melakukannya terlalu abstrak, segalanya bisa membingungkan dan terlalu banyak tautan HTTP dapat memengaruhi kinerja situs Anda. Ingat: kerangka kerja yang baik bukanlah tentang membuat segalanya menjadi lebih sulit dan rumit, namun tentang memulai dari awal.
Meringkaskan
Kami para desainer web cenderung mengulanginya setiap saat, dan seperti teman-teman saya di dunia pemrograman, kami menyetel ulang gaya default browser, tata letak desain, dan menu navigasi berulang kali—di hampir setiap proyek. Menghabiskan sedikit waktu untuk memilah kerangka CSS akan memungkinkan Anda memulai setiap proyek situs web dengan cepat, memelihara situs web dengan lebih mudah, dan membantu desainer lain dalam tim memahami pekerjaan Anda. Perlu diperhatikan bahwa manfaat tersebut harus diperoleh tanpa mempengaruhi kinerja website.