Tutorial Bootstrap CSS Coding Standards Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari tatabahasa,agar deklarasi,Jangan gunakan @import,query Media (Media query) posisi,Dengan atribut awalan,Single-line aturan deklarasi,deklarasi properti singkat,Kurang dan Sass bersarang,catatan,nama kelas,Pemilih,Organisasi kode,Editor konfigurasi,
: setelah harus memasukkan spasi. box-shadow ). rgb() , rgba() , hsl() , hsla() atau rect() di belakang nilai-nilai internal yang koma memasukkan spasi. manfaat tersebut dari pluralitas nilai atribut (juga baik koma dan ruang) untuk membedakan antara pluralitas nilai warna (hanya koma, tanpa spasi). .5 bukannya 0.5 ; -.5px diganti -0.5px ). #fff . Ketika memindai dokumen, huruf kecil mudah untuk membedakan, karena bentuk mereka lebih mudah dibedakan. #fff bukannya #ffffff . input[type="text"] . Hanya dalam keadaan tertentu itu adalah opsional , namun, untuk proposal kode konsistensi dalam tanda kutip ganda. margin: 0; bukan margin: 0px; . Untuk istilah yang digunakan disini memiliki pertanyaan? Silakan merujuk ke Wikipedia pada Cascading Style Sheets - tata bahasa .
/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
laporan terkait properti-harus dikelompokkan dan disusun dalam urutan sebagai berikut:
Sebagai posisi (positioning) dapat menghapus elemen dari aliran dokumen normal, dan juga mencakup model kotak (box model) yang berhubungan dengan gaya, sehingga di baris pertama. Model kotak di tempat kedua, karena akan menentukan ukuran dan posisi komponen.
Sifat-sifat lainnya hanya mempengaruhi komponen internal (dalam) atau tidak mempengaruhi dua kelompok pertama atribut, sehingga di belakang.
Daftar lengkap properti dan pesanan mereka lihat Recess .
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
@import Dan <link> tag dibandingkan, @import perintah jauh lebih lambat, tidak hanya meningkatkan jumlah permintaan tambahan, tetapi juga menyebabkan masalah tak terduga. Ada beberapa alternatif:
<link> elemen Lihat artikel Steve Souders untuk belajar lebih banyak pengetahuan.
<!-- Use link elements -->
<link rel="stylesheet" href="core.css">
<!-- Avoid @imports -->
<style>
@import url("more.css");
</style>
Kueri media ditempatkan sebagai dekat dengan aturan yang relevan. Jangan pak mereka dalam sebuah file gaya tunggal, atau di bagian bawah dokumen. Jika Anda mengambil mereka terpisah, dan di masa depan semua orang akan dilupakan. Berikut adalah contoh yang khas.
.element { id. }
.element-avatar { id. }
.element-selected { id. }
@media (min-width: 480px) {
.element { id.}
.element-avatar { id. }
.element-selected { id. }
}
Bila menggunakan atribut khusus vendor diawali oleh lekukan, yang memungkinkan nilai masing-masing properti selaras dalam arah vertikal, mudah untuk pengeditan multi-line.
Dalam Textmate, menggunakan Teks → Edit Setiap Saluran Seleksi ( ^ ⌘A). Dalam Sublime Text 2, menggunakan Seleksi → Add Jalur Sebelumnya (^ ⇧ ↑ ) dan Seleksi → Add Berikutnya Line (^ ⇧ ↓ ).
/* Prefixed properties */
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
Untuk gaya yang hanya berisi pernyataan, untuk memfasilitasi keterbacaan dan editing cepat, kami sarankan bahwa pernyataan pada baris yang sama. Untuk sejumlah gaya dengan deklarasi atau pernyataan harus dibagi ke dalam beberapa baris.
Faktor kunci dalam melakukan hal ini adalah untuk mendeteksi kesalahan - misalnya, CSS validator menunjukkan bahwa 183 baris memiliki kesalahan sintaks. Jika itu adalah pernyataan tunggal single-line, Anda tidak akan mengabaikan kesalahan ini, jika lebih dari satu pernyataan-line, Anda harus hati-hati menganalisis kesalahan untuk menghindari hilang.
/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Multiple declarations, one per line */
.sprite {
display: inline-block;
width: 16px;
height: 15px;
background-image: url(id/img/sprite.png);
}
.icon { background-position: 0 0; }
.icon-home { background-position: 0 -20px; }
.icon-account { background-position: 0 -40px; }
Dalam kebutuhan untuk secara eksplisit mengatur nilai dari semua kasus, kita harus mencoba untuk membatasi penggunaan deklarasi properti singkat. Situasi umum disalahgunakan properti singkat dinyatakan sebagai berikut:
padding margin font background border border-radius Dalam kebanyakan kasus, kita tidak perlu menentukan semua nilai untuk bentuk singkatan atribut deklarasi. Misalnya, HTML menuju elemen hanya pada set margin atas dan bawah (margin) nilai, oleh karena itu, bila perlu, hanya meliputi dua nilai tersebut dapat. Penggunaan yang berlebihan bentuk pendek dari deklarasi properti dapat menyebabkan kode membingungkan, nilai properti dan akan membawa tumpang tindih yang tidak perlu menyebabkan efek samping tak terduga.
MDN (Mozilla Developer Network) pada ide yang sangat baik tentang sifat singkatan dari artikel tersebut, untuk deklarasi properti dan pengguna perilaku singkat kurang akrab berguna.
/* Bad example */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* Good example */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
Hindari bersarang yang tidak perlu. Hal ini karena meskipun Anda dapat menggunakan sarang, tapi itu tidak berarti Anda harus menggunakan bersarang. Hanya dalam gaya yang Anda harus membatasi dalam elemen induk (yaitu keturunan pemilih), dan hanya perlu pluralitas elemen bersarang menggunakan bersarang eksis.
// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// With nesting
.table > thead > tr {
> th { … }
> td { … }
}
Kode ini ditulis dan dikelola oleh orang-orang. Pastikan bahwa kode Anda dapat self-describing, baik berkomentar dan mudah dimengerti orang lain. Baik komentar kode dapat menyampaikan konteks dan tujuan kode. Jangan hanya menegaskan kembali komponen atau nama kelas.
Untuk komentar lagi, pastikan untuk menulis kalimat lengkap, karena komentar umum, dapat menulis kalimat sederhana.
/* Bad example */
/* Modal header */
.modal-header {
id.
}
/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
id.
}
.btn dan .btn-danger ). .btn perwakilan tombol, tapi .s tidak mengungkapkan makna. .js-* kelas untuk mengidentifikasi perilaku (sebagai lawan gaya), dan tidak mengandung kelas ini untuk file CSS. Sass dan Kurang untuk penamaan variabel juga membaca semua spesifikasi yang tercantum di atas.
/* Bad example */
.t { id. }
.red { id. }
.header { id. }
/* Good example */
.tweet { id. }
.important { id. }
.tweet-header { id. }
[class^="id."] ). Kinerja Browser akan dipengaruhi oleh faktor-faktor ini. Bacaan lebih lanjut:
/* Bad example */
span { id. }
.page-container #stream .stream-item .tweet .tweet-header .username { id. }
.avatar { id. }
/* Good example */
.avatar { id. }
.tweet-header .username { id. }
.tweet .avatar { id. }
/*
* Component section heading
*/
.element { id. }
/*
* Component section heading
*
* Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
*/
.element { id. }
/* Contextual sub-component or modifer */
.element-heading { id. }
Editor Anda sesuai dengan pengaturan konfigurasi berikut untuk menghindari inkonsistensi kode umum dan perbedaan:
Mengacu dokumen dan menambahkan informasi konfigurasi untuk proyek .editorconfig berkas. Sebagai contoh: pada Bootstrap dalam hal .editorconfig . Untuk informasi lebih lanjut, silakan lihat pada EditorConfig Tentang .