Pemikiran saya tentang kerangka CSS dan modul CSS selalu kabur, dan saya sepenuhnya mengikuti tren. Masalah yang saya temui di tempat kerja akhir-akhir ini memaksa saya untuk memperhatikan masalah ini. Saya terbiasa dengan satu orang yang melakukan segalanya, merencanakan-merancang-menerbitkan halaman. Ketika sebuah proyek memerlukan banyak orang untuk berkolaborasi dan menyelesaikannya dalam waktu singkat, perencanaan file gaya, pemikiran modul dan kerangka kerja CSS sangatlah penting.
Pertanyaan berikut mengganggu saya baru-baru ini: Jika beberapa orang bekerja di meja depan sebuah situs web pada saat yang sama, bagaimana cara mendistribusikannya sehingga gaya seluruh situs web menyatu, struktur file gaya masuk akal, ada tidak ada duplikasi dan redundansi, dan efisiensinya paling tinggi? Saya berkonsultasi dengan beberapa teman sekelas, dan jawaban yang saya peroleh dirangkum sebagai berikut: Dalam hal penyatuan gaya, kami berdiskusi bersama untuk membuat sketsa terlebih dahulu, dan satu orang membuat halaman gaya standar berdasarkan sketsa tersebut, kemudian kami mulai bekerja sama, dan sisanya adalah modifikasi terus-menerus. Dalam hal produksi, beberapa file css berbeda diatur untuk seluruh situs, dan setiap orang bertanggung jawab atas file gaya yang berbeda.
Apa yang mudah diucapkan, tidak akan mudah jika diterapkan. Kalau soal desain, saya masih tidak berani mengambil risiko. Untungnya, halamannya tidak banyak. Totalnya kurang dari 20 halaman tingkat pertama dan kedua, dan satu orang bisa menanganinya. Beritahu kami tentang proses produksinya.
(1) Standarisasi penamaan CSS, urutan penulisan dan komentar.
Belum lagi pentingnya poin ini, sulit untuk membayangkan betapa membingungkannya jika beberapa metode penamaan yang "sangat dipersonalisasi" muncul di style sheet pada saat yang bersamaan. Penamaan dapat menggunakan sambungan simbol "-", "_" di tengah, seperti text-box, text-content, text_box, atau penulisan huruf besar dan kecil "hump case", textBox, textContent, dan sebagainya. Komentar sangat penting. Komentar dapat dibagi menjadi tiga tingkatan. Kategori komentar utama digunakan untuk membagi blok CSS, seperti anotasi kategori kedua, anotasi modul lokal, dan anotasi kategori ketiga dijelaskan dalam pemilih. Gunakan Komentar atau retas komentar pada beberapa efek khusus. Format penulisannya dapat menggunakan lekukan horizontal untuk menunjukkan hubungan yang bersifat hierarki.
(2) Menentukan pembagian struktur style sheet berdasarkan renderingnya
Ada banyak perkenalan di Internet tentang pembagian struktur file CSS, yang umumnya hanya beberapa file: layout.css/main.css/footer.css/header.css/reset.css, dll. Semua orang mengatakan itu mereka pandai dalam hal itu, dan mereka harus mempraktikkannya sebelum diterapkan. Pahami, tidak ada yang terbaik, yang ada hanya yang paling cocok. Pembagian gaya terbaik harus bergantung erat pada struktur HTML itu sendiri, bukan bersifat universal.
Selain memfasilitasi pembagian kerja dan kolaborasi di masa depan, distribusi file CSS juga memiliki poin yang sangat penting: jika byte-nya kecil, mereka dapat dikompresi sebanyak mungkin untuk mengurangi jumlah koneksi bersamaan berukuran besar, keduanya dapat dibagi untuk mencegah kecepatan pengunduhan menjadi terlalu lambat dan memengaruhi pemuatan Style. Ini adalah permasalahan spesifik yang perlu ditangani berdasarkan kasus per kasus. Misalnya, untuk halaman yang sering dikunjungi seperti mesin pencari dan halaman beranda portal, yang terbaik adalah menulis css di dalam halaman tersebut.
Tentukan terlebih dahulu struktur gaya css:
Contoh Kode Sumber
reset.css /*Isi ulang gaya halaman*/
header.css /*Gaya header seluruh situs*/
footer.css /*Gaya footer situs lengkap*/
public.css /*Gaya modul publik untuk keseluruhan situs*/
index.css /*Gaya unik laman beranda*/
container.css /*Level 2 dan gaya bodi di bawahnya*/
print.css /*Gaya cetak*/
ie.css /*IE hack*/
(3) Pembagian kerja dan kolaborasi
Panggung telah disiapkan dan nyanyian akan dimulai. Temukan semua daftar teks publik dan daftar gambar dan teks campuran. Satu orang bertanggung jawab menulis di modul publik, masing-masing satu orang untuk kepala dan ekor, dan satu orang untuk bingkai halaman sekunder. Bagian yang dipersonalisasi dibiarkan sampai akhir.
Masih banyak masalah dalam pengoperasian sebenarnya. Redundansi kode tidak dapat dihindari dan hanya dapat diminimalkan. Terkadang pengorbanan harus dilakukan agar menjadi efisien. Di atas hanyalah sedikit pengalaman saya dalam bekerja. Ini juga merupakan pertama kalinya kami benar-benar mengeksplorasi keunggulan modularitas CSS: mudah dimodifikasi, mudah dikelola, dan mudah untuk kolaborasi multi-orang. Nantikan pembahasannya dengan para ahli.