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 rotolare la palla. Che 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, cambiando l'ordine, semplificando le fasi - qualunque cosa funzioni Più veloce ed è di 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 a causa di tutto quanto sopra. Ma nel tempo, i veterani dei CSS hanno formulato metodologie per scrivere CSS questo è di più flessibile, definito, riutilizzabile, comprensibile e trattabile.

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 i CSS oggetto identificazione, separazione della struttura e stili visivi ed evitando stili basati sulla localizzazione.

In OOCSS, il primo passo che Nicole ci propone è di farlo identificare oggetti in CSS.

“Fondamentalmente, un "oggetto" CSS è un pattern visivo ripetuto, che può essere astratto in uno snippet indipendente di HTML, CSS e possibilmente JavaScript. Tale 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 nomineremo post-anteprima-primaria e una barra laterale con titoli che nomineremo post-anteprima-secondaria.

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

Diamo una classe alle immagini di entrambi gli oggetti post-anteprima-immagine e aggiungi il codice che mette 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 post-anteprima-immagine per loro.

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

Anche Nicole suggerisce di farlo non aggiungi stili in base alla posizione, per esempio, invece di puntare tutti i link all'interno di un particolare div per evidenziare, dai a questi link a classe evidenziatore con gli stili CSS appropriati. In questo modo quando è necessario evidenziare un collegamento in qualche altra parte della pagina, è possibile riutilizzare la classe evidenziatore.

Professionisti di OOCSS: Codici di stili visivi riutilizzabili, codici flessibili di localizzazione, riduzione di selettori nidificati profondi.

Contro di 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 l'identificazione bloccare, elemento & modificatore e nominandoli di conseguenza.

UN “bloccare” è essenzialmente uguale a un “oggetto”(dall'esempio precedente), a “elemento” si riferisce ai componenti del blocco (immagine, titolo, testo di anteprima in alto) Anteprima-post- oggetti). UN “modificatore” può essere usato quando lo stato di un blocco o di un elemento cambia, ad esempio quando aggiungi una classe attiva a 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à la classe menu
• i suoi oggetti avranno la classe elemento del menu (il blocco e l'elemento sono separati da un trattino doppio)
• il modificatore per lo stato disabilitato del menu può avere la classe menu_disabled (modificatore delimitato da un singolo carattere di sottolineatura)
• modificatore per lo stato disabilitato di una voce di menu può essere menu__item_disabled.

Per i modificatori, possiamo anche usare key_value formato per la denominazione. Ad esempio, per distinguere qualsiasi voce di menu che si collega ad articoli obsoleti, possiamo dare loro la classe menu__item_status_obsolete, e per lo styling di qualsiasi voce di menu che punta 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 il blocco, l'elemento e la segregazione del modificatore possono essere portati nel file system CSS. I blocchi come “pulsanti” e “ingressi” può avere le proprie cartelle che consistono dei file (.css, .js) che sono associati a quei blocchi, il che rende le cose più facili quando vogliamo importare quei blocchi in altri progetti.

A favore di BEM:Nomi di classi facili da usare e riduzione dei selettori CSS profondi.

Contro di BEM:Per mantenere i nomi di bell'aspetto, BEM consiglia di mantenere basso il blocco degli elementi.

3. ACSS

Reso famoso da Yahoo, da qualche parte vicino alla fine del primo decennio del 21^st secolo, i concetti chiave di ACSS consistono nella creazione di classi per il livello più atomico di stile, vale a dire una coppia valore-valore, quindi usandole 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 è avere una classe per quasi tutte le coppie valore-valore riutilizzabili non correlate ai contenuti avremo bisogno nel nostro sito e di aggiungere quelle classi quando necessario agli elementi HTML.

Di seguito è riportato un esempio di classi basate su ACSS e in che modo 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 dopo tutto.

Professionisti di ACSS:Stile HTML senza lasciare HTML.

Contro di ACSS:Troppe classi, non molto ordinate 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 vale a dire base, layout, modulo, stato, e tema.

• Gli stili 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.

A favore di SMACSS:Codice meglio organizzato.

Contro di SMACSS: Nessuno a cui riesco a 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 gestire e ottimizzare i tuoi codici CSS. Possono essere combinati insieme, come OOCSS-SMACSS, o OOCSS-BEM, o BEM-SAMCSS per soddisfare le tue 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).