Apa pertanyaannya?
Halo semuanya, hari ini saya ingin berbagi dengan Anda pengalaman pribadi saya dalam gaya penulisan, atau lebih tepatnya berikan visi saya pada masalah menulis css untuk situs.
Tampaknya di zaman perkembangan teknologi, ketika setiap hari kita dihadapkan dengan kerangka kerja baru dan baru, preprosesor, mesin templat dan hal-hal lain, masalah tidak boleh muncul sama sekali. Pengembang pintar telah datang dengan banyak "fitur" keren untuk kenyamanan membuat situs yang kuat dan dapat diperluas. Tetapi bagaimana cara menggunakan alat-alat ini dengan benar di CSS? Dan apa kesulitannya?
Saya akan mencoba menjawab pertanyaan-pertanyaan ini dan lainnya dengan menyarankan metode dan pendekatan saya untuk menyelesaikan beberapa masalah.
Realitas yang keras
Ini tidak akan menjadi rahasia bagi siapa pun yang pemula dan pengembang frontend berpengalaman sering diberikan proyek siap pakai di mana Anda perlu melakukan perubahan, mengulang desain, dan sebagainya. Dalam praktik saya, ada banyak tugas seperti itu ketika Anda bekerja dengan kode orang lain, yang perlu Anda selidiki dan pahami. Dan jika situs yang sudah jadi jatuh ke tangan Anda, buka lembar gaya dan bersiaplah untuk melihat
beberapa ribu baris kode .
Tentu saja, Anda sebagai pengembang yang berpengalaman akan membukanya dalam beberapa jenis IDE, seperti Visual Studio Code dan dengan sedikit lambaian tangan Anda melalui fungsi pencarian dan ganti Anda dapat dengan mudah menemukan dan menulis ulang kelas apa pun.
Tetapi jika Anda perlu mengedit dalam jumlah yang layak dengan mengintegrasikan bagian dari desain baru untuk beberapa bagian di sana, berapa banyak waktu yang akan Anda
habiskan untuk ini ?
Saya
banyak berpikir. Dan semua yang Anda lakukan akan sedikit "tidak berguna". Bayangkan sebuah situasi ketika situs yang Anda bentuk ulang ditransfer ke pengembang lain atau setelah beberapa waktu Anda diminta untuk membuat
perubahan baru di sana .
SASS akan menyelesaikan masalah kita
Setelah mencerna semua informasi ini, seorang pengembang web biasa akan mengatakan bahwa ia keluar dari situasi: gunakan preprosesor CSS. Di sana dan modularitas dan kenyamanan dan semua.
Tentu saja! Tetapi alat apa pun di tangan programmer yang tidak berpengalaman kehilangan semua makna. Terkadang Anda membuka gaya situs dan lihatlah, folder berharga dengan nama "sass". Mengharapkan keajaiban paling sering Anda dapatkan hanya kekecewaan.
Perincian gaya menjadi file terpisah: header.sass, main.sass, animation.sass, dll. Betapa "brilian" itu. Dan tidak efektif. Membuka file seperti itu selanjutnya Anda menemukan banyak garis gaya yang sama.
Apa alternatifnya?
Lebih baik diam tentang bagaimana pengembang memanggil kelas mereka kadang-kadang, serta tentang rantai gaya bersarang. Saya pikir semua orang yang telah berbalik di bidang ini telah mendengar sesuatu tentang BEM dan memahami pentingnya penamaan kelas yang benar. Dengan ini, ada baiknya mulai
menyelesaikan semua masalah.Saya menawarkan pendekatan khusus, metodologi khusus untuk mengembangkan gaya Anda, tetapi bukan tanpa bantuan preprosesor. Ada beberapa tahapan untuk mengimplementasikan metodologi ini:
- Yang pertama , seperti yang sudah Anda pahami, adalah penamaan yang tepat untuk kelas Anda.
- Yang kedua adalah untuk menyingkirkan gaya bersarang. Di sini metodologi BEM akan membantu kami. Setelah membiasakan diri dengan dasar-dasar dokumentasi yang luar biasa ini, Anda dapat melanjutkan ke yang berikutnya.
- SASS - tanpa alat ini dengan cara apa pun. Dialah yang menjamin modularitas dan kekuatan proyek Anda.
- Perakitan proyek. Saya pikir Anda telah mendengar banyak tentang perakit modern (ada banyak informasi tentang membangun proyek di Internet). Gulp akan membantu kami di sini .
Sekarang kamu sudah siap.
Sekarang pada dasarnya
Dalam interpretasi modern dari frontend, Anda dapat menemukan beberapa kerangka kerja javascript. Sebagian besar dari mereka membagi situs menjadi bagian-bagian yang lebih kecil, komponen. Saya sarankan Anda melakukan hal yang sama ketika Anda berpikir tentang cara menulis gaya. Setiap tombol, item menu, tautan indah, gambar, dan bahkan teks biasa dapat menjadi komponen.
Misalnya, pada formulir memasuki situs ini, kita dapat membedakan beberapa komponen:
- Formulir masuk itu sendiri
- Bidang input
- Tombol kirim
- Kotak centang
Dan seperti yang ditunjukkan oleh praktik, selain tombol kirim di situs akan ada lebih banyak tombol ini dan akan logis untuk menyimpan semua gaya untuk mereka di satu tempat. Hal yang sama dapat dikatakan tentang bidang input, mereka dapat berada di tempat yang berbeda di situs, mengulangi penampilan mereka.
Berdasarkan ini, akan logis untuk membuat folder terpisah untuk setiap komponen dan mempertahankan gaya di sana hanya untuk itu, yang akan memungkinkan untuk menerapkan pendekatan modular. Tapi itu belum semuanya.
Komponen internal
Seperti yang saya katakan, mungkin ada banyak tombol di situs, dengan warna yang berbeda, indentasi yang berbeda, semua ini adalah data dan sangat pintar untuk memisahkan data ini dari gaya. Yang saya usulkan untuk dilakukan.
Saya mengusulkan untuk menyajikan setiap komponen dalam bentuk tiga entitas: vars, maker, dan creater. Secara sederhana, ini adalah data, pembuat tindakan (metode untuk mengelola data ini), dan pembuat gaya. Sekarang, hal pertama yang pertama.
- Data atau vars. Ini termasuk: warna teks tombol, warna latar tombol, padding, radius batas, ukuran font, dll. Semua data ini ditulis dalam bentuk variabel atau array asosiatif dalam file terpisah.
- Pembuat atau pembuat tindakan. Ini berisi berbagai fungsi atau mixin yang akan mengambil data sebagai argumen dan menghasilkan gaya dari mereka.
- Pembuat gaya atau creater. Sebenarnya di sini kita mengimpor data dan metode untuk diri kita sendiri dan mengikatnya satu sama lain sesuai kebutuhan.
Diagram berikut menunjukkan interaksi ketiga entitas.
Apakah sulit untuk menempatkan semua ini di kepala Anda? Perhatikan contoh pembuatan komponen dasar tombol - "tombol". Kami akan menggunakan SCSS sebagai preprosesor.
Seperti yang sudah Anda pahami, di folder tombol baru kami membuat tiga file: _vars.scss, _creater.scss, _maker.scss.
_vars.scss$button_size:( sm:5px 20px, md:15px 20px ); $button_color:( white:#ffffff ); $button_back:( blue: #00e5e5 ); $button_config:( padding:$button_size, color:$button_color, background:$button_back );
Seperti yang kita lihat, data disajikan dalam bentuk array asosiatif. Semua gaya individu termasuk dalam set button_config utama. Untuk membuat gaya baru, pengembang hanya perlu membuat array baru, mengisinya dengan nilai-nilai yang diperlukan dan menghubungkannya ke button_config.
_creater.scss: @import "vars"; @import "maker"; .button{ @include InitialComponent($button_config); }
Di sini kami mengimpor data dan pembuat tindakan. Kemudian, melalui mixin InitialComponent yang terdaftar di pembuat, kami menginisialisasi semua gaya dengan melewati variabel button_config. Dan inilah keajaibannya. Semua kelas yang diperlukan dibuat sesuai dengan penamaan BM.
Hasil eksekusi akan menjadi gaya:
.button_padding_sm { padding: 5px 20px; } .button_padding_md { padding: 15px 20px; } .button_color_white { color: #ffffff; } .button_background_blue { background: #00e5e5; }
Dan apa keberhasilannya di sini?
Keuntungan dari pendekatan ini tidak segera terasa. Tetapi seiring pertumbuhan proyek, Anda memahami kenyamanan metodologi semacam itu. Jika Anda perlu mengubah warna beberapa tombol pada halaman yang berbeda, Anda tidak perlu mencari kelas dalam banyak gaya. Yang diperlukan hanyalah membuka folder tombol dan sesuai dengan file data dan mengganti gaya yang diinginkan di sana.
Dan jika Anda perlu membuat tombol baru?
Maka itu bahkan lebih mudah, kami menulis gaya yang diperlukan ke dalam array yang sudah disiapkan atau membuat yang baru dan menghubungkannya di sana dalam konfigurasi dan kelas dibuat.
Semua ini sangat nyaman, terutama ketika Anda mentransfer komponen Anda dari proyek ke proyek dan kecepatan gaya penulisan meningkat beberapa kali, hanya menyisakan perasaan nyaman dan kepuasan bahwa proyek dalam urutan penuh.
Pendekatan ini telah berhasil diuji pada banyak proyek dan implementasi metodologi ini akan segera tersedia secara bebas dengan dokumentasi dalam bahasa Rusia dan Inggris.