Panduan untuk menulis spesifikasi kod HTML dan CSS yang fleksibel, stabil, berkualiti tinggi_HTML/Xhtml_Pengeluaran halaman web

Peraturan Emas
Sentiasa ikut set standard pengekodan yang sama Tidak kira berapa ramai orang yang bekerja pada projek yang sama, pastikan setiap baris kod kelihatan seperti ditulis oleh orang yang sama.

1. Tatabahasa:
1. Gunakan dua ruang untuk menggantikan aksara tab
2 . Untuk definisi atribut, pastikan anda menggunakan petikan berganda, jangan sekali-kali petikan tunggal
4. /html5/spec-author-view/syntax.html#syntax-start-tag
) dengan jelas menyatakan bahawa ini adalah pilihan 5 Jangan tinggalkan teg penutup pilihan pengisytiharan mod ke baris pertama setiap halaman HTML untuk memastikan bahawa satu dipaparkan dalam setiap pelayar

2. Atribut bahasa:

Mengikut spesifikasi HTML5, adalah disyorkan untuk menentukan atribut lang untuk elemen akar HTML untuk menetapkan bahasa yang betul untuk teks alat sintesis menentukan bahasa yang patut digunakan Sebutan , membantu alat terjemahan menentukan peraturan yang harus dipatuhi semasa terjemahan, dll. senarai atribut lang: http://www.sitepoint.com/web-foundations/iso-2-letter -kod-bahasa/
3. Mod keserasian IE:

IE menyokong penggunaan teg khusus untuk menentukan versi IE yang perlu digunakan oleh halaman semasa resit Melainkan terdapat keperluan yang kuat, sebaiknya ditetapkan ia ke mod tepi. Oleh itu, memutuskan IE untuk menggunakan mod terkini yang disokongnya.
4. Pengekodan aksara:

Dengan mengisytiharkan pengekodan aksara, ia boleh memastikan penyemak imbas boleh dengan cepat dan mudah menentukan kaedah pemaparan kandungan halaman Ini boleh mengelakkan penggunaan teg entiti aksara HTML, oleh itu Semua selaras dengan pengekodan dokumen.
5. Import fail css dan JavaScript:

Mengikut spesifikasi HTML5, secara amnya tidak perlu menentukan atribut jenis semasa memperkenalkan fail css dan JavaScript, kerana teks/css dan teks/ javascript ialah nilai Lalai masing-masing.
6. Kepraktisan adalah raja:

Cuba ikut standard dan semantik HTML, tetapi jangan mengorbankan kepraktisan Cuba gunakan teg yang paling sedikit dan kekalkan kerumitan minimum pada setiap masa 7. Susunan atribut:

Atribut HTML hendaklah disusun mengikut susunan berikut untuk memastikan kebolehbacaan kod:

1.class2.id,name　 3.data-*　
4.src,for,type,href　　
5.title,alt　　
6.Aria,role　
kelas digunakan untuk menandakan komponen yang sangat boleh digunakan semula, jadi ia sepatutnya tersusun Di bahagian atas.


8 Kurangkan bilangan teg

Apabila menulis kod HTML, cuba elakkan unsur induk berlebihan Banyak kali, ini memerlukan lelaran dan pemfaktoran semula untuk dicapai.

9. Teg yang dihasilkan oleh JavaScript

Teg yang dijana oleh JavaScript menyukarkan untuk mencari dan mengedit kandungan, dan elakkan jika boleh

10. Sintaks CSS:

