Pedoman tinjauan kode untuk CSS, JS dan HTML

Saya telah diminta untuk membuat pedoman untuk ulasan CSS, JS dan HTML. Saya tahu ada pedoman pengkodean untuk JS tetapi saya tidak tahu tentang HTML dan CSS. Untuk meninjau JS saya pasti akan mengikuti pedoman itu dan menyebutkannya. Tetapi bagaimana dengan CSS dan HTML? Terlepas dari kesalahan logis dan masalah indentasi, apakah ada hal-hal spesifik yang perlu saya periksa ketika saya meninjau markup dan atau CSS?

Beberapa hal yang harus dicari:

• Apakah informasi terstruktur diidentifikasi menggunakan tag HTML yang sesuai? H1- H6untuk judul, UL/ OLdan LIuntuk daftar, dll?
• Apakah ada tag warisan HTML ( <b>, <i>, <center>, <font>) digunakan?
• Apakah situs menggunakan jumlah markup seminimal mungkin?
• Apakah informasi gaya dieksternalisasi ke file CSS?
• Apakah semua Javascript dieksternalisasi? termasuk penangan acara?
• Apakah nama kelas CSS merujuk ke fungsi di halaman ( img-caption), dan bukan form ( bold-red) atau konten ( pink-elephant)?
• Apakah gambar dalam format yang sesuai (PNG atau JPEG, tergantung jenisnya)?
• Sudahkah versi perpustakaan Javascript yang diperkecil digunakan?
• Secara opsional, apakah semua file Javascript dan CSS yang dikembangkan secara lokal telah diperkecil?
• Apakah HTML / CSS divalidasi?
• Apakah YSlow (atau serupa) telah digunakan untuk memeriksa / mengoptimalkan kinerja?
• (kebanyakan) [SEO] Apakah situs yang dapat diakses dengan Javascript dimatikan?
• [SEO] Apakah konten paling relevan ditemukan di bagian atas HTML?

Salah satu elemen penting dari gaya yang baik dalam HTML adalah peningkatan progresif . Ini berarti bahwa tata letak HTML akan menghasilkan yang baik bahkan tanpa CSS atau JavaScript. Kemudian, setelah JS / CSS diproses, itu akan terlihat lebih baik (misalnya <select>dropdown HTML gaya lama akan menjadi animasi).

Ini juga ada hubungannya dengan markup non-intrusif. Alih-alih <font style="color:red;font-size:16pt">Hello</font>satu akan menggunakan <div class="red-colored-big-fond">Hello</div>.

Sama dengan JavaScript. Alih-alih <button onclick="javascript:alert('a');">Clickme</button>satu akan menentukan kelas tombol / ID dan menargetkannya dari JavaScript. Ini juga membuat kode markup Anda lebih mudah dipelihara.

Validasi bahwa jumlah markup paling sedikit digunakan untuk menyelesaikan tugas. Pastikan markup juga semantik, jangan gunakan ketika tag melakukan hal yang persis sama dan memberikan lebih banyak informasi. Validasi bentang yang tidak dibuat elemen blok dan sebaliknya.

Selain itu, alex memunculkan poin yang bagus secara tidak langsung. Pastikan tidak ada yang menggunakan nama kelas seperti "font merah-besar-warna", karena sekitar 20 detik setelah itu digunakan seseorang akan mengubahnya menjadi font biru kecil. Saya sebenarnya telah melihat CSS ini:

.arial12pt { font-family: Verdana; font-size: 8pt; }

Segala sesuatu di markup Anda harus menggambarkan seperti apa halaman itu, bukan seperti apa tampilannya. Saya pasti setuju tentang peningkatan progresif, tetapi sekali lagi secara tidak langsung. Halaman tidak memiliki persyaratan untuk mencari di mana saja dekat dengan yang sama dengan CSS tanpa itu. Jangan mencoba membuatnya terlihat sama, karena Anda akan berakhir di table-land dan spacer.gif.

Sejauh HTML berjalan, saya selalu membuat titik untuk memiliki hierarki dan lekukan dalam file saya. Sebagai contoh, jika saya memiliki banyak divs:

<div id="content">
   <div id="post">
     <div class="title">
       Blah Blah Title
     </div>
   </div>
</div>

Saya kira itu cukup jelas bagi kebanyakan orang yang membuat tata letak dan template, tetapi lebih sering daripada tidak saya hanya melihat HTML kacau yang tidak memiliki hierarki struktural apa pun, sehingga sulit dibaca untuk orang lain. Saya kira berasal dari latar belakang CS yang lebih banyak, ini adalah sesuatu yang melekat di pikiran saya. Hal yang sama berlaku untuk CSS juga. Katakanlah Anda sedang menata div:

#whatever{
    background-image: url('blah.gif');
    color: #FFF000;
}

Lekukan membuatnya jauh lebih mudah untuk dibaca dengan cepat ketika Anda terbiasa dengan bahasa lain yang dicampur seperti PHP / Ruby / Terserah. Sekali lagi, itu tergantung pada bagaimana Anda bekerja terbaik, tetapi ketika orang lain membaca HTML saya, saya ingin membuatnya benar-benar terorganisir :).

Juga, seperti dikatakan di atas, itu selalu merupakan ide bagus untuk menamai kelas CSS Anda dan id nama yang relevan dengan tata letak Anda, terutama ketika itu menjadi berbulu (seperti variabel penamaan dan metode dalam bahasa lain). Hal lain yang harus diperhatikan adalah "tebak dan periksa" margin, paddings, dan masalah penyelarasan lainnya. Sesuatu yang sering saya coba hindari adalah menempatkan angka negatif di margin dan bantalan saya. Ini bisa membingungkan jika Anda tidak membuat tata letak sendiri dan jika Anda ingin kembali lagi nanti dan memodifikasinya, Anda mungkin harus merombaknya. Menurut pendapat saya itu selalu merupakan ide yang baik untuk tidak mencoba apa pun tipu atau "kludgy" di CSS, bahkan jika itu terlihat bagus; biasanya ada cara yang lebih baik untuk melakukannya, bahkan jika Anda harus merestrukturisasi CSS Anda!

Untuk Javascript saya selalu ingin memvalidasi dengan JSLint, saya bisa memikirkan begitu banyak bug yang ditangkap JSLint yang tidak menggunakannya hanya gila.

Saya menemukan dokumen standar ini yang agak saya sukai. Saya juga akan menggemakan apa yang dikatakan tentang peningkatan progresif. Secara umum, jika orang lain menulis HTML / CSS, Anda harus dapat melihatnya nanti dan terkejut betapa buruknya markup itu dan harus dapat membuat tweak gaya sederhana dengan mudah dan efisien.