Nomi di gilda di denominazione CSS con elementi con più classi

Oltre alle preferenze personali, non vi è alcun reale vantaggio di una soluzione rispetto all'altra.

<span class="btn success"></span>

Se vuoi accedere a tutti i tuoi pulsanti il selettore .btn {/* styles here */} farà il trucco, se vuoi accedere a tutti i tuoi elementi di successo (barra dei messaggi, etichetta e pulsanti il selettore .success{/* styles here */} lo farà e se vuoi per accedere in modo specifico al tuo pulsante di successo .btn.success {/* styles here */} otterrà il completamento del lavoro

.btn {/* styles here */} /* Single class has to be applied to element for those styles to take effect */
.success{/* styles here */} /* Same a previous goes here */
.btn.success {/* styles here */} /* Both classes must be on elements for those styles to take effect*/

Questo metodo è ciò che oocss (CSS orientato agli oggetti) è riferito a

L'altra notazione sta permettendo la stessa cosa ma in un modo più dettagliato come:

.btn.btn-success {/* Style here */}

o

.btn-success {/* Style here */} /* Same but without the constrain of using .btn class as well*/

Quindi è davvero di riferimento personale.

<span class="btn success"></span> migliora la leggibilità nel file css mentre <span class="btn btn-success"></span> migliora la leggibilità nel file html.

vedi bootstrap di Twitter per un framework css completo che utilizza una tecnica simile.

<span class="btn btn-success"></span>

Vantaggi

L'esempio sopra si avvale del namespacing, cioè success va con btn , ci potrebbe anche essere btn-info o btn-danger come altri esempi. Ciò fornisce un'API memorabile e facile da digitare.

Il successo può, ed è, essere usato più volte per più applicazioni. Puoi avere successo con un pulsante ma anche un'etichetta, ad esempio. È semplicemente troppo generico. Accanto a ciò è chiaro che può essere applicato a un btn senza spiegazione. Quindi è anche più chiaro. Altrimenti avresti bisogno di qualche trucco intelligente per vedere quali classi aggiuntive potrebbero essere applicate, ora tutte le classi con un prefisso si applicano all'elemento della classe principale.

Questa è una domanda abbastanza pertinente sull'uso di 2 classi invece di una: link

Non farei neanche io. Non sarà affatto chiaro, osservando il tuo CSS, a quale% di co_de viene applicata. Presumo che fosse un pulsante (e ti maledico per non aver usato .btn ) e non per un intervallo. Solo se andassi a vedere il tuo codice HTML avrei la minima idea di quello che stai facendo. Anche dalla tua domanda, ho il desiderio di chiederti che cosa stai cercando di ottenere esattamente.

Scegli nomi di stili che indicano il tipo di contenuto all'interno dell'elemento.

"successo" è un nome di buona classe. Ti dice che è un'area di contenuto che indicherà il successo. Implica che ci sarà uno styling coordinato per il fallimento. Ma vorrei ancora sapere che è durata.

span.success

Quindi se dovessi applicare uno stile extra a un pulsante all'interno di quell'intervallo, vorrei vedere

span.success input[type="button"]

In breve, a seconda della versione del CSS, le risposte possono variare.

Perché, questo fatto farà la differenza sugli approcci suggeriti. Tuttavia, se non ti affidi a CSS3 guarda questo post - Come sviluppare con i CSS

Consiglierei di nominare come: <span class="button result-success"></span>

<span class="button result-pending"></span>

Ha un vantaggio di una denominazione chiara, meno confusione nello sviluppo di un team. La mia regola generale è di evitare le abbreviazioni.