Classi CSS per semantica e stili in generale

I work on a massive website that has many disparate pages. We have a default stylesheet that is shared across practically all pages. I find it useful to have CSS rulesets such as these:

.center { text-align: center; }
.red { color: red; }

Questo è comunemente fatto, ma a mio parere è una pratica molto povera. È solo un piccoletto un po 'meglio che mettere tutti gli stili in linea. L'unico vantaggio che ottieni è che puoi scegliere una diversa tonalità di rosso. È così antitetico all'idea di CSS che sarebbe un candidato per thedailywtf.com, se solo non fosse una pratica così comune.

Invece di

<div class="warning">Do not cross the streams!</div>

Hai

<div class="warning red center">...</div>

e altrove:

<span class="red">...</span>

<div class="center">Some heading or caption or whatever</div>
<div class="warning bold black">A different kind of warning?</div>

Che cosa hai intenzione di fare quando il tuo cliente vuole cambiare tutti gli avvertimenti in testo nero in una casella piena di colore giallo con un bordo nero, flottato a destra? Un'attività che dovrebbe richiedere dieci minuti impiega invece dieci ore.

Certo, è più lavoro ora assegnare i nomi di classi semantiche a tutti i tuoi contenuti, ma così facendo è molto facile regolare l'aspetto del sito in futuro. Più grande è il sito web, più importante è farlo correttamente. Se hai dimestichezza con le applicazioni di elaborazione testi, pensa a modificare le intestazioni sottosezioni in un libro di 50 capitoli in cui non sono stati usati stili di paragrafo.

Se vuoi che alcuni "avvertimenti" siano rossi e altri "avvertimenti" non rossi, allora hai bisogno di due classi separate, ad es. "warning" e "serious-warning".

Raccomando Transcending CSS: The Fine Art of Web Design di Andy Clarke, Molly E. Holzschlag, Aaron Gustafson e Mark Boulton. È un bel libro e fa un ottimo lavoro nel spiegare come e perché separare il contenuto semantico dalla presentazione.

Prima di tutto questa è una buona domanda, non penso che sia hyper tecnico e ha molto senso.

encouraged è una parola chiave qui.

Quello che stai facendo è una pratica molto comune, è estremamente difficile fare questo tipo di stile senza questa tecnica usando i CSS. Il CSS è lì per descrivere ciò che vogliamo che l'elemento sia simile, è il nostro linguaggio di stile e in realtà si aggancia solo efficacemente a id, nomi di classi e nomi di tag (tutti gli altri selettori sono considerevolmente più lenti l'ultima volta che ho controllato). Di queste tre classi ha più senso. Questo perché gli ID sono unici e i nomi dei tag sono ancora più descrittivi di cosa sia un elemento e non di come dovrebbe essere visualizzato.

Comprendo l'argomento del W3C, nella programmazione la maggior parte delle classi temporali descrivono quale tipo e oggetto è e come si comporta e non come dovrebbe essere presentato.

• Un'alternativa è l'utilizzo di un linguaggio dei modelli più robusto come SASS e utilizzare i mixins (vedere l'esempio sulla home page). Questo ti permetterebbe di dare classi classi descrittive e condividere un mixin 'centrale'. Non mi piace però perché implica l'incorporamento di un'altra tecnologia al tuo codice. MENO è anche una tale alternativa.
• Sì, puoi allineare gli stili, puoi anche farlo a livello di codice (usa le classi e inserisci uno script per incorporare gli stili nel back-end). Non vedo davvero il vantaggio di farlo, se non aderendo più strettamente alla raccomandazione del W3C.
• Puoi continuare a fare quello che stai facendo. Che funziona ma non aderisce all'incoraggiamento del W3C.

Quando hai in linea stili avrai anche i seguenti problemi:

Gli elementi
1. con ID avranno i loro valori di stile sovrascritti dallo stile in linea. Un selettore ID ha la precedenza su un selettore di classe, ma lo stile in linea batte entrambi. Questo non è un problema se i tuoi stili sono tutti dei tipi di "centro", ma vale la pena tenerli a mente. Saresti sorpreso di quanto codice web esistente sul Web fallisca per questo motivo.
2. Anche il "centro" delle classi potrebbe avere un significato diverso in alcuni scenari, potresti anche voler impostare le proprietà aggiuntive e non solo l'allineamento del testo e rimanere al centro. Con il centro e il rosso non è un grosso problema però

Ecco cosa penso dovresti fare:

Prova SASS o MENO, se questi funzionano per te possono finire per risparmiare un sacco di tempo. Se ciò non funziona, continuerei ad usare le classi come forma del pattern di mixin per condividere le proprietà tra gli elementi.

Sono d'accordo sul fatto che il nome 'classe' per qualcosa che descrive come un oggetto debba essere visualizzato e non come sia effettivamente confuso, classi doppie oggi sia per la logica di presentazione in CSS sia per la logica del codice in JavaScript.

Buona fortuna!

L'uso di più nomi di classi semantici è davvero utile se stai progettando più di uno stile, ad esempio una versione mobile. Possono condividere molto codice, ma a volte il "centro" non dovrebbe più essere centrato nella versione mobile. O qualcosa è messo su uno sfondo diverso e quindi dovrebbe usare il marrone piuttosto che il rosso. Il restyling di cose come 'center {text-align: right;}' è solo confuso.

Quindi vorrei incoraggiare i significati semantici e dar loro uno stile. Per evitare la codifica ridondante degli stili che continuano a ricorrere (ad esempio 'font-weight: bold; text-align: center; color: red;' per diversi avvisi e altri testi rossi Sass o Less potrebbero essere molto utili.

Tuttavia, non vorrei perdere tempo a rinominare tutte le tue classi se non hai più stili e il layout non è soggetto a modifiche. Dopotutto è solo per tua comodità (e gli sviluppatori dopo di te, se ce ne sono.) I browser non fanno nulla con il valore semantico, semmai usano attributi di ruolo.

Non userei troppo gli stili in linea, ma possono essere utili. Ad esempio quando lo stile proviene da uno strumento e viene generato. Non è produttivo saltare i cerchi per riscrivere il codice generato in classi solo per modellarli. (Soprattutto quando si modificano le impostazioni dello strumento sarà facile cambiare.)