Comprendere le metodologie di scrittura CSS

In questo post andremo a vedere quali sono le metodologie di scrittura CSS, alcune metodologie ben note e come possono esserci utili per ottimizzare il nostro codice CSS. Iniziamo con la domanda più semplice per far girare la palla. Cos'è una metodologia?

Una metodologia è un sistema di metodi . Pensa a un metodo come a un semplice modo di fare qualcosa in modo sistematico, in un certo modo predefinito di fare le cose per ottenere il risultato che vogliamo.

Per ottenere risultati migliori, miglioriamo i nostri metodi pianificandoli meglio, modificando l'ordine, semplificando i passaggi, qualunque cosa funzioni più velocemente e sia più efficiente .

Metodologia CSS

Parliamo ora della metodologia CSS. Proprio come con qualsiasi cosa nella vita, abbiamo anche un metodo per scrivere CSS: alcuni ripristinano il CSS prima, alcuni stili di layout del posto, alcuni iniziano con due o tre classi per lo styling di un elemento, altri scrivono tutti i codici CSS in un singolo file.

I nostri metodi preferiti sono stati stabiliti da soli nel tempo o influenzati da altri o richiesti nel nostro posto di lavoro o per tutto quanto sopra. Ma nel tempo, i veterani del CSS hanno formulato metodologie per scrivere CSS più flessibili, definiti, riutilizzabili, comprensibili e gestibili .

Daremo un'occhiata a quelle metodologie formulate, che includeranno:

1. OOCSS (Object Oriented CSS)
2. BEM (Block, Element, Modifier)
3. ACSS (atomico CSS)
4. SMACSS (Architettura modulare e scalabile per CSS)

Nota : nessuno dei concetti menzionati di seguito deve essere confuso con qualsiasi framework, libreria o strumento che possa avere lo stesso nome e concetto di queste metodologie. Questo post riguarda solo le metodologie per scrivere CSS.

1. OOCSS

Sviluppato da Nicole Sullivan nel 2008, i concetti chiave di OOCSS (Object Oriented CSS) includono l'identificazione degli oggetti CSS, la separazione della struttura e degli stili visivi ed evitando gli stili basati sulla posizione.

In OOCSS, il primo passo che Nicole ci propone è identificare gli oggetti nei CSS .

"Fondamentalmente, un" oggetto "CSS è un pattern visivo ripetuto, che può essere astratto in uno snippet indipendente di HTML, CSS e possibilmente JavaScript. L'oggetto può quindi essere riutilizzato in tutto il sito. - Nicole Sullivan, Github (OOCSS) "

Prendi ad esempio questa struttura da questo sito. Ecco qualcosa che è un pattern visivo ripetitivo e ha un proprio HTML e / o CSS indipendente:

Abbiamo qui due tipi di oggetti, un'anteprima più grande di titoli che chiameremo post-preview-primary e una barra laterale con titoli che nomineremo post-preview-secondary .

