Setelah menyelesaikan pekerjaan front-end, banyak orang melupakan struktur dan detail proyek. Namun, kode tersebut tidak akan segera diselesaikan sepenuhnya. Akan ada pekerjaan pemeliharaan berkelanjutan selama sisa waktu, dan pekerjaan ini mungkin tidak dapat diselesaikan sendiri. Oleh karena itu, kode yang terstruktur dengan baik dapat mengoptimalkan pemeliharaannya. Berikut adalah lima cara untuk meningkatkan pemeliharaan file CSS Anda, yang merupakan panduan gaya CSS yang lebih baik.
1. Hancurkan gaya Anda
Untuk proyek kecil, sebelum menulis kode, bagilah kode menjadi beberapa blok sesuai dengan struktur halaman atau konten halaman dan berikan komentar. Misalnya, Anda dapat memisahkan gaya global, tata letak, gaya font, formulir, komentar, dan lainnya ke dalam beberapa blok berbeda untuk terus bekerja.
Untuk proyek yang lebih besar, hal ini jelas tidak akan berpengaruh apa pun. Pada titik ini, style perlu dipecah menjadi beberapa file style sheet yang berbeda. Master stylesheet di bawah ini adalah contoh pendekatan ini, dan tugas utamanya adalah mengimpor file gaya lainnya. Menggunakan metode ini tidak hanya dapat mengoptimalkan struktur gaya, tetapi juga membantu mengurangi beberapa permintaan server yang tidak diperlukan. Ada banyak cara untuk menguraikan file, dan master stylesheet menggunakan cara yang paling umum.
/*------------------------------------------------ ------------------------------ [Lembar Gaya Utama] |
Pada saat yang sama, untuk proyek besar, Anda juga dapat menambahkan tanda pemutakhiran untuk file CSS atau beberapa tindakan diagnostik, yang tidak akan dijelaskan secara rinci di sini.
2. Buat indeks file CSS
Untuk memahami dengan cepat struktur keseluruhan file CSS, merupakan pilihan yang baik untuk membuat indeks file di awal file. Salah satu metode yang mungkin adalah dengan membangun indeks berbentuk pohon: id struktural dan kelas dapat menjadi cabang pohon. sebagai berikut:
| /*------------------------------------------------ ------------------------------ [Tata Letak] * tubuh + Tajuk / #tajuk + Konten / #konten - Kolom kiri / #kolom kiri - Kolom kanan / #kolom kanan - Bilah Samping / #bilah samping - RSS / #rss - Pencarian / #pencarian - Kotak / .kotak - Blog Samping / #sideblog + Catatan kaki / #catatan kaki Navigasi #navbar Iklan .ads Tajuk konten h2 --------------------------------------------------*/ |
Atau bisa juga dengan cara:
/*------------------------------------------------ ------------------------------ [Daftar isi] --------------------------------------------------- ------------------*/ |
Cara lainnya adalah dengan mencantumkan konten terlebih dahulu, tanpa lekukan. Pada contoh di bawah ini, jika Anda perlu melompat ke bagian RSS Anda cukup mencari 8.RSS.
/*------------------------------------------------ ------------------------------ [Daftar isi] --------------------------------------------------- ------------------*/ /*------------------------------------------------ ------------------------------ |
Mendefinisikan pencarian gaya seperti itu dapat secara efektif memudahkan orang lain membaca dan mempelajari kode Anda. Saat mengerjakan proyek besar, Anda juga dapat mencetak pencarian untuk referensi mudah saat membaca kode.