12 Petua untuk Pertukaran Pengoptimuman_Pengalaman Kod CSS

1.ID Rules
2.Class Rules
3. Tag Rules
4. General Rules
Pemahaman umum tentang kecekapan datang daripada "Pembinaan Laman Web Berprestasi Tinggi" yang diterbitkan oleh Steve Souders dalam 2009 Bermula dengan "Panduan Lanjutan", walaupun buku itu menyenaraikannya dengan lebih terperinci, anda juga boleh melihat senarai rujukan lengkap di sini, atau anda boleh melihat butiran lanjut dalam "Amalan Terbaik untuk Pemilih CSS Cekap" Google.
Dalam artikel ini saya ingin berkongsi beberapa contoh dan garis panduan mudah yang saya gunakan dalam menulis CSS berprestasi tinggi. Ini diilhamkan oleh panduan CSS cekap yang ditulis oleh MDN dan mengikut format yang serupa.

1. Elakkan sekatan yang berlebihan

Peraturan am, jangan tambah kekangan yang tidak perlu.

Salin kod Kodnya adalah seperti berikut:

// Oops
ul#someid {.. }
.menu#otherid{..}

// Okay
#someid {..}
#otherid {..}

2. Pemilih turunan adalah yang paling teruk

Bukan sahaja prestasinya rendah, tetapi kodnya juga rapuh perubahan struktur kod html, CSS juga mesti diubah suai Betapa buruknya ini, terutamanya dalam syarikat besar, orang yang menulis HTML dan CSS selalunya bukan orang yang sama.

Salin kod Kodnya adalah seperti berikut:

// Memang payah
html div tr td {..}

3. Elakkan pemilih rantai (persimpangan)

Ini adalah serupa dengan situasi kekangan yang berlebihan Pendekatan yang lebih wajar adalah dengan hanya mencipta pemilih kelas CSS yang baharu.

Salin kod Kod adalah seperti berikut:

// Op
.menu. left.icon {..}

// Okay
.menu-left-icon {..}

4. Patuhi prinsip KISS

Bayangkan kami mempunyai DOM berikut:

Salin kod Kodnya adalah seperti berikut:

 
• Twitter a>

 
• Facebook

 
• Dribbble

Berikut ialah peraturan yang sepadan...

Salin kod Kod adalah seperti berikut:

// Op
#navigator li a {..}

// Okay
#navigator {..}

5 Gunakan sintaks kompaun (padat)

Gunakan sintaks kompaun apabila boleh.

Salin kod Kod adalah seperti berikut:

// Oops
.someclass {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
background: #000;
background-image : url( ../imgs/carrot.png);
latar belakang-kedudukan: bawah;
latar belakang-ulang: ulang-x;
}

// Okay
. someclass {
padding: 20px 10px 20px 10px;
latar belakang: #000 url(../imgs/carrot.png) repeat-x bawah;
}

6. Elakkan ruang nama yang tidak diperlukan

Salin kod Kod adalah seperti berikut:

// Op
.someclass table tr.otherclass td.somerule {..}

//Okay
.someclass .otherclass td.somerule {.. }

7. Elakkan pengulangan yang tidak perlu

Gabungkan peraturan berulang sebanyak mungkin.

Salin kod Kod adalah seperti berikut:

// Op

.someclass {
warna: merah;
latar belakang: biru;
saiz fon: 15px;
}

.kelas lain {
warna: merah;
latar belakang: biru;
saiz fon: 15px;
}

// Okay

.someclass, . kelas lain {
warna: merah;
latar belakang: biru;
saiz fon: 15px;
}

Perkemaskan peraturan sebanyak mungkin
Berdasarkan peraturan di atas, anda boleh menggabungkan peraturan berulang lagi dalam kategori berbeza.

Salin kod Kod adalah seperti berikut:

// Oops
.someclass {
warna: merah;
latar belakang: biru;
tinggi: 150px;
lebar: 150px;
saiz fon: 16px;
}

.kelas lain {
warna: merah;
latar belakang: biru;
tinggi: 150px;
lebar: 150px;
saiz fon: 8px;
}

// Okay
.someclass, .otherclass {
warna: merah;
latar belakang: biru;
tinggi: 150px;
lebar: 150px;
}

.someclass {
saiz fon: 16px;
}

.kelas lain {
saiz fon: 8px;
}

9 kekaburan Konvensyen penamaan
adalah yang terbaik untuk menggunakan nama semantik. Nama kelas CSS yang baik harus menerangkan sifatnya dan bukannya rupanya.
10 Elakkan !penting
Malah, anda juga sepatutnya boleh menggunakan pemilih berkualiti tinggi yang lain.

11 Ikut perintah pengisytiharan standard

Walaupun terdapat beberapa cara biasa untuk mengatur susunan sifat CSS, di bawah ialah cara popular yang saya ikuti.

Salin kod Kod adalah seperti berikut:

.someclass {
/* Kedudukan */
/* Model Paparan & Kotak */
/* Gaya latar belakang dan tipografi */
/* Peralihan */
/* Lain-lain */
}

12. Format kod yang teratur
Kebolehbacaan kod adalah berkadar terus dengan kemudahan kebolehselenggaraan. Di bawah adalah kaedah pemformatan yang saya ikuti.

Salin kod Kod adalah seperti berikut:

// Oops
.someclass- a, . someclass-b, .someclass-c, .someclass-d {
...
}

// Okay
.someclass-a,
.someclass- b,
.someclass-c,
.someclass-d {
...
}

// Amalan baik
.someclass {
imej latar belakang :
Linear-Gradient ( #000, #ccc),
Linear-Gradient (#CCC, #DDD); 1px 1px 1px #ddd inset;
}



Jelas sekali, ini hanyalah segelintir peraturan yang saya cuba ikuti dalam CSS saya sendiri untuk menjadi lebih cekap dan boleh diselenggara. Jika anda ingin membaca lebih lanjut, saya syorkan membaca Panduan MDN untuk Menulis CSS Cekap dan Panduan Google untuk Mengoptimumkan Rendering Penyemak Imbas.