CONTATTACI

Blog

Illustrazione di un developer che attraverso un VR vede pianeti fluttuare

Medologie CSS per strutturare il tuo codice: BEM, OOCSS e SMACSS

Lavorare con i file CSS è una pratica frequente per un web developer. Pertanto, conoscere le metodologie CSS per gestire al meglio il proprio “flow” del codice può rivelarsi davvero utile. Il linguaggio CSS è molto versatile per la customizzazione dei propri siti web, proprio grazie alla gestione dei fogli stile. Ma andiamo più in profondità.
 

CSS, cos’è?

Il linguaggio CSS gestisce il design e la presentazione delle pagine web. La sigla Cascading Style Sheets riflette il compito che i cosiddetti fogli stile ricoprono. Tramite il linguaggio CSS (sempre in commistione con il linguaggio HTML) potremo gestire al meglio le regole e le caratteristiche estetiche che governeranno la nostra pagina web.

Quando si lavora con fogli di stile CSS per progetti complessi, la corretta strutturazione del codice diventa fondamentale per la manutenibilità e la scalabilità del progetto. Fortunatamente, esistono diverse metodologie CSS che forniscono linee guida e convenzioni per organizzare il codice in modo efficace. In questo articolo, esploreremo tre metodologie CSS popolari: BEM, OOCSS e SMACSS.

 

Metodologia CSS BEM (Block-Element-Modifier)

BEM, che sta per Block-Element-Modifier ed è una metodologia CSS che si basa sulla creazione di componenti autonomi e riusabili. La struttura di base di BEM consiste nei seguenti elementi:

Blocco: un’entità indipendente e autonoma di una pagina.

Elemento: una parte di un blocco che non ha senso di per sé e ha un ruolo specifico solo all’interno del blocco.

Modificatore: una variante di un blocco o elemento che altera il suo aspetto o comportamento.

La convenzione di denominazione di questa metodologia è basata su una sintassi che utilizza classi separate da trattini. Ad esempio, “.block”, “.block__element”, “.block–modifier”. Questa sintassi esplicita aiuta a distinguere chiaramente la struttura dei componenti nel codice CSS.

 

Metodologia CSS OOCSS (Object-Oriented CSS)

OOCSS è una metodologia che si concentra sulla separazione delle strutture e degli stili CSS. L’obiettivo principale di OOCSS è la creazione di componenti riutilizzabili che possono essere applicati in diverse parti del sito web. I principi chiave di OOCSS includono:

– Separare la struttura (scheletro) dal design (pelle) dei componenti.

– Utilizzare classi che descrivono le caratteristiche funzionali dei componenti, invece di specificare lo stile visivo.

– Promuovere la riusabilità dei componenti mediante la creazione di regole CSS indipendenti dalle specificità del contesto.

 

Con OOCSS, è possibile creare classi CSS che definiscono caratteristiche e proprietà di base, evitando lo stile specifico per un particolare contesto o situazione. Questa metodologia trae ispirazione dal noto paradigma di programmazione ad oggetti ad oggi adottato da numerosi linguaggi di programmazione.

 

Metodologia CSS SMACSS (Scalable and Modular Architecture for CSS)

SMACSS è una metodologia che fornisce una struttura modulare per organizzare il codice CSS specialmente se si affrontano progetti di grandi dimensioni. Gli obiettivi della metodologia SMACSS sono:

 

– Suddividere il codice CSS in moduli indipendenti.

– Utilizzare una struttura di directory ben definita per separare i diversi tipi di stili.

– Definire regole chiare per l’ereditarietà e l’overriding delle proprietà CSS.

– Favorire l’estensibilità e la manutenibilità del codice.

 

SMACSS propone cinque categorie principali per organizzare i moduli CSS: Base, Layout, Modulo, Stato e Tema. Questa suddivisione aiuta a mantenere il codice ben strutturato e facile da gestire.

 

Le metodologie del linguaggio CSS come BEM, OOCSS e SMACSS offrono strumenti e linee guida utili per modulare il codice CSS in progetti complessi. Ognuna di queste metodologie ha i suoi principi e convenzioni, ma tutte mirano a migliorare la manutenibilità, la riusabilità e la scalabilità del codice CSS. Scegli la metodologia che meglio si adatta alle tue esigenze e al tuo progetto e segui le sue convenzioni per creare un codice CSS pulito e ben organizzato.

Non hai ancora dimestichezza con le basi della programmazione informatica? Niente paura!
Abbiamo preparato per te una guida html e css in italiano! Corri a leggerla! 

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.