Tidak peduli berapa banyak orang yang mengerjakan proyek yang sama, pastikan setiap baris kode terlihat seperti ditulis oleh orang yang sama.
1. Gunakan dua spasi sebagai pengganti tab - ini adalah satu-satunya cara untuk memastikan tampilan yang konsisten di semua lingkungan.
2. Elemen yang disarangkan harus diberi indentasi satu kali (yaitu dua spasi).
3. Untuk definisi atribut pastikan menggunakan tanda kutip ganda dan jangan pernah menggunakan tanda kutip tunggal.
4. Jangan menambahkan garis miring ke elemen yang menutup sendiri – spesifikasi HTML5 dengan jelas menyatakan bahwa ini opsional.
5. Jangan hilangkan tag penutup opsional
<!DOCTYPEhtml> <html> <kepala> <title>Judul halaman</title> </kepala> <tubuh> <img src="gambar/logo-perusahaan.png" alt="Perusahaan"> <h1 class="hello-world">Halo, dunia!</h1> </tubuh> </html>
Tambahkan deklarasi mode standar ke baris pertama setiap halaman HTML untuk memastikan presentasi yang konsisten di setiap browser.
<!DOCTYPEhtml> <html> <kepala> </kepala> </html>
Menurut spesifikasi HTML5:
Sangat disarankan untuk menentukan atribut lang untuk elemen root html guna menyetel bahasa yang benar untuk dokumen. Hal ini akan membantu alat sintesis ucapan menentukan pengucapan yang harus digunakan, membantu alat penerjemah menentukan aturan yang harus diikuti saat menerjemahkan, dan sebagainya.
<html lang="en-us"> <!-- ... --> </html>
IE mendukung tag khusus untuk menentukan versi IE yang harus digunakan untuk menggambar halaman saat ini. Kecuali ada kebutuhan khusus yang kuat, yang terbaik adalah mengaturnya ke mode edge untuk memberi tahu IE agar mengadopsi mode terbaru yang didukungnya.
<meta http-equiv="Kompatibel dengan X-UA" content="IE=Edge">
Dengan mendeklarasikan pengkodean karakter secara eksplisit, Anda dapat memastikan bahwa browser dengan cepat dan mudah menentukan bagaimana konten halaman harus dirender. Keuntungannya adalah Anda dapat menghindari penggunaan entitas karakter dalam HTML, sehingga semuanya konsisten dengan pengkodean dokumen (biasanya pengkodean UTF-8).
<kepala> <meta charset="UTF-8"> </kepala>
Menurut spesifikasi HTML5, umumnya tidak perlu menentukan atribut type saat memasukkan file CSS dan JavaScript, karena text/css dan text/javascript masing-masing adalah nilai defaultnya.
<!-- CSS Eksternal --> <link rel="stylesheet" href="code-guide.css"> <!-- CSS dalam dokumen --> <gaya> /* ... */ </gaya> <!--JavaScript --> <skrip src="code-guide.js"></skrip>
Cobalah untuk mengikuti standar dan semantik HTML, tetapi jangan korbankan kepraktisan. Cobalah untuk menggunakan tag paling sedikit dan minimalkan kompleksitas setiap saat.
Atribut HTML harus diatur dalam urutan yang diberikan di bawah ini untuk memastikan keterbacaan kode.
kelas
ID, nama
data-*
src, untuk, ketik, href, nilai
judul, alternatif
peran, aria-*
kelas digunakan untuk mengidentifikasi komponen yang sangat dapat digunakan kembali, sehingga harus dicantumkan terlebih dahulu. Id digunakan untuk mengidentifikasi komponen tertentu dan harus digunakan dengan hati-hati (misalnya, bookmark dalam suatu halaman), sehingga berada di urutan kedua.
Properti Boolean dapat dideklarasikan tanpa nilai. Spesifikasi XHTML memerlukannya untuk diberi nilai, namun spesifikasi HTML5 tidak.
Untuk informasi lebih lanjut silakan merujuk ke bagian WhatWG tentang atribut boolean:
Jika atribut Boolean suatu elemen mempunyai nilai, maka atribut tersebut benar; jika tidak memiliki nilai, maka atribut tersebut salah.
Jika Anda harus menetapkan nilainya, silakan merujuk ke spesifikasi WhatWG:
Jika atribut ada, nilainya harus berupa string kosong atau […] nama kanonik atribut, tanpa spasi di awal atau di akhir.
Sederhananya, tidak perlu memberikan nilai.
Saat menulis kode HTML, cobalah untuk menghindari elemen induk yang berlebihan. Seringkali, hal ini memerlukan iterasi dan pemfaktoran ulang untuk mencapainya. Silakan lihat kasus berikut:
<!-- Tidak terlalu bagus --> <span kelas="avatar"> <img src="..."> </span> <!-- Lebih baik --> <img kelas="avatar" src="...">
Tag yang dihasilkan melalui JavaScript membuat konten sulit ditemukan, diedit, dan memperlambat kinerja. Hindari saat Anda bisa.
1. Gunakan dua spasi sebagai pengganti tab - ini adalah satu-satunya cara untuk memastikan tampilan yang konsisten di semua lingkungan.
2. Saat mengelompokkan penyeleksi, tempatkan penyeleksi individual pada barisnya masing-masing.
3. Agar kode mudah dibaca, tambahkan spasi sebelum kurung kurawal pembuka pada setiap blok deklarasi.
4. Kurung kurawal penutup pada blok deklarasi harus berada pada baris terpisah.
5. Spasi harus disisipkan setelah: pada setiap pernyataan deklarasi.
6. Untuk pelaporan kesalahan yang lebih akurat, setiap pernyataan harus berada pada baris tersendiri.
7. Semua pernyataan deklarasi harus diakhiri dengan titik koma. Titik koma setelah pernyataan deklarasi terakhir bersifat opsional, tetapi jika Anda menghilangkannya, kode Anda mungkin lebih rawan kesalahan.
8. Untuk nilai atribut yang dipisahkan koma, spasi harus disisipkan setelah setiap koma (misalnya, bayangan kotak).
9. Jangan menyisipkan spasi setelah koma di dalam nilai rgb(), rgba(), hsl(), hsla(), atau rect(). Ini membantu membedakan beberapa nilai warna (hanya koma, tanpa spasi) dari beberapa nilai atribut (koma dan spasi).
10. Untuk nilai atribut atau parameter warna, hilangkan angka 0 di depan untuk desimal kurang dari 1 (misalnya, .5 bukannya 0,5; -.5px bukannya -0.5px).
Nilai 11/Hex harus huruf kecil semua, misalnya #fff. Karakter huruf kecil lebih mudah dibaca saat memindai dokumen karena bentuknya lebih mudah dibedakan.
12. Coba gunakan nilai heksadesimal yang disingkat, misalnya gunakan #fff daripada #ffffff.
13. Tambahkan tanda kutip ganda untuk atribut yang ada di selector, misalnya input[type="text"]. Ini hanya opsional dalam beberapa kasus, tetapi untuk konsistensi kode, disarankan untuk menggunakan tanda kutip ganda.
14. Hindari menentukan unit untuk nilai 0, misalnya gunakan margin: 0; daripada margin: 0px;.
/* CSS buruk */
.selector, .selector-sekunder, .selector[type=text] {
bantalan:15 piksel;
margin:0 piksel 0 piksel 15 piksel;
warna latar belakang:rgba(0, 0, 0, 0,5);
bayangan-kotak:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* CSSnya bagus */
.pemilih,
.selector-sekunder,
.selector[type="teks"] {
bantalan: 15 piksel;
margin-bawah: 15 piksel;
warna latar belakang: rgba(0,0,0,.5);
bayangan kotak: 0 1px 2px #ccc, sisipkan 0 1px 0 #fff;
}Deklarasi properti terkait harus dikelompokkan dan disusun dalam urutan berikut:
Penentuan posisi
Model kotak
Berkenaan dgn percetakan
Visual
Pemosisian diutamakan karena menghilangkan elemen dari alur dokumen normal dan dapat mengesampingkan gaya terkait model kotak. Model kotak menempati urutan kedua karena menentukan ukuran dan penempatan komponen.
Properti lainnya hanya memengaruhi bagian dalam komponen atau tidak memengaruhi dua kelompok properti pertama, sehingga peringkatnya berada di belakang.
.deklarasi-pesanan {
/* Posisi */
posisi: mutlak;
atas: 0;
kanan: 0;
bawah: 0;
kiri: 0;
indeks-z: 100;
/* Model kotak */
tampilan: blok;
mengapung: benar;
lebar: 100 piksel;
tinggi: 100 piksel;
/* Tipografi */
font: normal 13px "Helvetica Neue", sans-serif;
tinggi garis: 1,5;
warna: #333;
perataan teks: tengah;
/* Visual */
warna latar belakang: #f5f5f5;
batas: 1 piksel padat #e5e5e5;
radius batas: 3px;
/* Lain-lain */
opacity: 1;
}Dibandingkan dengan tag, arahan @import jauh lebih lambat, yang tidak hanya meningkatkan jumlah permintaan tambahan, namun juga menyebabkan masalah yang tidak terduga. Alternatifnya meliputi yang berikut ini:
Kompilasi beberapa file CSS menjadi satu file melalui praprosesor CSS yang mirip dengan Sass or Less. Fungsi penggabungan file CSS disediakan melalui Rails, Jekyll, atau sistem lainnya.
<!-- Gunakan elemen tautan -->
<link rel="stylesheet" href="core.css">
<!-- Hindari @imports -->
<gaya>
@import url("lebih.css");
</gaya>Tempatkan pertanyaan media sedekat mungkin dengan aturan yang relevan. Jangan mengemasnya dalam satu file gaya atau meletakkannya di bagian bawah dokumen. Jika Anda memisahkannya, mereka hanya akan dilupakan oleh semua orang di masa depan. Contoh tipikal diberikan di bawah ini.
.elemen { ... }
.elemen-avatar { ... }
.elemen yang dipilih { ... }
@media (lebar minimum: 480 piksel) {
.elemen { ...}
.elemen-avatar { ... }
.elemen yang dipilih { ... }
}Untuk gaya yang hanya berisi satu pernyataan, disarankan untuk menempatkan pernyataan pada baris yang sama agar mudah dibaca dan diedit dengan cepat. Untuk gaya dengan banyak deklarasi, deklarasi tetap harus dibagi menjadi beberapa baris.
Faktor kunci dalam melakukan hal ini adalah untuk mendeteksi kesalahan - misalnya, validator CSS menunjukkan bahwa ada kesalahan sintaksis pada baris 183. Jika itu adalah satu pernyataan dalam satu baris, Anda tidak akan mengabaikan kesalahannya; jika itu adalah beberapa pernyataan dalam satu baris, Anda harus menganalisisnya dengan hati-hati agar kesalahannya tidak hilang.
/* Deklarasi tunggal dalam satu baris */
.span1 { lebar: 60 piksel }
.span2 { lebar: 140 piksel }
.span3 { lebar: 220 piksel }
/* Beberapa deklarasi, satu deklarasi per baris */
.sprite {
tampilan: blok sebaris;
lebar: 16 piksel;
tinggi: 15 piksel;
gambar latar belakang: url(../img/sprite.png);
}
.icon { posisi latar belakang: 0 0 }
.icon-home { posisi latar belakang: 0 -20 piksel }
.icon-account { posisi latar belakang: 0 -40px }Jika Anda perlu menyetel semua nilai secara eksplisit, Anda harus mencoba membatasi penggunaan deklarasi properti singkatan. Penyalahgunaan umum deklarasi properti yang disingkat meliputi:
lapisan
batas
font
latar belakang
berbatasan
radius perbatasan
Dalam kebanyakan kasus, kita tidak perlu menentukan semua nilai untuk deklarasi properti singkat. Misalnya, elemen header HTML hanya perlu mengatur nilai margin atas dan bawah, jadi Anda hanya perlu mengganti kedua nilai tersebut bila diperlukan. Penggunaan deklarasi properti singkatan yang berlebihan dapat menyebabkan kode berantakan dan dapat menyebabkan efek samping yang tidak diinginkan dengan menyebabkan penggantian nilai properti yang tidak perlu.
/* Contoh buruk */
.elemen {
margin: 0 0 10 piksel;
latar belakang: merah;
latar belakang: url("gambar.jpg");
radius batas: 3px 3px 0 0;
}
/* Contoh yang bagus */
.elemen {
margin-bawah: 10 piksel;
warna latar: merah;
gambar latar belakang: url("gambar.jpg");
radius-batas-kiri-atas: 3px;
radius-batas-kanan-atas: 3px;
}Hindari bersarang yang tidak perlu. Ini karena meskipun Anda dapat menggunakan metode bersarang, bukan berarti Anda harus melakukannya. Gunakan penyarangan hanya ketika gaya harus dibatasi pada elemen induk (yaitu, pemilih turunan) dan ada beberapa elemen yang perlu disarangkan.
// Tanpa bersarang
.tabel > kepala > tr > th { …
.tabel > kepala > tr > td { …
// Dengan bersarang
.tabel > kepala > tr {
> th { &hellip }
> td { &hellip }
}Untuk meningkatkan keterbacaan, tambahkan spasi di antara nilai, variabel, dan operator ekspresi matematika yang diapit tanda kurung.
// Contoh buruk
.elemen {
margin: 10 piksel 0 @variabel*2 10 piksel;
}
// Contoh yang bagus
.elemen {
margin: 10px 0 (@variabel * 2) 10px;
}Kode ditulis dan dipelihara oleh orang-orang. Pastikan kode Anda menggambarkan diri sendiri, diberi komentar yang baik, dan mudah dipahami orang lain. Komentar kode yang baik menyampaikan konteks dan tujuan kode. Jangan hanya menyatakan ulang nama komponen atau kelas.
Untuk komentar yang lebih panjang, pastikan untuk menulis kalimat lengkap; untuk komentar umum, Anda dapat menulis frasa yang ringkas.
/* Contoh buruk */
/* Tajuk modal */
.modal-header {
...
}
/* Contoh yang bagus */
/* Elemen pembungkus untuk .modal-title dan .modal-close */
.modal-header {
...
} 1. Hanya karakter huruf kecil dan tanda hubung (bukan garis bawah, atau huruf unta) yang dapat muncul di nama kelas. Tanda hubung harus digunakan dalam memberi nama kelas terkait (mirip dengan namespace) (misalnya, .btn dan .btn-danger).
2. Hindari singkatan yang terlalu sembarangan. .btn mewakili tombol, tetapi .s tidak dapat mengungkapkan arti apa pun.
3. Nama kelas harus sesingkat mungkin dan mempunyai arti yang jelas.
4. Gunakan nama yang bermakna. Gunakan nama yang terorganisir atau mempunyai tujuan, bukan presentasional.
5. Berdasarkan kelas induk terdekat atau kelas dasar sebagai awalan kelas baru.
6. Gunakan kelas .js-* untuk mengidentifikasi perilaku (sebagai lawan gaya), dan jangan sertakan kelas ini ke dalam file CSS.
/* Contoh buruk */
.T { ... }
.merah { ... }
.header { ... }
/* Contoh yang bagus */
.tweet { ... }
.penting { ... }
.tweet-header { ... } Gunakan kelas untuk elemen umum, yang akan membantu mengoptimalkan kinerja rendering.
Untuk komponen yang sering muncul, hindari penggunaan pemilih atribut (misalnya, [class^=”…”]). Kinerja browser dapat dipengaruhi oleh faktor-faktor ini.
Pemilih harus dibuat sesingkat mungkin, dan usahakan membatasi jumlah elemen yang menyusun pemilih.
Batasi kelas ke elemen induk terdekat (yaitu, pemilih turunan) hanya jika diperlukan (misalnya, saat tidak menggunakan kelas dengan awalan - awalan seperti ruang nama).
/* Contoh buruk */
rentang { ... }
.page-container #stream .stream-item .tweet .tweet-header .nama pengguna { ... }
.avatar { ... }
/* Contoh yang bagus */
.avatar { ... }
.tweet-header .nama pengguna { ... }
.tweet .avatar { ... }Siapkan editor Anda sebagai berikut untuk menghindari inkonsistensi dan perbedaan kode umum:
Gunakan dua spasi untuk mengganti karakter tab (soft-tab berarti menggunakan spasi untuk mewakili karakter tab). Saat menyimpan file, hapus karakter spasi di belakangnya. Atur pengkodean file ke UTF-8. Menambahkan baris kosong ke akhir file.
Lihat dokumentasi dan tambahkan informasi konfigurasi ini ke file .editorconfig proyek Anda. Misalnya: instance .editorconfig di Bootstrap. Untuk informasi selengkapnya, lihat tentang EditorConfig.