Ringkasan lima kaedah untuk meningkatkan kebolehselenggaraan fail CSS_Pertukaran pengalaman

1. Uraikan gaya anda

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 kesan. Pada ketika ini, gaya perlu dipecahkan kepada beberapa fail helaian gaya yang berbeza. Lembaran gaya induk di bawah ialah contoh kaedah ini dan tugasnya adalah untuk 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.

/*------------------------------------------ ---------------------------

[Lembaran Gaya Induk]
Projek: Majalah Menghancurkan
Versi : 1.1
Perubahan terakhir: 05/02/08 [pepijat Float tetap, vf]
Ditugaskan kepada: Vitaly Friedman (vf), Sven Lennartz (sl)
Penggunaan utama: Majalah
--- ----- ------------------------------------------------ ----- ---------*/
@import "reset.css";
@import "layout.css"; 🎜>@import " typography.css";
@import "flash.css";
/* @import "debugging.css"; , anda juga boleh menambah fail CSS menaik taraf bendera atau beberapa langkah diagnostik tidak akan diperincikan di sini.

2. Cipta indeks fail CSS

Untuk memahami dengan cepat struktur keseluruhan fail CSS, adalah pilihan yang baik untuk mencipta indeks fail pada permulaan fail. Satu kaedah yang mungkin adalah untuk membina indeks berbentuk pokok: kedua-dua id struktur dan kelas boleh menjadi cabang pokok. Seperti berikut:

/*-------------------------------------- - --------------------------
[Layout]
* badan
+ Tajuk / #header
+ Kandungan / #kandungan
- Lajur kiri / #lajur kiri
- Lajur kanan / #lajur kanan
- Bar sisi / #bar sisi
- RSS / #rss
- Cari / #carian
- Boxes / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigation #navbar
Iklan .ads
Content header h2
————————— — ————————————-*/
Atau boleh jadi begini:

/*---------------- ---------------------------------------------------

[Jadual kandungan]
1. Isi
2.1 lajur / # lajur kiri
3.2. Lajur kanan / #lajur kanan
3.3.3.3.3.3.1. 3. Kotak / .kotak
3.3.4 Sideblog / #sideblog
3.3.5 Iklan / .iklan
4. -- ------------------------------------------------ -- -------*/

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

/*------------------------------------------ --------------------------

[Jadual kandungan]
1 Badan
2 . Header / #header
3 Navigasi / #navbar
4. #sidebar
8. RSS / #rss
9 Cari / #cari
10 Kotak / .kotak
11 13. Pengaki / # pengaki

------------------------------------- ----------- -------------------------*/



/*------------------------ ------------------------------------- ------------- ------
[8. RSS / #rss]
*/
#rss { ... }
#rss img { ... }

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

3. Tentukan warna dan reka letak anda

Kami tidak boleh menggunakan pemalar dalam CSS, tetapi apabila menulis warna dan kod reka letak, kami sering menghadapi kelas yang boleh digunakan berkali-kali pemalar CSS.

Satu cara untuk mengurangkan ketidakpastian definisi pemalar CSS adalah dengan meletakkan beberapa definisi dalam ulasan di bahagian atas fail CSS, iaitu, mentakrifkan pemalar. Salah satu aplikasi paling mudah ialah membuat jadual warna. Dengan cara ini, anda boleh dengan cepat memahami warna keseluruhan halaman, dengan itu mengelakkan beberapa kesilapan semasa pengubahsuaian berulang. Jika anda perlu membuat perubahan pada warna, anda boleh mencarinya dengan cepat.

/*------------------------------------------ ---------------------------
# [Kod warna]

# Kelabu gelap (teks): #333333
# Biru Tua (tajuk, pautan) #000066
# Biru Pertengahan (tajuk) #333399
# Biru muda (navigasi atas) #CCCCFF
# Kelabu pertengahan: #666666
# */

Sebagai alternatif, anda boleh memilih untuk menerangkan warna yang digunakan dalam reka letak anda. Untuk warna tertentu, anda boleh menyenaraikan blok yang menggunakan warna tersebut. Sudah tentu, anda juga boleh memilih untuk menyenaraikan warna mengikut elemen halaman.

