Dovrei usare OOCSS in un tema CSS?

Question

Dovrei usare OOCSS in un tema CSS?

#1 da (8 voti)

2

Ho sentito parlare di OOCSS qualche tempo fa, ma non l'ho mai veramente studiato. Oggi l'ho fatto e ho pensato alle implicazioni dell'applicazione di OOCSS a un semplice tema CSS. Un problema a cui ho pensato è che, per sua natura, OOCSS incoraggia DRYness e di conseguenza l'uso di molte classi concise che dovrebbero essere applicate agli elementi dallo sviluppatore HTML. Come tema CSS, suppongo che non sia qualcosa di abbastanza significativo da permettere a uno sviluppatore di andare fuori dal suo modo di aggiungere classi specifiche ai loro elementi quando scrivono HTML:

<button class="blue rounded no-border $etc">Button</button>

al contrario di:

<button>Button</button>

Forse gli sviluppatori HTML sarebbero OK con la scrittura del codice extra, anche se sembra che ci sia tanto codice ripetuto sul lato HTML come sarebbe senza OOCSS. Quindi, OOCSS non è una metodologia valida per scrivere codice CSS, come in questo esempio? O non sto capendo le cose correttamente?

object-oriented html web-development css

posta Marco Scannadinari 26.04.2014 - 00:40

fonte

1 risposta

Leggi altre domande sui tag object-oriented html web-development css

E 'normale aver bisogno di tempo per capire il codice che ho scritto di recente [chiuso] Chi crea la definizione agile di done (DoD)?

score 8 · Accepted Answer

Penso che OOCSS tramite il tuo esempio sia un anti-pattern che non fornisce una chiara separazione delle preoccupazioni (html vs css) e non ti fornisce html semantico né css.

La separazione delle preoccupazioni è che l'HTML riguarda la struttura di un documento, mentre il CSS è interessato a come viene presentato quel documento.

<button class="green rounded no-border">Save</button>
<button class="grey rounded no-border">Cancel</button>

Con il seguente css:

.green { 
    color: #0f0; 
}

.grey { 
    color: #777; 
}

.rounded { 
    border-radius: 5px; 
}

.no-border { 
    border: none; 
}

Violare questa separazione di preoccupazioni avendo il documento HTML che indica che il pulsante di salvataggio dovrebbe essere verde (invece che CSS lo dice).

Mentre OOCSS è progettato per ridurre la quantità di codice che scrivi, finisce per essere un incubo di manutenzione dovendo dichiarare molte classi (non semantiche). Supponiamo che in seguito desideri che tutti i pulsanti di salvataggio siano blu, hai intenzione di cambiare la tua classe verde in blu, o stai andando a fare un ctrl+f in tutti i tuoi file sorgente e aggiornare il testo in verde in blu?

Un buon modo per introdurre la riusabilità mantenendo allo stesso tempo l'HTML / CSS semantico consiste nell'utilizzare un compilatore CSS (come less.js per esempio).

<button class="primary-action">Save</button>
<button class="cancel-action">Cancel</button>

Con il seguente less.js:

/* these are reusable variables */
@primary-action-color: #0f0;
@cancel-action-color: #777;

/* this is a re-usable "mixin" */
.rounded() { 
    border-radius: 5px; 
}

button {
    border: none;
    .rounded;

    .primary-action {
        color: @primary-action-color;
    }

    .cancel-action {
        color: @cancel-action-color;
    }
}

Anche se inizialmente è più un codice, quando inizi a riutilizzare queste variabili / mixin sarai in grado di trarre vantaggio dall'HTML semantico e dai CSS organizzati. Ad esempio, poiché cancel-action ha un buon nome significativo, puoi già aggiungere funzionalità alla tua app che hanno senso. Prendiamo ad esempio il seguente jQuery.

$("button.cancel-action").click(function(e){
    if (!confirm('are you sure you want to cancel?')) {
        e.preventDefault();
    }
});