Bootstrap CSS norme di codifica
grammatica
- Con due spazi invece di schede (tab) - Questo è l'unico modo per garantire un approccio coerente per mostrare in tutti gli ambienti.
- Quando il selettore è raggruppato separatamente su un selettore di linea.
- Per la leggibilità del codice, di fronte al blocco ciascun controvento economico per aggiungere uno spazio.
- blocco di istruzioni Brace da solo dovrebbe fare il viaggio.
- Ogni istruzione è l'istruzione
:
dopo dovrebbe inserire uno spazio. - Al fine di ottenere più accurata segnalazione degli errori, ogni dichiarazione deve essere una linea separata.
- Tutto istruzione di dichiarazione dovrebbe terminare con un punto e virgola. Punto e virgola dietro ultima affermazione dichiarazione è facoltativo, ma se si omette il punto e virgola, il codice può essere più sbagliato.
- Per i valori di proprietà separati da virgole, ogni virgola deve essere inserito in uno spazio (ad esempio,
box-shadow
). - Non
rgb()
,rgba()
,hsl()
,hsla()
orect()
dietro i valori interni virgola inserire uno spazio. Tali benefici da una pluralità di valori degli attributi (anche sia virgola e spazio) di distinguere tra una pluralità di valori di colore (solo una virgola, senza spazi). - Per il valore dell'attributo colore o parametro omesso meno di 1 davanti decimale 0 (ad esempio,
.5
invece di0.5
;-.5px
sostituito-0.5px
). - I valori esadecimali dovrebbero essere tutti in minuscolo, per esempio,
#fff
. Durante la scansione di un documento, caratteri minuscoli facile distinguere, perché la loro forma è più facilmente distinguibile. - Prova ad utilizzare una forma breve del valore esadecimale, ad esempio, con
#fff
invece di#ffffff
. - Aggiungere virgolette per la selezione di una proprietà, ad esempio,
input[type="text"]
. Solo in alcune circostanze è facoltativo , tuttavia, a presentare proposte di codice coerenza tra virgolette. - 0 unità al valore specificato per evitare, per esempio, con un
margin: 0;
anzichémargin: 0px;
.
Per i termini utilizzati nel presente documento sono domande? Si prega di fare riferimento a Wikipedia su fogli di stile CSS - la grammatica .
/* 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; }
Dichiarazione ordine
dichiarazioni attinenti alla proprietà dovrebbero essere raggruppati e organizzati nel seguente ordine:
- Posizionamento
- box model
- tipografico
- visivo
Come il posizionamento (posizionamento) in grado di rimuovere l'elemento dal normale flusso del documento, e coprire anche il modello di scatola (box model) legati allo stile, così in prima fila. Il box model in secondo luogo, perché determina la dimensione e la posizione dei componenti.
Altre proprietà interessano solo i componenti interni (all'interno) o non influenzano attribuiscono i primi due gruppi, in modo sul retro.
elenco completo delle proprietà e il loro ordine riferimento a 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; }
Non usare @import
E <link>
tag rispetto, @import
comando molto più lento, non solo aumenta il numero di ulteriori richieste, ma anche portare a problemi imprevisti. Ci sono diverse alternative:
- Utilizzando multipla
<link>
elemento - Con Sass o meno come CSS preprocessore più file CSS vengono compilate in un unico file
- In Rails, Jekyll o altro sistema a condizione che la funzione di unione file CSS
Fare riferimento a un articolo di Steve Souders per conoscere più informazioni.
<!-- Use link elements --> <link rel="stylesheet" href="core.css"> <!-- Avoid @imports --> <style> @import url("more.css"); </style>
media query (interrogazione media) posizione
I media query posizionati il più vicino alle norme pertinenti. Non li confezionare in un file singolo stile, o alla base del documento. Se li si prende a parte, e in futuro ognuno sarà dimenticato. Ecco un tipico esempio.
.element { ... } .element-avatar { ... } .element-selected { ... } @media (min-width: 480px) { .element { ...} .element-avatar { ... } .element-selected { ... } }
Con gli attributi prefisso
Quando si utilizzano gli attributi specifici del fornitore prefissati di impronta, che permette il valore di ogni proprietà sono allineati in direzione verticale, è facile editing multi-line.
In TextMate, utilizzando Testo → Modifica Ogni riga di Selezione ( ^ ⌘A). In Sublime Text 2, utilizzare la selezione → Aggiungi riga precedente (^ ⇧ ↑ ) e Selezione → Aggiungi riga successiva (^ ⇧ ↓ ).
/* Prefixed properties */ .selector { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
dichiarazione di regola a linea singola
Per gli stili che contengono solo una dichiarazione, al fine di facilitare la leggibilità e l'editing veloce, si raccomanda che la dichiarazione sulla stessa riga. Per un certo numero di stili con una dichiarazione o una dichiarazione dovrebbe essere diviso in più righe.
Un fattore chiave nel fare questo è quello di rilevare gli errori - per esempio, validatore CSS sottolineato che 183 linea ha un errore di sintassi. Se si tratta di una singola istruzione a riga singola, non sarà possibile ignorare questo errore, se è più di una dichiarazione di una sola riga, è necessario analizzare attentamente gli errori per evitare di perdere.
/* 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(../img/sprite.png); } .icon { background-position: 0 0; } .icon-home { background-position: 0 -20px; } .icon-account { background-position: 0 -40px; }
dichiarazioni di proprietà Stenografia
Nella necessità di impostare in modo esplicito il valore di tutti i casi, dovremmo cercare di limitare l'uso di dichiarazioni di proprietà di stenografia. Situazione abusato comunemente proprietà scorciatoia dichiarato come segue:
-
padding
-
margin
-
font
-
background
-
border
-
border-radius
Nella maggior parte dei casi, non abbiamo bisogno di specificare tutti i valori per la forma abbreviata dichiarazione di attributo. Ad esempio, HTML elementi voce solo sulla parte superiore set e margini inferiori (margine) value, quindi, se necessario, appena a coprire questi due valori può essere. L'uso eccessivo della forma breve della dichiarazione di proprietà può portare a codice confuso, il valore della proprietà e avrebbe portato inutili sovrapposizioni causare effetti collaterali imprevisti.
MDN (Mozilla Developer Network) su una buona idea circa le proprietà scorciatoie di questo articolo, per il comportamento dichiarazione di proprietà e facile scorciatoia meno familiare è utile.
/* 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; }
Meno e Sass annidato
Evitare di nidificazione inutili. Questo perché, anche se è possibile utilizzare il nido, ma questo non significa che si dovrebbe usare nidificato. Solo nello stile è necessario limitare all'interno dell'elemento genitore (cioè discendente selettore), e solo bisogno di una pluralità di elementi annidati usando annidati esiste.
// Without nesting .table > thead > tr > th { … } .table > thead > tr > td { … } // With nesting .table > thead > tr { > th { … } > td { … } }
nota
Il codice è scritto e mantenuto dal popolo. Si prega di assicurarsi che il codice può essere auto-descrizione, ben commentato e facile da capire gli altri. Buone commenti del codice in grado di trasmettere contesto e lo scopo del codice. Non è sufficiente ribadire componente o nome della classe.
Per commenti più lunghi, assicuratevi di scrivere una frase completa, ad osservazioni di carattere generale, in grado di scrivere frasi semplici.
/* Bad example */ /* Modal header */ .modal-header { ... } /* Good example */ /* Wrapping element for .modal-title and .modal-close */ .modal-header { ... }
nome della classe
- nomi delle classi possono essere visualizzati solo caratteri minuscoli e trattini (Dashe) (non sottolineati, né nomenclatura gobba). Dash deve essere utilizzato per la relativa classe di nome (come namespace) (per esempio,
.btn
e.btn-danger
). - Evitare eccessiva stenografia arbitrario.
.btn
rappresentanti pulsante, ma.s
non esprimono alcun significato. - nome della classe deve essere il più breve e chiaro significato.
- Utilizzare nomi significativi. uso mirato organizzato o del nome, non utilizzare le espressioni nome (presentazione).
- Sulla base della classe di appartenenza più vicino o una classe di base (base) come prefisso per la nuova classe.
- Utilizzare
.js-*
classe per identificare il comportamento (al contrario di stile), e non contengono questi classe per il file CSS.
Sass e meno per la denominazione variabile è anche leggere tutte le specifiche sopra elencate.
/* Bad example */ .t { ... } .red { ... } .header { ... } /* Good example */ .tweet { ... } .important { ... } .tweet-header { ... }
selettore
- Per gli elementi comuni usano classe, in modo favorevole per ottimizzare le prestazioni di rendering.
- Per i componenti spesso evitare utilizzando i selettori di proprietà (ad esempio,
[class^="..."]
). le prestazioni del browser sarà influenzato da questi fattori. - Selettori più breve possibile, e cercare di limitare il numero di elementi del selettore, si raccomanda di non superare 3.
- Solo quando è necessario limitare nel l'ultima classe dell'elemento genitore (cioè discendente selettore) (Ad esempio, non utilizzare la classe con il prefisso - namespace prefix è simile).
Ulteriore lettura:
/* Bad example */ span { ... } .page-container #stream .stream-item .tweet .tweet-header .username { ... } .avatar { ... } /* Good example */ .avatar { ... } .tweet-header .username { ... } .tweet .avatar { ... }
Organizzazione del codice
- Componente-unità di codice di organizzazione.
- Sviluppo di specifiche annotazioni coerente.
- Utilizzare gli spazi coerenti separati in blocchi di codice, in modo favorevole per la scansione di documenti di grandi dimensioni.
- Se più di un file CSS, sotto forma di assemblaggio di spin-off, piuttosto che nella pagina, perché la pagina sarà riorganizzato, e il gruppo verrà spostato.
/* * Component section heading */ .element { ... } /* * Component section heading * * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough. */ .element { ... } /* Contextual sub-component or modifer */ .element-heading { ... }
Configuration Editor
Il tuo editore in accordo con le seguenti impostazioni di configurazione per evitare incongruenze codice comune e le differenze:
- Due spazi invece di tabulazioni (soft-scheda che è rappresentativo di caratteri di tabulazione con spazi).
- Quando si salva un file per rimuovere la spazio bianco in coda.
- Impostare il file di codifica UTF-8.
- Alla fine del file aggiungere una riga vuota.
Riferendosi al documento e di aggiungere le informazioni di configurazione per il progetto .editorconfig
file. Per esempio: il Bootstrap in caso .editorconfig . Per ulteriori informazioni, si prega di fare riferimento alle Informazioni su EditorConfig .