Panduan untuk Meningkatkan Kebolehselenggaraan dan Kebolehbacaan Fail CSS Halaman 1/2_Pertukaran Pengalaman

Jadi, kod yang tersusun dengan baik boleh mengoptimumkan kebolehselenggaraannya pada tahap yang besar. Di bawah disenaraikan empat petua untuk meningkatkan kebolehselenggaraan fail CSS, sebagai panduan untuk menjalankan pembangunan bahagian hadapan WEB dengan tabiat organisasi gaya CSS yang lebih baik.

1. Penguraian fail gaya CSS

Untuk projek kecil, sebelum menulis kod, bahagikan kod kepada beberapa blok mengikut struktur halaman atau kandungan halaman dan berikan ulasan . Sebagai contoh, anda boleh memisahkan gaya global, reka letak, gaya fon, borang, ulasan dan lain-lain ke dalam beberapa blok berbeza untuk terus berfungsi.

Untuk projek yang lebih besar, ini jelas tidak akan memberi sebarang kesan. Pada ketika ini, gaya perlu dipecahkan kepada beberapa fail helaian gaya yang berbeza. Lembaran gaya induk di bawah ialah contoh pendekatan ini dan tugas utamanya ialah mengimport fail gaya lain. Menggunakan kaedah ini bukan sahaja boleh mengoptimumkan struktur gaya, tetapi juga membantu mengurangkan beberapa permintaan pelayan yang tidak perlu. Terdapat banyak cara untuk menguraikan fail dan lembaran gaya induk menggunakan yang paling biasa.



@import "reset.css?1.1.5";
@import "layout.css?1.1.5";
@import "colors.css?1.1 .5";
@import "typography.css?1.1.5";
@import "flash.css?1.1.5";
/* @import "debugging.css?1.1.5" ; */


Pada masa yang sama, untuk projek besar, anda juga boleh menambah bendera peningkatan untuk fail CSS atau beberapa diagnostik dan langkah lain, yang tidak akan diperincikan di sini. Sila beri perhatian kepada rumusan dan pemikiran semasa kerja pelaksanaan, dan anda juga dialu-alukan untuk merujuk artikel berkaitan jb51.net.

2. Indeks fail CSS
Untuk memahami dengan cepat struktur keseluruhan fail CSS, adalah pilihan yang baik untuk mencipta indeks fail pada permulaan fail .
Kaedah yang boleh dilaksanakan ialah membina indeks berbentuk pokok Id dan kelas struktur boleh menjadi cabang pokok.
[Layout]
* body
+ Header / #header
+ Content / #content
- Lajur kiri / #leftcolumn
- Lajur kanan / #rightcolumn
- Sidebar / #sidebar
- RSS / #rss
- Cari / #search
- Kotak / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigasi #navbar
Iklan .iklan
Pengepala kandungan h2

Atau boleh jadi seperti ini:
[Kandungan]
1 Badan
2. Navigasi / #navbar
3. Kandungan / #kandungan
3.1 / # rss
3.3.2. Carian / #carian
3.3.3 Kotak / .kotak
3.3.4.blog sampingan
3.3.5 4. Footer / #footer


Cara lain ialah dengan menyenaraikan kandungan terlebih dahulu, tanpa lekukan. Dalam contoh di bawah, jika anda perlu melompat ke bahagian RSS anda hanya perlu melakukan carian mudah.

[Kandungan]
1 Badan
2. Tajuk / #header
3. #navbar
4. #leftcolumn
6. Lajur kanan / #rightcolumn
7 Sidebar / #sidebar
8 RSS / #rss
9 >11. Sideblog / #sideblog
12. Iklan / .ads
13 #rss { ... }
#rss img { ... }

Mentakrifkan pengambilan gaya sedemikian dengan berkesan boleh memudahkan orang lain membaca dan mempelajari kod anda. Apabila bekerja pada projek besar, anda juga boleh mencetak carian untuk rujukan mudah apabila membaca kod.