English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
: dopo di esso dovrebbe essere inserito uno spazio.box-shadow).rgb(),rgba(),hsl(),hsla() o rect() valoreinternoinserisci uno spazio dopo la virgola. Questo facilita la distinzione tra più valori di colore (solo virgola, senza spazio) da più valori di attributo (entrambi virgola e spazio)..5 invece di 0.5;-.5px invece di -0.5px).#fff. Nella scansione del documento, i caratteri minuscoli sono più facili da distinguere perché hanno una forma più distinta.#fff invece di #ffffff。input[type="text"]。è opzionale in alcuni casima, per la coerenza del codice, è consigliabile aggiungerle sempre tra virgolette doppie.margin: 0; invece di margin: 0px;。Hai domande sui termini utilizzati? Consulta Wikipedia su Table di stili cascate - sintassi。
/* 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
}
/* Buon CSS */
.selector,
.selector-secondaria,
.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;
}
Le dichiarazioni correlate alle proprietà devono essere raggruppate e ordinate secondo l'ordine seguente:
Poiché la posizionamento può rimuovere un elemento dal flusso normale del documento e coprire anche lo stile del modello di scatola (box model), è elencato in primo luogo. Il modello di scatola è elencato al secondo posto, poiché determina le dimensioni e la posizione del componente.
Altre proprietà influenzano solo il componenteInterno (interno)o non influenzano i primi due gruppi di proprietà, quindi sono elencati dopo.
L'elenco completo delle proprietà e l'ordine di loro elenco possono essere consultati Ritiro。
.declaration-order {
/* Posizionamento */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Modello di scatola */
display: block;
float: right;
width: 100px;
height: 100px;
/* Tipografia */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visivo */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Varietà */
opacity: 1;
}
@importcon <link> in confronto con il tag@import Le istruzioni sono molto più lente, non solo aumentano il numero di richieste aggiuntive, ma possono anche causare problemi imprevisti. Le soluzioni alternative sono le seguenti:
<link> ElementoSi prega di consultare Articolo di Steve SoudersPer saperne di più.
<!-- Usa elementi link -->
<link rel="stylesheet" href="core.css">
<!-- Evita @imports -->
<style>
@import url("more.css");
</style>
Metti le query di media il più vicino possibile alle regole correlate. Non metterle in un singolo file di stile o alla fine del documento. Se le separi, verranno dimenticate in futuro. Di seguito è riportato un esempio tipico.
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
Quando si utilizzano proprietà con prefisso di un produttore specifico, utilizzare il rientro per allineare i valori di ciascuna proprietà verticalmente, il che facilita la modifica multi-riga.
In Textmate, utilizzare Text → Edit Each Line in Selection Selection → Modifica Ogni Riga della Selezione in Sublime Text 2, utilizzare Selection → Aggiungi Riga Precedente (⌃⇧↑) e Selection → Aggiungi Riga Successiva (⌃⇧↓)。
/* Proprietà preficate */
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
PerContiene solo una dichiarazionePer facilità di lettura e di modifica rapida, si consiglia di posizionare le dichiarazioni sulla stessa riga. Per lo stile con più dichiarazioni, è ancora meglio dividere le dichiarazioni in più righe.
Il fattore chiave per fare questo è il rilevamento degli errori - ad esempio, il validator CSS indica che ci sono errori di sintassi alla riga 183. Se si tratta di una dichiarazione singola su una singola riga, non si dovrebbe ignorare questo errore; se si tratta di più dichiarazioni su una singola riga, si deve analizzare attentamente per evitare di perdere errori.
/* Dichiarazioni singole su una riga */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Declarationi multiple, una per riga */
.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; }
In presenza della necessità di impostare esplicitamente tutti i valori, è consigliabile limitare l'uso delle proprietà abbreviate. Esempi comuni di abuso delle proprietà abbreviate sono i seguenti:
paddingmarginfontbackgroundborderborder-radiusNella maggior parte dei casi, non è necessario specificare tutti i valori per le proprietà abbreviate. Ad esempio, l'elemento heading di HTML necessita solo di impostare i margini superiori e inferiori (margin), quindi, quando necessario, è sufficiente sovrascrivere questi due valori. Un uso eccessivo delle proprietà abbreviate può portare a un codice disordinato e a sovrascritture indesiderate dei valori delle proprietà, causando effetti collaterali inaspettati.
Un ottimo articolo su MDN (Mozilla Developer Network)proprietà abbreviate Per gli utenti che non sono familiarizzati con la notazione abbreviata delle proprietà e il loro comportamento, è molto utile.
/* Esempio cattivo */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* Esempio buono */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
Evitare annidamenti non necessari. Questo perché, anche se puoi utilizzare annidamenti, non significa che debbano essere utilizzati. Utilizza l'annidamento solo quando è necessario limitare lo stile all'elemento padre (cioè il selettore discendente) e ci sono più elementi che devono essere annidati.
// Senza annidamento
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// Con annidamento
.table > thead > tr {
> th { … }
> td { … }
}
Il codice è scritto e mantenuto dagli esseri umani. Assicurati che il tuo codice sia auto-descrittivo, ben annotato e facile da comprendere per altri. Buone annotazioni di codice possono trasmettere il contesto e l'obiettivo del codice. Non ripetere semplicemente i nomi dei componenti o delle classi.
Per le annotazioni più lunghe, scrivere sempre frasi complete; per annotazioni generali, è possibile scrivere frasi brevi.
/* Esempio cattivo */
/* Intestazione del modulo */
.modal-header {
...
}
/* Esempio buono */
/* Elemento avvolgente per .modal-title e .modal-close */
.modal-header {
...
}
.btn E .btn-danger)..btn Rappresenta buttonMa .s Non dovrebbe esprimere alcun significato..js-* Utilizzare la classe per identificare il comportamento (in opposizione allo stile) e non includere queste classi nei file CSS.Nella nomina delle variabili di Sass e Less, è possibile fare riferimento anche alle norme elencate sopra.
/* Esempio cattivo */
.t { ... }
.red { ... }
.header { ... }
/* Esempio buono */
.tweet { ... }
.important { ... }
.tweet-header { ... }
[class^="..."])). Le prestazioni del browser possono essere influenzate da questi fattori.Leggi anche:
/* Esempio cattivo */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Esempio buono */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
/*
* Intestazione sezione del componente
*/
.element { ... }
/*
* Intestazione sezione del componente
*
* A volte è necessario includere un contesto opzionale per l'intero componente. Fallo qui sopra se è abbastanza importante.
*/
.element { ... }
/* Componente sub-contesto o modificatore */
.element-heading { ... }
Configura il tuo editor secondo le seguenti impostazioni per evitare discrepanze e differenze comuni nel codice:
參照文档並將這些配置信息添加到項目的 .editorconfig 文件中。例如：更多信息請參考 Bootstrap 中的 .editorconfig 示例。 about EditorConfig。