Abbiamo bisogno di separare la struttura e la pelle (cioè gli stili che creano l'aspetto degli oggetti). I due tipi di oggetti hanno strutture differenti, uno è in una scatola più grande anche se sembrano simili, con le immagini a sinistra e i titoli a destra.

Diamo le immagini di entrambi gli oggetti in classe post-preview-image e aggiungiamo il codice che colloca l'immagine a sinistra. Questo ci impedisce di dover ripetere il codice di dove mettere l'immagine all'interno degli oggetti in CSS. Se ci sono altri oggetti simili, riutilizziamo l'immagine post-preview-image per loro.

La separazione della pelle può anche essere eseguita per stili più semplici come bordi o sfondi . Se hai più oggetti con lo stesso bordo blu, creare una classe separata per il bordo blu e aggiungerla agli oggetti ridurrà il numero di volte in cui i bordi blu devono essere codificati in CSS.

Nicole suggerisce anche di non aggiungere stili basati sulla posizione, ad esempio, invece di puntare tutti i link all'interno di un particolare div per evidenziare, dare a quei collegamenti una classe evidenziata con gli stili CSS appropriati. In questo modo quando hai bisogno di evidenziare un link in qualche altra parte della pagina, puoi riutilizzare la classe evidenziatore.

A favore di OOCSS : codici di stili visivi riutilizzabili, codici flessibili di localizzazione, riduzione dei selettori nidificati profondi.

Contro OOCSS : Senza una buona dose di pattern visivi ripetitivi, la struttura di separazione e i codici di stile visivo sembrano non necessari.

2. BEM

Sviluppato dagli sviluppatori di Yandex nel 2009, i concetti chiave per BEM (Block, Element, Modifier) ​​comprendono il blocco identificativo, l' elemento e il modificatore e la loro denominazione di conseguenza.

Un "blocco" è essenzialmente uguale a un "oggetto" (dell'esempio precedente), un "elemento" si riferisce ai componenti del blocco (immagine, titolo, testo di anteprima negli oggetti di preview-post- sopra). Un "modificatore" può essere usato quando lo stato di un blocco o di un elemento cambia, ad esempio quando aggiungi una classe attiva ad una voce di menu per evidenziarla, la classe attiva agisce come modificatore.

Una volta identificati i componenti, nominali di conseguenza. Per esempio:

• un blocco di menu avrà il menu classe
• i suoi elementi avranno la classe menu__item (il blocco e l'elemento sono separati da un doppio trattino basso)
• il modificatore per lo stato disabilitato del menu può avere la classe menu_disabled (modificatore delimitato da un singolo trattino basso)
• il modificatore per lo stato disabilitato di una voce di menu può essere menu__item_disabled .

Per i modificatori, possiamo anche utilizzare il formato key_value per la denominazione. Ad esempio, per distinguere le voci di menu che si collegano a articoli obsoleti, possiamo assegnare loro il menu__item_status_obsolete classe menu__item_status_obsolete e, per disegnare qualsiasi voce di menu che punti a documenti in sospeso, il nome della classe può essere menu__item_status_pending .

La denominazione può essere modificata per ciò che funziona per te. L'idea è di essere in grado di identificare, blocchi, elementi e modificatori dai nomi delle classi . Scopri alcuni dei sistemi di denominazione elencati nel sito BEM.

Il sito di BEM elenca anche come la segregazione di blocchi, elementi e modificatori possa essere introdotta nel file system CSS . I blocchi come "pulsanti" e "input" possono avere le proprie cartelle che consistono dei file (.css, .js) associati a quei blocchi, il che rende le cose più facili quando vogliamo importare quei blocchi in altri progetti.

Vantaggi del BEM: nomi di classe facili da usare e riduzione dei selettori CSS profondi.

Contro di BEM: per mantenere i nomi dall'aspetto sano, BEM consiglia di mantenere il blocco su nesting di elementi poco profondo.

3. ACSS

Reso famoso da Yahoo, da qualche parte vicino alla fine del primo decennio del 21 ° secolo, i concetti chiave dell'ACSS consistono nel creare classi per il livello più atomico dello styling, vale a dire una coppia valore-valore, quindi utilizzarle in HTML secondo necessità.

È difficile determinare quando l'ACSS (Atomic CSS) è stato sviluppato per la prima volta da quando il concetto è in uso da un po 'di tempo. Gli sviluppatori hanno utilizzato classi come .clearfix{overflow: hidden} per molto tempo. L'idea in ACSS è quella di avere una classe per praticamente tutte le coppie di valori-valore riutilizzabili non correlati al contenuto di cui abbiamo bisogno nel nostro sito e per aggiungere tali classi quando necessario agli elementi HTML.

Di seguito è riportato un esempio di classi basate su ACSS e il modo in cui vengono utilizzate in HTML.

 .mr-8 {margin-right: 8px;} .fl-r {float: right;} 

Come puoi vedere, il numero di classi diventerà alto con questo metodo e l'HTML sarà affollato da tutte quelle classi. Questo metodo non è efficace al 100% ma può essere reso utile se desiderato. Yahoo lo usa dopotutto.

A favore di ACSS: Styling HTML senza lasciare HTML.

Contro di ACSS: troppe classi, non molto pulite e potresti odiarlo.

4. SMACSS

Sviluppato nel 2011 da Jonathan Snook SMACSS (Scalable and Modular Architecture for CSS) funziona identificando i 5 diversi tipi di regole di stile. I nomi delle classi e il sistema di archiviazione sono creati sulla base di questi.

"SMACSS è un modo per esaminare il processo di progettazione e come un modo per adattare quelle strutture rigide in un processo di pensiero flessibile. - Jonathan Snook "

SMACSS identifica 5 tipi di regole di stile, ovvero base, layout, modulo, stato e tema .

• Gli stili di base sono gli stili predefiniti diretti ai tag HTML di base come

  , .

• Gli stili di layout sono stili usati per definire il layout della pagina, come la codifica in cui andranno l'intestazione, il piè di pagina e i menu laterali.
• Gli stili del modulo sono specifici per un modulo come galleria o presentazione.
• Gli stili di stato sono per evidenziare elementi con stati modificabili come nascosti o disabilitati.
• Tema è usato per cambiare lo schema visivo della pagina.

Le diverse regole di stile possono essere identificate utilizzando un prefisso nel nome della classe, ad esempio, l-header (per il layout) o t-header (per il tema). Possiamo anche organizzare questi diversi tipi di regole inserendole in file e cartelle separati.

Professionisti di SMACSS: codice meglio organizzato.

Contro di SMACSS : nessuno a cui possa pensare.

C'è un libro online gratuito che puoi leggere su SMACSS, oppure puoi acquistare la sua versione di ebook per studiarla di più.

Conclusione

Le metodologie CSS di cui sopra ti daranno un sistema per gestire e ottimizzare i tuoi codici CSS . Possono essere combinati insieme, come OOCSS-SMACSS o OOCSS-BEM, o BEM-SAMCSS in base alle proprie esigenze.

Ci sono anche framework e librerie se vuoi un sistema automatico per l'esecuzione di metodologie CSS come:

• Quadro OOCSS
• Strumenti BEM
• Framework CSS organico (segue il concetto atomico).