Menggunakan rangka kerja untuk membina akhir depan laman web anda mempunyai banyak kelebihan (dan cukup mudah untuk boot!). Mari kita lihat apa rangka kerja depan dan mengapa anda harus mempertimbangkan memasukkannya ke dalam kerja pembangunan web anda.
Rangka Kerja Depan
Juga dirujuk sebagai "rangka kerja CSS," ini adalah pakej yang mengandungi kod pra-bertulis dan berstandar dalam fail dan folder. Mereka memberi anda asas untuk membina sementara masih membenarkan fleksibiliti dengan reka bentuk akhir. Biasanya, rangka kerja hadapan mengandungi komponen berikut:
- Grid yang menjadikannya mudah untuk menyusun unsur reka bentuk laman web anda
- Gaya fon yang ditentukan dan ukuran yang berbeza-beza berdasarkan fungsinya (tipografi yang berbeza untuk tajuk versus perenggan, dan lain-lain)
- Komponen laman web yang dibina seperti panel sisi, butang, dan bar navigasi
Bergantung kepada rangka kerja khusus yang anda pilih, terdapat lebih banyak lagi yang mereka mampu.
Kenapa Gunakan Satu
Terdapat banyak sebab yang baik untuk menggunakan kerangka depan dan bukannya memulakan semua kod anda dari awal:
- Menjimatkan masa! Jelas sekali, jika anda menulis setiap baris kod sendiri, ia akan mengambil masa yang lebih lama untuk melancarkan laman web anda. Rangka kerja boleh membantu anda bermula dengan asas-asas.
- Tambah komponen tambahan yang anda mungkin tidak sebaliknya. Ia sentiasa baik untuk mempunyai pilihan untuk menekan pada butang atau dua lagi tanpa membuat apa-apa kerumitan tambahan untuk diri sendiri.
- Ketahuilah bahawa kod itu berfungsi. Daripada menghabiskan banyak masa menulis kod anda sendiri hanya untuk mengetahui bahawa ia tidak berfungsi (atau tidak serasi dengan 60% pelayar web), anda akan mengetahui bahawa anda menggunakan kod yang telah diuji, berfungsi.
Sebelum bergerak, saya juga ingin menjelaskan bagaimana untuk tidak menggunakan rangka depan! Mengubati mereka sebagai pengganti untuk memiliki kemahiran membangun kod tidak akan memberi anda sebarang pertolongan. Dapatkan akrab dengan HTML dan CSS terlebih dahulu, dan kemudian anda boleh mula menggunakan pintasan. Rawat kerangka anda sebagai pembantu, bukan kruk.
Contoh Rangka Kerja Hadapan
Tidak semua rangka kerja CSS dicipta sama, jadi pastikan anda melakukan penyelidikan tentang mana yang paling sesuai dengan keperluan unik anda. Berikut adalah gambaran ringkas mengenai lima teratas:
- Bootstrap: Yang paling popular di sana. Mempunyai tan bintang di Github dan banyak sumber untuk menjawab soalan anda. Salah satu yang lebih mudah digunakan, tetapi ada yang mengatakan ia mempunyai "Bootstrap" yang sangat tersendiri.
- Yayasan: Menawarkan banyak fleksibiliti dan kesesuaian. Baik untuk mereka yang berpengalaman dengan pembangunan front-end dan suka menampung asas-asas sambil mengekalkan banyak kawalan kreatif.
- Stylus: Bahasa CSS yang ekspresif dan bergaya. Rangka kerja ini hanya boleh digunakan pada aplikasi Node.js.
- UI Semantik: Ringkas, intuitif, dan membuat debugging kod anda bagus dan mudah. Memberi anda banyak kebebasan reka bentuk dan menyesuaikan diri dengan keperluan anda.
- Kit UI: Kerangka untuk digunakan jika anda berminat untuk membangunkan aplikasi iOS. Mempunyai gaya asas yang menjadikannya mudah untuk memajukan laman web anda sendiri.
Kesimpulannya
Rangka kerja adalah alat yang sangat berguna untuk reka bentuk front-end, terutama jika anda mempunyai pekerjaan di mana anda kerap mengembangkan bahagian itu. Mereka membolehkan anda mempercepatkan aliran kerja anda dan meningkatkan produktiviti anda tanpa mengorbankan kualiti atau fungsi, sambil tetap membuka pintu untuk melihat unik dan disesuaikan. Ingatlah untuk menggunakannya sebagai alat untuk melengkapkan kemahiran anda, bukan sebagai cara untuk memotong sudut-sudut dan nikmati!