Object oriented CSS

Question

Ho visto questo presentation about object oriented css, ma penso che sia non lo capisco correttamente o non capisco i vantaggi di utilizzare OO CSS:

Esempio HTML:

<div class="border-1 bg-2 color-1 font-1"> 
</div> 

Esempio CSS :

/* borders */ 
.border-1 { border: 1px solid red; } 

/* backgrounds: */ 
.bg-2 { background: yellow; } 

/* other sections */ 

vedo un vantaggio di essere in grado di cambiare gli stili per più elementi in fretta, per esempio, essere in grado di cambiare la combinazione di colori sarebbe molto utile.

In realtà, si sta definendo lo stile/aspetto all'interno dell'HTML, o almeno una parte di esso. Certo, è meglio che usare l'attributo style, perché è ancora possibile scambiare gli stili per un gruppo di gruppi.

Il punto è che si definiscono i gruppi di stili all'interno dell'HTML, ma ho appreso che è necessario creare gruppi "logici" all'interno dell'HTML (ad esempio class="nav-item"/class="btn submit-btn") e il CSS applica completamente lo stile e definisce quali elementi appartengono insieme dal punto di vista "stilistico" (es. .nav-item, .submit-btn { background: red; }).

Forse ho totalmente frainteso il concetto. Tuttavia, non conosco ancora un buon modo di costruire il mio CSS.

Answer 1

Il CSS non è orientato agli oggetti. Il mio suggerimento è quello di dimenticare ciò che hai letto su "object oriented CSS" e concentrarti invece sui problemi con i CSS che stai cercando di risolvere. Se vogliono rendere i CSS più facili da scrivere, leggere e mantenere, o per ottenere più funzioni (come le variabili CSS) penso che Less o Sass soddisferanno le tue necessità molto meglio.

L'utilizzo di CSS come quello consigliato con "CSS orientato agli oggetti" porta a un CSS terribile, non semantico e insignificante che a lungo termine non è più semplice da gestire rispetto ai CSS "ordinari". Entrambi id e class dovrebbero avere semantic and meaningful names, quindi utilizzare un framework che consente di scrivere CSS semantico (che descrive l'intento invece della presentazione) è a mio modesto parere molto meglio.

Answer 2

Questo è più di un "salto di nome", cioè un metodo effettivo. Il codice che hai mostrato è spesso dispregiativo chiamato "enterprise css", non ci sono scuse per questo.

Inoltre, la presenza di più classi sugli elementi danneggia le prestazioni.

Consiglio di aderire a Mozilla's guidelines quando si esegue il CSS, che funziona anche per altri browser. E creare file .css dedicati con hack per IE6, 7 e 8.