C'è un inconveniente nella definizione di più piccole classi DRY, invece di classi più ripetitive più grandi? [duplicare]

Ci sono enormi svantaggi in questo approccio.

Diciamo che in tutto il tuo sito web hai un modo coerente di visualizzare un utente. In ogni caso, il nome completo dell'utente è blu. Hai assegnato all'area fullname di ogni box una classe di "bluetext".

Ora dì che l'azienda arriva e decide che tutti i nomi dovrebbero essere rossi. Hai intenzione di fare "bluetext" in realtà scrivere in rosso? Sei sicuro che non sia stato usato altrove, dove il blu è ancora richiesto? Hai intenzione di cambiare la classe nel tuo codice HTML in tutto il sito? Cosa succede se ti manca? Non ti sembra sbagliato modificare HTML per un cambio di stile comunque?

La tua vita sarà molto più semplice se hai un div di classe "userpanel" con un child span di classe "fullname" (come è stato detto, descrivi il contenuto, non lo stile).

Inoltre, che cosa succede se vuoi scrivere qualche Javascript per selezionare tutti gli elementi di un determinato tipo e collegarli all'evento su onClick? Questo leggerà molto male se il tuo unico metodo di selezione è "div.centered bluetext a.underlined".

Il CSS, così com'è, non è ben progettato per essere ASCIUTTO. Se vuoi smettere di ripetere il codice ovunque, guarda i livelli di astrazione sopra CSS, come SASS o LessCSS , invece di macellare l'idea alla base di un foglio di stile.

È incoraggiato ma non devi esagerare, usale con parsimonia. Inoltre, il commento di David Dorward ha ragione sul punto che penso. Usali per descrivere l'elemento, non la formattazione che contengono.

Il problema è che può diventare rapidamente confuso sul motivo per cui uno dei tuoi elementi viene visualizzato in un modo e non nell'altro. Ho sempre usato molte classi con molta attenzione, quella più usata che ricordo persino:

.mandatory { color: darkred; font-weight: bold }

Penso che questo abbia senso, perché stai descrivendo in modo efficace un comportamento "obbligatorio" per un elemento, che potrebbe essere un testo, un campo di input, ecc. e come tale vuoi evitare di avere un .mandatoryText , un .mandatoryInput , ecc.

Ciò che intendo è: se vuoi usare più classi, sceglierle attentamente, scegli quelle che hanno senso .

Inoltre, questo è un argomento completamente diverso, ma non sono sicuro che avere quattro stili di font diversi per un sito web sarebbe nelle migliori pratiche in quel campo (non sono un web designer "puro" di per sé, quindi potrei sbagliarmi, vedi link , paragrafo "Readability Do's and Don'ts")

Infine, se hai paura di ripeterti, non ti preoccupare di avere "sostituisci tutto" nel tuo editor di testo preferito nel caso in cui dovessi sostituire quel colore che stai usando 56 volte: -)

Modifica: desidero anche che tu faccia in modo che le classi CSS vengano ereditate da altre classi CSS: -)

Potrebbe aver senso rompere il CSS in sezioni specifiche di funzioni; font, dimensione carattere, colore, ecc. Quindi assegnare i valori ai contenitori appropriati. È possibile specificare più selettori per la stessa definizione CSS. Sarebbe possibile avere 4 definizioni di carattere precedute dall'apposito elenco di selezione. Questo ti spinge verso l'ASCIUTTO. Non esagerare in caso di guasti specifici della funzione e combinarli se necessario.

Utilizza nomi basati su funzioni per classi piuttosto che nomi descrittivi. Sidebar e content sono nomi migliori di small e normal .

È anche comune cancellare o ripristinare alcuni valori che i diversi browser hanno di default in modo diverso. Valutare attentamente se sovrascrivere le cose come il comportamento dei link nei blocchi di testo.

Impostando quattro come limite superiore, il numero di variazioni di qualsiasi fattore è un buon punto di partenza. La dimensione del carattere potrebbe essere l'eccezione. Perché puoi avere quattro colori o caratteri non significa che devi avere quattro. Se uno o due o tre è la varietà appropriata usarlo. Due font sono spesso sufficienti.