Spesifikasi pengekodan CSS Bootstrap

Sintaks

Gunakan dua ruang dan bukannya tab - ini adalah satu-satunya cara untuk memastikan pembentangan yang konsisten dalam semua persekitaran.
Apabila mengumpulkan pemilih, letakkan pemilih individu pada baris mereka sendiri.
Untuk kebolehbacaan kod, tambahkan ruang sebelum pendakap pembukaan setiap blok pengisytiharan.
Kurung kerinting penutup blok pengisytiharan hendaklah berada pada barisnya sendiri.
Ruang hendaklah disisipkan selepas : setiap pernyataan pengisytiharan.
Untuk pelaporan ralat yang lebih tepat, setiap penyataan hendaklah berada pada barisnya sendiri.
Semua pengisytiharan hendaklah diakhiri dengan koma bertitik. Titik koma selepas pernyataan pengisytiharan terakhir adalah pilihan, tetapi jika anda meninggalkannya, kod anda mungkin lebih terdedah kepada ralat.
Untuk nilai atribut yang dipisahkan koma, ruang hendaklah disisipkan selepas setiap koma (contohnya, box-shadow).
Jangan masukkan ruang selepas koma di dalam rgb() daripada nilai rgba(), hsl(), hsla(), rect() atau . Ini membantu membezakan berbilang nilai warna (hanya koma, tiada ruang) daripada berbilang nilai atribut (koma dan ruang).
Untuk nilai atribut atau parameter warna, tinggalkan 0 di hadapan untuk perpuluhan kurang daripada 1 (cth.,
bukannya .5; 0.5 bukannya -.5px ). -0.5px
Nilai heks hendaklah semuanya huruf kecil, sebagai contoh,
. Aksara huruf kecil lebih mudah dibaca apabila mengimbas dokumen kerana bentuknya lebih mudah dibezakan. #fff
Cuba gunakan nilai heks yang disingkatkan, contohnya, gunakan
dan bukannya #fff. #ffffff
Tambahkan petikan berganda pada atribut dalam pemilih, contohnya,
. Ia hanya pilihan dalam beberapa kes, tetapi untuk ketekalan kod adalah disyorkan untuk menggunakan petikan berganda. input[type="text"]
Elakkan menyatakan unit untuk 0 nilai, contohnya, gunakan
dan bukannya margin: 0;. margin: 0px;

Ada soalan tentang istilah yang digunakan di sini? Lihat Helaian Gaya Lata - Sintaks di Wikipedia.

/* CSS buruk */

.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
}

/* Bagus CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background -warna: rgba(0,0,0,.5);
bayang kotak: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

Perintah Pengisytiharan

Pengisytiharan harta yang berkaitan hendaklah dikumpulkan bersama dan disusun dalam susunan berikut:

Kedudukan
Model kotak
Tipografi
Visual

Memandangkan kedudukan boleh diperoleh daripada Elements dialih keluar daripada aliran dokumen biasa dan juga boleh mengatasi gaya berkaitan model kotak, jadi mereka berada di kedudukan pertama. Model kotak berada di tempat kedua kerana ia menentukan saiz dan penempatan komponen.

Sifat lain hanya mempengaruhi bahagian dalam (dalam) komponen atau tidak menjejaskan dua kumpulan sifat pertama, jadi ia berada di kedudukan di belakang.

Untuk senarai lengkap atribut dan susunannya, sila rujuk Recess.

.perintah pengisytiharan {
/* Kedudukan */
kedudukan: mutlak;
atas: 0;
kanan: 0;
bawah: 0;
kiri: 0;
z-indeks: 100;

/* Model kotak */
paparan: blok;
apungan: kanan;
lebar: 100px;
tinggi: 100px;

/* Tipografi */
fon: 13px biasa "Helvetica Neue", sans-serif;
garis-tinggi: 1.5;
warna: #333 ;
text-align: center;

/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;

/* Lain-lain */
kelegapan: 1;
}

Jangan gunakan `@import`

berbanding dengan tag <link> . @import Perintahnya jauh lebih perlahan, yang bukan sahaja meningkatkan bilangan permintaan tambahan, tetapi juga menyebabkan masalah yang tidak dapat diramalkan. Alternatif termasuk:

Gunakan berbilang <link> elemen
Prapemproses CSS seperti Sass atau Less will CSS fail disusun menjadi satu fail
Fungsi penggabungan fail CSS disediakan melalui Rails, Jekyll atau sistem lain

Sila rujuk Artikel Steve Souders untuk mengetahui lebih lanjut.

<link rel="stylesheet" href="core.css">