1 Gunakan dua ruang untuk menggantikan aksara tab (tab

2 🎜>3. Untuk kebolehbacaan kod, tambahkan ruang antara pendakap kerinting kiri setiap blok pengisytiharan; Ruang hendaklah disisipkan selepasnya; koma bertitik selepas pernyataan adalah pilihan, tetapi jika anda meninggalkan koma bertitik ini, kod mungkin lebih mudah untuk ditulis 8 Untuk nilai atribut yang dipisahkan koma, ruang harus disisipkan selepas setiap koma; nilai atau parameter warna, tinggalkan 0 di hadapan perpuluhan kurang daripada 1 (contohnya, .5 bukannya 0.5 Nilai perenambelasan harus semuanya huruf kecil, contohnya: #fff, cuba gunakan nilai asas bentuk perenambelasan, contohnya, gunakan #fff dan bukannya #ffffff
11 unit untuk 0 nilai, contohnya, gunakan margin:0 dan bukannya margin:0px.


11. Perintah pengisytiharan:


Pengisytiharan harta berkaitan hendaklah dikumpulkan bersama dan disusun mengikut susunan berikut:

1. kedudukan(kedudukan: mutlak; atas: 0; bawah: 0; kanan: 0; kiri: 0; z-indeks: 100;); 2. model kotak (paparan: blok; apungan: kiri ; lebar: 100px; tinggi: 100px;);
3.typographic(font: biasa 13px "Microsoft YaHei"; line-height: 1.5em; color: #333; text-align:center;); 4.visual(latar belakang: kuning; sempadan: 1px pepejal #c00; jejari sempadan: 3px; kelegapan: 1; );
　
Elemen boleh dialih keluar daripada aliran dokumen biasa disebabkan kedudukan, dan Ia juga boleh meliputi gaya yang berkaitan dengan model kotak, jadi ia berada di kedudukan pertama Model kotak berada di kedudukan kedua, kerana ia menentukan saiz dan kedudukan komponen pengetahuan lain mempengaruhi bahagian dalam komponen atau tidak menjejaskannya Oleh itu, dua set atribut diletakkan di belakang.

12. Jangan gunakan @import　
Berbanding dengan teg, arahan @import ini bukan sahaja meningkatkan bilangan permintaan tambahan, tetapi juga menyebabkan masalah yang tidak dapat diramalkan Berikut adalah beberapa:
1. Gunakan berbilang elemen
2 Tukarkan berbilang fail css kepada satu fail melalui prapemproses yang serupa dengan sass atau kurang melalui rel, jekyll atau lain-lain fungsi penggabungan fail css.

13. Kedudukan pertanyaan media
Letakkan pertanyaan media sedekat mungkin dengan peraturan yang berkaitan Jangan bungkusnya dalam satu fail gaya atau letakkannya di Bawah dokumen.

14 Atribut awalan: Apabila menggunakan atribut awalan pengeluar tertentu, adalah mudah untuk mengunci nilai setiap atribut dalam arah menegak Untuk contoh:

Kod CSSSalin kandungan ke papan keratan

1. .pemilih { 　　　
3. - webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15 ); 　　　　
5. 　　　　　　bayang-kotak: 0 1px 2px rgba(0,0,0, >
}

15. Pengisytiharan peraturan satu baris:

Untuk gaya yang nilainya mengandungi satu pengisytiharan, demi kebolehbacaan dan pengeditan pantas, adalah disyorkan untuk meletakkan pernyataan pada baris yang sama gaya dengan gaya pengisytiharan berbilang, pengisytiharan masih harus dibahagikan kepada berbilang baris Faktor utama dalam melakukan ini adalah untuk pengesanan ralat Sebagai contoh, terdapat ralat sintaks dalam pengesah css pada baris 180. Jika ia adalah satu baris dan. satu pengisytiharan, anda tidak akan mengabaikan ralat ini Jika terdapat berbilang pernyataan pada satu baris, anda perlu menganalisisnya dengan teliti untuk mengelakkan ralat hilang.

16. Nesting in Less and Sass

Elakkan sarang yang tidak perlu Ini kerana walaupun anda boleh menggunakan nesting, ini tidak bermakna anda harus menggunakan Nesting hanya apabila gaya mestilah terhad kepada elemen induk (iaitu, pemilih keturunan), dan terdapat berbilang elemen yang perlu disarangkan
17 Ulasan:

Kod ditulis dan diselenggara oleh orang lain Pastikan kod anda menerangkan diri, diulas dengan baik dan mudah difahami oleh orang lain dan tujuan kod; Jangan hanya menyatakan semula nama komponen atau kelas; Untuk ulasan yang lebih panjang, pastikan anda menulis ayat yang lengkap dan untuk ulasan umum, anda boleh menulis frasa pengenalan.


18. Penamaan kelas

Hanya aksara kecil dan sempang boleh muncul dalam nama kelas (bukan garis bawah atau huruf besar harus digunakan untuk menamakan kelas yang berkaitan (serupa dengan ruang nama , seperti . btn dan .btn-bahaya) Elakkan singkatan yang terlalu sewenang-wenangnya .btn mewakili butang, tetapi .s tidak boleh menyatakan sebarang makna; , gunakan nama tersusun atau bertujuan, jangan gunakan nama ekspresif Awalan kelas baharu berdasarkan kelas terbaharu atau kelas asas
Gunakan kelas .js-* untuk mengenal pasti gelagat (berbanding dengan gaya), dan lakukan; tidak memasukkan kelas ini ke dalam fail css
Anda juga boleh merujuk kepada spesifikasi yang disenaraikan di atas apabila menamakan pembolehubah sass dan kurang.


19.

Gunakan kelas untuk elemen biasa, yang akan membantu mengoptimumkan prestasi pemaparan

Untuk komponen yang kerap berlaku, elakkan menggunakan pemilih atribut (contohnya: [class^ ="· ··"]), prestasi penyemak imbas akan dipengaruhi oleh faktor-faktor ini;

Buat pemilih sesingkat mungkin dan cuba hadkan bilangan elemen yang membentuk pemilih. Adalah disyorkan agar tidak melebihi 3; Hanya hadkan kelas kepada elemen induk terdekat apabila perlu
20. Organisasi kod:

Atur segmen kod dalam unit komponen
Tentukan spesifikasi ulasan yang konsisten

Gunakan ruang kosong yang konsisten untuk memisahkan kod ke dalam blok, jadi Sesuai untuk mengimbas lebih besar; dokumen;

Jika berbilang fail css digunakan, bahagikannya kepada komponen dan bukannya halaman, kerana halaman akan disusun semula dan komponen hanya akan dialihkan. Di atas ialah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang dalam menulis kod HTML dan CSS yang standard, fleksibel, stabil dan berkualiti tinggi.

Teks asal:
http://www.cnblogs.com/codinganytime/p/5258223.html