Le basi del CSS orientato agli oggetti (OOCSS)

Lo sviluppo del frontend si muove rapidamente con molte nuove tecniche aggiunte ogni anno. Può essere una lotta per gli sviluppatori tenere il passo con tutto. Tra Sass e PostCSS è facile perdersi nel mare degli strumenti di sviluppo.

Una tecnica più recente è il CSS orientato agli oggetti, chiamato anche OOCSS. Questo non è uno strumento, ma piuttosto una metodologia di scrittura CSS che mira a rendere i CSS modulari e basati su oggetti.

In questo post, vorrei presentare il fondamentali fondamentali di OOCSS, e come queste idee possono essere applicate al lavoro web frontend. Questa tecnica potrebbe non interferire con tutti gli sviluppatori, ma vale la pena comprendere nuovi concetti per decidere se il tuo flusso di lavoro potrebbe trarne vantaggio.

Cosa rende CSS orientato agli oggetti?

La programmazione orientata agli oggetti (OOP) è un paradigma di programmazione su cui si concentra creare oggetti riutilizzabili e stabilire relazioni tra di loro, al contrario di una programmazione procedurale che organizza il codice in procedure (routine, subroutine o funzioni).

OOP è diventato ampiamente utilizzato in entrambi Lingue JavaScript e back-end negli ultimi anni, ma l'organizzazione dei CSS secondo i suoi principi è ancora un concetto nuovo.

Il “oggetto” in OOCSS si riferisce a un Elemento HTML o qualsiasi cosa associata (come le classi CSS o i metodi JavaScript). Ad esempio, potresti avere un oggetto widget della barra laterale che potrebbe essere replicato per scopi diversi (iscrizione a newsletter, blocchi di annunci, post recenti, ecc.). CSS può indirizzare questi oggetti in massa che rende il ridimensionamento un gioco da ragazzi.

Riassumendo la voce GitHub di OOCSS, un oggetto CSS può essere costituito da quattro cose:

1. Nodo HTML (s) del DOM
2. Dichiarazioni CSS sullo stile di quei nodi
3. Componenti come le immagini di sfondo
4. Comportamenti, listener o metodi JavaScript associati a un oggetto

In generale, i CSS sono orientati agli oggetti quando lo considerano classi che sono riutilizzabili e indirizzabile a più elementi di pagina.

Molti sviluppatori direbbero che OOCSS è più facile da condividere con gli altri e più facile da raccogliere dopo mesi (o anni) di sviluppo inattivo. Questo si confronta con altri metodi modulari come SMACSS che ha regole più severe per la categorizzazione di oggetti in CSS.

La pagina delle FAQ di OOCSS contiene molte informazioni se sei curioso di saperne di più. E la creatrice Nicole Sullivan parla spesso di OOCSS e di come si collega allo sviluppo del web moderno.

Separare la struttura dallo stile

Una parte importante di OOCSS è la scrittura di codice che separa la struttura della pagina (larghezza, altezza, margini, riempimento) dall'aspetto (caratteri, colori, animazioni). Questo permette skinning personalizzato da applicare su più elementi di pagina senza influenzare la struttura.

Questo è anche utile per progettare componenti che possono essere spostato intorno al layout facilmente. Ad esempio, a “messaggi recenti” il widget nella barra laterale dovrebbe essere mobile nel piè di pagina o sopra il contenuto mantenendo stili simili.

Ecco un esempio di OOCSS per a “messaggi recenti” widget che in questo caso è il nostro oggetto CSS:

 / * Struttura * / .side-widget larghezza: 100%; imbottitura: 10px 5px;  / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; colore: # 2b2b2b; font-size: 1.45em;  

Notare che disposizione è gestito con .side-widget di classe che potrebbe essere applicata anche a più elementi della barra laterale, mentre aspetto è gestito con .messaggi recenti classe che potrebbe essere utilizzata anche per rivestire altri widget. Ad esempio, se il .messaggi recenti il widget è stato spostato sul footer, potrebbe non avere lo stesso posizionamento, ma potrebbe avere lo stesso aspetto e aspetto.

Dai anche un'occhiata a questo esempio della barra laterale di CodePen. Utilizza una distinta separazione di classi per float e allineamento del testo in modo tale la replica non richiederà un codice CSS aggiuntivo.

Separare il contenitore dal contenuto

Separazione del contenuto dal suo elemento contenitore è un altro importante principio di OOCSS.

In termini più semplici, questo significa solo che dovresti evitare l'uso di selettori figlio ogni volta che è possibile. Quando si personalizzano elementi di pagina univoci come link di ancoraggio, intestazioni, blockquotes o elenchi non ordinati, è necessario assegnare loro classi univoche anziché selettori discendenti.

Ecco un semplice esempio:

 / * OOCSS * / .sidebar / * contenuto della barra laterale * / h2.sidebar-title / * stili di elementi speciali di h2 * / / * Non-OOCSS * / .sidebar / * stesso contenuto della barra laterale * / .sidebar h2 / * aggiunge più specificità del necessario * / 

Sebbene non sia orrendo utilizzare il secondo formato di codice, è fortemente consigliato seguire il primo formato se si desidera scrivere OOCSS pulito.