/*------------------------------------------ ---------------------------
[Kod warna]
Latar belakang: #ffffff (putih)
Kandungan : #1e1e1e (hitam cerah)
Tajuk h1: #9caa3b (hijau)
Tajuk h2: #ee4117 (merah)
Kaki: #b5cede (hitam gelap)

a (standard) : #0040b6 (biru tua)
a (dilawati): #5999de (biru muda)
a (aktif): #cc0000 (merah jambu)
------------ --------------------------------------------------- ---* /

mempunyai contoh yang sama untuk reka letak.

/*------------------------------------------ ---------------------------
[Tipografi]

Salinan badan: 1.2em/1.6em Verdana , Helvetica, Arial, Geneva, sans-serif;
Tajuk: 2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif; Geneva, Arial, sans -serif;
Tajuk bar sisi: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif;

Nota: menurunkan tajuk sebanyak 0.4em dengan setiap tahap tajuk berikutnya ----- ------------------------------------------------ ----- ----------*/

4 Memformat sifat CSS

Apabila kita menulis kod, menggunakan beberapa gaya pengekodan khas akan meningkatkan kebolehbacaan CSS. kod. Kebolehbacaan banyak membantu. Ramai orang mempunyai gaya pengekodan yang berbeza. Sesetengah orang terbiasa mendahulukan warna dan kod fon, manakala yang lain lebih suka meletakkan atribut yang lebih "penting" seperti terapung dan kedudukan dahulu. Begitu juga, elemen halaman boleh diisih mengikut strukturnya dalam reka letak:

badan,
h1, h2, h3,
p, ul, li,
bentuk {
sempadan : 0;
margin: 0;
padding: 0;
}

Sesetengah pembangun menggunakan kaedah yang lebih menarik: mereka meletakkan sifat dalam susunan abjad. Perlu diingat bahawa pendekatan sedemikian boleh menyebabkan masalah dengan beberapa pelayar.

Tidak kira apa format anda, anda perlu memastikan anda telah mentakrifkan kaedah pemformatan ini dengan jelas. Dengan cara ini, rakan sekerja anda akan menghargai usaha anda apabila mereka membaca kod anda.

5. Lekukan akan menjadi rakan anda!

Untuk menjadikan kod anda berasa lebih intuitif, anda boleh menggunakan satu baris untuk menentukan gaya elemen garis besar. Kaedah ini akan menyebabkan kekeliruan apabila terdapat lebih daripada tiga atribut dalam pemilih yang ditentukan. Walau bagaimanapun, apabila digunakan secara sederhana, anda boleh membezakan dengan jelas perbezaan dalam kelas yang sama.

#lajur utama { paparan: sebaris; lebar: 30em; -bawah: 20px; }
#main-column p { color: #333; }

Pada masa yang sama, penyelenggaraan pengubahsuaian gaya juga merupakan masalah yang menyusahkan. Ramai orang melupakannya selepas mengubah suai gaya Akibatnya, mereka kemudiannya mendapati gaya yang diubah suai menyebabkan ralat halaman dan mereka perlu mencarinya dengan bersungguh-sungguh. Oleh itu, adalah perlu untuk membina format khas untuk gaya yang diubah suai. Cara yang sangat mudah ialah dengan mengenden gaya yang diubah suai Pada masa yang sama, anda juga boleh menggunakan beberapa ulasan (seperti "@baru") untuk membuat tanda.

#bar sisi ul li a {
paparan: blok;
warna latar: #ccc;
bawah sempadan: 1px pepejal #999; margin: 3px 0 3px 0;
padding: 3px; /* @new */
}

Secara umumnya, hanya mencipta panduan gaya yang betul akan menjadikan helaian gaya boleh dibaca Seks. Ingat untuk mengalih keluar mana-mana panduan gaya yang tidak membantu anda memahami dokumen dan elakkan menggunakan terlalu banyak panduan gaya untuk terlalu banyak elemen. Kemudian, bekerja keras untuk fail CSS yang boleh dibaca dan diselenggara.