Il tuo primo esempio:

<button class="button main center">Submit</button>

è sbagliato:

• button class sta ripetendo l'elemento stesso. Hai una class="p" per ogni paragrafo e una class="li" per ogni articolo della lista? Qual è il punto?

• main è particolarmente poco chiaro. Solo osservando il CSS, come saresti in grado di determinare a cosa si riferisce main ?

• center è un nome errato per una classe: center è un valore, non un nome di classe. Immagina di volere che i tuoi hyperlink siano verdi. Faresti:

  a {
      color: green;
  }
  

  o creerai:

  .green {
      color: green;
  }
  

  e poi aggiungi class="green" a tutti i tuoi link e poi scopri che il cliente vuole che i link vengano mostrati in arancione ora?

Considera un esempio leggermente migliore di un pulsante che annulla un'operazione mentre è evidenziato per qualche motivo e mostra un'icona vicino al testo. Dovresti fare questo:

<button class="cancel highlighted with-icon">Cancel</button>

o essere più specifico?

<button class="cancel-highlighted-with-icon">Cancel</button>

Tutto dipende da come vengono usati gli stili. Ad esempio:

• Avrebbe senso evidenziare pulsanti che non sono pulsanti Annulla?
• Esiste un'opzione di icone per i pulsanti che non sono pulsanti Annulla?

La prima domanda probabilmente riceverà una risposta positiva, e lo stile di evidenziazione sarà probabilmente lo stesso per qualsiasi altro tipo di pulsante di invio pulsante, pulsante normale, pulsante di salvataggio, pulsante di eliminazione: è il nome. Pertanto, ha senso mantenere uno stile .highlighted separato. Per evitare collisioni, può essere applicato ai pulsanti: button.highlighted .

La seconda domanda, d'altra parte, è meno ovvia. Sebbene i pulsanti di invio e i pulsanti di salvataggio e di eliminazione possano avere tutti un'icona, è possibile che il loro stile sia diverso ogni volta; se tutto lo stile contiene è la proprietà background-image , utilizzando with-icon class, avrai ancora la duplicazione del codice:

.cancel {
    border: ...; border-radius: ...; padding: ...; }
.cancel.with-icon {
    background-image: ...; }
.save {
    border: ...; border-radius: ...; padding: ...; }
.save.with-icon {
    background-image: ...; }
...

Tuttavia, quali sono le alternative? Diciamo che finisci per combinare cancel di classe con with-icon . Ora hai:

.cancel {
    border: ...; border-radius: ...; padding: ...; }
.cancel-with-icon {
    border: ...; border-radius: ...; padding: ...; background-image: ...; }
.save {
    border: ...; border-radius: ...; padding: ...; }
.save-with-icon {
    border: ...; border-radius: ...; padding: ...; background-image: ...; }

con un'enorme duplicazione del codice.

Se questo da solo non è sufficiente, c'è un altro motivo per mantenere with-icon separato. Se è necessario attivare e disattivare le icone sui pulsanti, è possibile farlo in un unico metodo tramite jQuery se with-icon è una classe effettiva. In caso contrario, sarai costretto a creare una mappa tra cancel e cancel-with-icon , save e save-with-icon e modificare quelle classi, che, anche se tecnicamente fattibile, richiedono più codice.