Latest web development tutorials

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() o rect() 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 di 0.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:

  1. Posizionamento
  2. box model
  3. tipografico
  4. 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 .