Linee guida per lo sviluppo

È difficile stabilire le specifiche esatte perché gli sviluppatori discutono costantemente lo scopo di OOCSS. Ma qui ci sono alcuni suggerimenti che possono aiutarti a scrivere codice OOCSS più pulito:

• Lavorare con classi invece di ID per lo styling.
• Prova a astenersi dalla specificità di classe discendenti a più livelli se non necessario.
• Definire stili unici con classi ripetibili (ad esempio float, clearfix, stack di font univoci).
• Estendi elementi con classi mirate piuttosto che le classi genitore.
• Organizza il tuo foglio di stile in sezioni, considera l'aggiunta di un sommario.

Tieni presente che gli sviluppatori devono comunque utilizzare gli ID per il targeting JavaScript, ma non sono necessari per CSS perché sono troppo specifici. Se un oggetto utilizza un ID per lo stile CSS, non può mai essere replicato poiché gli ID sono identificativi univoci. Se usi solo classi per lo styling, allora l'ereditarietà diventa molto più facile da prevedere.

Inoltre, le classi possono essere concatenate insieme per funzionalità extra. A un singolo elemento potrebbero essere associate più di 10 classi. Mentre 10+ classi su un elemento non sono qualcosa che personalmente raccomanderò, ciò consente agli sviluppatori di accumulare una libreria di stili riutilizzabili per elementi di pagina illimitati.

I nomi delle classi all'interno di OOCSS sono alquanto controversi e non scolpiti nella pietra. Molti sviluppatori preferiscono mantenere le lezioni brevi e al punto.

Il caso Camel è anche popolare, per esempio .errorBox invece di .Errore-box. Se osservi la denominazione delle classi nella documentazione di OOCSS, noterai che il caso dei cammelli è il “ufficiale” raccomandazione. Non c'è niente di sbagliato nei trattini, ma di norma è meglio seguire le linee guida di OOCSS.

OOCSS + Sass

La maggior parte degli sviluppatori web già amano Sass e ha rapidamente superato la comunità dei frontend. Se non hai già provato Sass, vale la pena dargli un colpo. Permette di scrivere codice con variabili, funzioni, metodi di annidamento e compilazione come funzioni matematiche.

In mani competenti, Sass e OOCSS potrebbero essere una partita fatta in paradiso. Troverai un eccellente articolo su questo blog di The Sass Way.

Ad esempio, usando il Sass @estendere direttiva puoi applicare le proprietà di una classe a un'altra classe. Le proprietà non sono duplicate ma, al contrario, le due classi sono combinate con un selettore di virgola. In questo modo è possibile aggiornare le proprietà CSS in un'unica posizione.

Se continui a scrivere fogli di stile, ciò salverebbe ore di battitura e aiuto automatizzare il processo OOCSS.

Ricorda anche questo la manutenzione del codice è una parte importante di OOCSS. Usando Sass, il tuo lavoro diventa più facile con variabili, mixin e strumenti avanzati di linting legati al flusso di lavoro.

Un attributo chiave del grande codice OOCSS è il possibilità di condividerlo con chiunque, anche te stesso in un secondo momento, ed essere in grado di prenderlo con facilità.

Considerazioni sulle prestazioni

OOCSS è pensato per funzionare senza intoppi e senza molta confusione. Gli sviluppatori fanno del loro meglio non per ripetere se stessi ad ogni turno, infatti questa è la premessa dietro lo sviluppo di DRY. Nel corso del tempo, la tecnica OOCSS può portare a centinaia di classi CSS con proprietà individuali applicate decine di volte in un determinato documento.

Dal momento che OOCSS è ancora un argomento nuovo, è difficile discutere sul tema del bloat. Molti file CSS finiscono gonfiati di una piccola struttura, mentre OOCSS fornisce una struttura rigida e (idealmente) meno gonfia. La principale preoccupazione per le prestazioni sarebbe nell'HTML, dove alcuni elementi possono accumulare una manciata di classi diverse per la struttura e la progettazione del layout.

Troverai interessanti discussioni su questo argomento su siti come Stack Overflow e CSS-Tricks.

La mia raccomandazione è di provare a costruire un progetto di esempio e vedere come va. Se ti innamori di OOCSS, potrebbe cambiare radicalmente il modo in cui codifichi i siti web. In alternativa, se lo odi, stai ancora imparando una nuova tecnica e stai pensando in modo critico a come funziona. È win-win, non importa cosa.

Impegnati a scrivere OOCSS

Il modo migliore per imparare qualsiasi cosa nello sviluppo web è praticare. Se comprendi già le basi dei CSS, allora sei sulla buona strada!

Poiché OOCSS non richiede la pre-elaborazione, è possibile provarlo con un IDE online, ad esempio CodePen. I progetti semplici sono i migliori per iniziare e migliorare le tue conoscenze da lì.

Dai un'occhiata a queste risorse per approfondire la tua ricerca nel campo in evoluzione di OOCSS.

• Sito ufficiale OOCSS
• CSS orientato agli oggetti: cosa, come e perché
• OOCSS + Sass = Il modo migliore per CSS
• Un'introduzione ai CSS orientati agli oggetti