<! -- Elakkan @import -->
<style>
@import url("../style/css/more.css");
</style>

Kedudukan pertanyaan media

Letakkan pertanyaan media sedekat mungkin dengan peraturan yang berkaitan. Jangan bungkusnya dalam satu fail gaya atau letakkannya di bahagian bawah dokumen. Jika anda memisahkan mereka, mereka hanya akan dilupakan oleh semua orang pada masa hadapan. Contoh biasa diberikan di bawah.

.elemen { ... }
.elemen-avatar { ... }
.elemen-dipilih { ... }

@media (min -lebar: 480px) {
.elemen { ...}
.elemen-avatar { ... }
.elemen-dipilih { ... }
}

Atribut awalan

Apabila menggunakan atribut awalan daripada pengeluar tertentu, nilai setiap atribut diselaraskan secara menegak melalui lekukan, yang memudahkan pengeditan berbilang baris.

Dalam Textmate, gunakan Teks → Edit Setiap Baris dalam Pilihan (⌃⌘A). Dalam Teks Sublime 2, gunakan Pilihan → Tambah Baris Sebelumnya (⌃⇧↑) dan Pilihan → Tambah Baris Seterusnya (⌃⇧↓).

/* Sifat awalan */
.pemilih {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box -bayang: 0 1px 2px rgba(0,0,0,.15);
}

Pengisytiharan peraturan baris tunggal

Untuk mengandungi hanya satu pengisytiharan gaya, untuk kebolehbacaan dan penyuntingan pantas, adalah disyorkan untuk meletakkan kenyataan pada baris yang sama. Untuk gaya dengan berbilang pengisytiharan, pengisytiharan masih harus dibahagikan kepada berbilang baris.

Faktor utama dalam melakukan ini adalah untuk pengesanan ralat -- sebagai contoh, pengesah CSS menunjukkan bahawa terdapat ralat sintaks pada baris 183. Jika ia adalah satu pernyataan pada satu baris, anda tidak akan mengabaikan ralat jika ia adalah berbilang kenyataan pada satu baris, anda mesti menganalisisnya dengan teliti untuk mengelakkan ralat hilang.

/* Pengisytiharan tunggal pada satu baris */
.span1 { lebar: }
.span2 { lebar: 140px; }

/* Berbilang pengisytiharan, satu setiap baris */
.sprite {
paparan: inline-block;
lebar: 16px;
tinggi: 15px;
latar belakang -imej: url(../style/images/sprite.png);
}
.ikon { kedudukan latar belakang: 0 0; .ikon-rumah { kedudukan latar belakang: 0 -20px ; }
.ikon-akaun { latar belakang-kedudukan: 0 -40px;

Pengisytiharan harta yang dipendekkan

Penggunaan pengisytiharan harta yang dipendekkan harus dihadkan kepada situasi di mana semua nilai perlu ditetapkan secara eksplisit. Penyalahgunaan biasa perisytiharan atribut yang disingkatkan adalah seperti berikut:

padding
margin
font
background
border
border-radius

Dalam kebanyakan kes, kami tidak perlu menentukan semua nilai untuk pengisytiharan harta trengkas. Sebagai contoh, elemen tajuk HTML hanya perlu menetapkan nilai margin atas dan bawah, jadi anda hanya perlu mengatasi kedua-dua nilai ini apabila perlu. Penggunaan pengisytiharan harta trengkas yang berlebihan boleh menyebabkan kod bersepah dan boleh menyebabkan kesan sampingan yang tidak diingini dengan menyebabkan penggantian nilai harta yang tidak perlu.

MDN (Rangkaian Pembangun Mozilla) mempunyai artikel yang sangat bagus tentang sifat trengkas, yang berguna untuk pengguna yang tidak biasa dengan pengisytiharan harta trengkas dan tingkah laku mereka.

/* Contoh buruk */

.elemen {
margin: 0 0 10px;
latar belakang: merah;
latar belakang: url("../style/ images/image.jpg");
jejari sempadan: 3px 3px 0 0;
}

/* Contoh yang baik */
.elemen {
margin-bawah: 10px ;
warna latar belakang: merah;
imej latar belakang: url("../style/images/image.jpg");
jejari-jejari-atas-kiri: 3px;
jidar -jejari atas-kanan: 3px;
}

Kurang dan Bersarang dalam Sass

Elakkan bersarang yang tidak perlu. Ini kerana walaupun anda boleh menggunakan sarang, ini tidak bermakna anda perlu. Gunakan sarang hanya apabila gaya mesti dihadkan kepada elemen induk (iaitu, pemilih keturunan) dan terdapat berbilang elemen yang perlu disarangkan.

//Tanpa bersarang

.meja > tr >
// Dengan bersarang
.meja > tr {
>

Komen

Kod ditulis dan diselenggara oleh orang. Pastikan kod anda menerangkan diri, diulas dengan baik dan mudah difahami oleh orang lain. Komen kod yang baik menyampaikan konteks dan tujuan kod. Jangan hanya nyatakan semula nama komponen atau kelas.

Untuk ulasan yang lebih panjang, pastikan anda menulis ayat yang lengkap; untuk ulasan umum, anda boleh menulis frasa yang ringkas.

/* Contoh buruk */
/* Pengepala modal */
.pengepala modal {
...
}

/* Contoh yang baik */
/* Elemen pembalut untuk .modal-title dan .modal-close */
.modal-header {
...
}

Penamaan kelas

Hanya aksara kecil dan sempang (bukan garis bawah, mahupun huruf besar unta) boleh muncul dalam nama kelas. Tanda sempang hendaklah digunakan dalam menamakan kelas berkaitan (serupa dengan ruang nama) (cth., .btn dan .btn-danger).
Elakkan singkatan yang terlalu sewenang-wenangnya. .btn mewakili butang, tetapi .s tidak boleh menyatakan sebarang makna.
nama kelas hendaklah sesingkat mungkin dan mempunyai maksud yang jelas.
Gunakan nama yang bermakna. Gunakan nama yang teratur atau bertujuan, bukan persembahan.
Awalan kelas baharu berdasarkan kelas induk atau kelas asas yang terdekat.
Gunakan kelas .js-* untuk mengenal pasti gelagat (berbanding dengan gaya), dan jangan masukkan kelas ini ke dalam fail CSS.

Anda juga boleh merujuk kepada spesifikasi yang disenaraikan di atas apabila menamakan pembolehubah Sass dan Less.

/* Contoh buruk */
.t { ... }
.merah { ... }
.header { ... }

/* Contoh yang baik */
.tweet { ... }
.penting { ... }
.tweet-header { ... }

Pemilih

Gunakan kelas untuk elemen biasa, yang akan membantu mengoptimumkan prestasi pemaparan.
Elakkan menggunakan pemilih atribut (cth., [class^="..."]) untuk komponen yang kerap berlaku. Prestasi penyemak imbas boleh dipengaruhi oleh faktor ini.
Pemilih hendaklah sesingkat mungkin, dan cuba hadkan bilangan elemen yang membentuk pemilih. Adalah disyorkan untuk tidak melebihi 3.
Hanya hadkan kelas kepada elemen induk terdekat (iaitu, pemilih keturunan) apabila perlu (contohnya, apabila tidak menggunakan kelas awalan -- awalan adalah serupa dengan ruang nama).

Bacaan lanjutan:

Skop kelas CSS dengan awalan
Hentikan lata

/* Contoh buruk */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { . .. }
.avatar { ... }

/* Contoh yang baik */
.avatar { ... }
.tweet-header .nama pengguna { ... }
.tweet .avatar { ... }

Organisasi Kod

Susun segmen kod dalam unit komponen.
Bangunkan konvensyen anotasi yang konsisten.
Gunakan ruang kosong yang konsisten untuk mengasingkan kod kepada kepingan, menjadikannya lebih mudah untuk mengimbas dokumen yang lebih besar.
Jika menggunakan berbilang fail CSS, bahagikannya kepada komponen dan bukannya halaman, kerana halaman akan disusun semula dan komponen hanya akan dialihkan.

/*
* Tajuk bahagian komponen
*/

.elemen { ... }

/*
* Tajuk bahagian komponen
*
* Kadangkala anda perlu memasukkan konteks pilihan untuk keseluruhan komponen Lakukan itu di sini jika ia cukup penting.
*/

.elemen { ... }

/* Subkomponen kontekstual atau pengubahsuai */
.element-heading { ... }

Konfigurasi Editor

Sediakan editor anda seperti berikut untuk mengelakkan ketidakkonsistenan dan perbezaan kod biasa:

Ganti tab dengan dua ruang (tab lembut digunakan Spaces mewakili aksara tab).
Alih keluar aksara ruang kosong mengekor apabila menyimpan fail.
Tetapkan pengekodan fail kepada UTF-8.
Menambahkan baris kosong pada penghujung fail.

Rujuk dokumentasi dan tambah maklumat konfigurasi ini pada fail .editorconfig projek. Contohnya: contoh .editorconfig dalam Bootstrap. Untuk maklumat lanjut, lihat mengenai EditorConfig.

← Spesifikasi pengekodan HTML Bootstrap

serahkan