Come strutturare le query dei supporti in Sass

Sep 11, 2025

Come si fa

Praticamente ogni sito ora è costruito con almeno un cenno del web design reattivo. Il modo in cui strutturaremo questi stili reattivi ha una relazione diretta con quanto complesso il progetto sarà quello di mantenere e modificare in futuro come aggiornamenti e il progetto cresce di dimensioni.

Nonostante questo, sembra che un approccio ampiamente accettato per come e dove strutturare questi stili reattivi non sia ancora adottato in modo coerente dagli sviluppatori. Anche se da nessuna parte quasi come "i vecchi tempi" del CSS, prima di preprocessori e metodologie di nomina, questo sta causando un approccio inconsistente e spesso disordinato per strutturare gli stili reattivi per gli elementi.

Basta iniziare con il tuo sito? Scegli un top. Builder del sito web e web hosting servizio. Lavorando con una grande squadra? Assicurati che il tuo deposito cloud. Mantiene tutti aggiornati con il tuo sistema di progettazione.

Cos'è il sass?

CSS in passato

Per capire il problema che stiamo affrontando, torniamo all'inizio. Uno dei motivi per cui i preprocessori CSS come Sass o meno sono stati creati in primo luogo è perché CSS può diventare estremamente disordinato ed è notoriamente difficile da mantenere. Abbiamo usato che dopo un po ', anche piccoli siti Web avevano linee su linee di stili CSS che sono stati lasciati in posizione solo perché lo sviluppatore non era sicuro se è stato richiesto o i resti di una funzione rimossa o un elemento obsoleto che potrebbe essere eliminato.

Prendi il seguente scenario come esempio:

. Heading {background: # 000000; };;
.Title {font-Dimensione: 16 px; };;
.title_small {font-dimensione: 14px; }
.tivitle_alt {font-family: sans-serif; }

Sebbene tu possa pensare che sia sicuro assumere l'elemento .title è il titolo per l'elemento .heading in questo contesto, infatti non puoi effettivamente essere completamente sicuro che non sia usato per modellare qualsiasi altro elemento del titolo nel sito . Inoltre, dov'è .title_alt class usato ed è ancora richiesto o in uso? Puoi vedere quanti nemmeno con un esempio semplice può diventare un esercizio che richiede tempo per controllare tutto questo prima di apportare modifiche.

A causa di ciò, molti sviluppatori risparmiano tempo aggiungendo una nuova classe all'elemento o utilizzando un selettore CSS più complesso per apportare le modifiche desiderate, che poi a sua volta aumentano la complessità del CSS per la prossima volta che è necessario un cambio .

Precocessori, convenzioni di denominazione e CSS modulare

Grazie alla capacità di nidificare gli stili, utilizzare le variabili, estendere altre classi e altro, i preprocessori hanno rivoluzionato il modo in cui creiamo e manteniamo CSS. Sfortunatamente non risolvono completamente il problema degli stili disordinati e obsoleti che si diffondono e crescono durante un progetto come invecchia come un'infezione.

Lungo le convenzioni di denominazione e le metodologie CSS come Bem. , che quando applicato dà un livello molto maggiore di contesto agli stili.

Se combinato con la produzione di variazioni, modifiche e gli stili di elementi nidificati autonomi utilizzando Moduli CSS. È nato un modo davvero forte per strutturare i tuoi stili.

Sotto puoi vedere come questi miglioramenti possono risolvere i problemi che abbiamo incontrato con il nostro precedente esempio di codice:

. Elevato {
Sfondo: $ nero;
}

.heading__title {
dimensione del carattere: 16 px;

& amp; .heading__title - Small {
Dimensione del carattere: 14px;
}
}

.post__title - alt {
Fammon-family: sans-serif;
}

È immediatamente chiaro che gli stili del titolo qui sono specificamente contenuti nell'elemento di intestazione. Puoi tranquillamente rimuovere / modificarli senza preoccuparsi di influenzare altri elementi. Puoi anche vedere che il piccolo titolo era una variazione del titolo di intestazione, ma che lo stile del titolo ALT fosse per un altro elemento.

A mio parere, quando si segue questa combinazione di metodologia struttura e denominazione, è abbastanza facile creare stili CSS puliti e facilmente manutenibili. Il contesto può essere rapidamente acquisito e i moduli autonomi di CSS possono essere copiati e incollati in altri progetti o modificati e rimossi con facilità.

Può sembrare che il problema del codice disordinato e inattuante sia stato risolto. Ma il design reattivo è diventato sempre più rilevante, è diventato evidente che stavamo ripetendo ancora molti dei nostri errori e generando approcci gravemente strutturati e eccessivamente complessi per creare siti reattivi.

La risoluzione di questo problema è qui che entra in gioco il gruppo multimediale.

Luoghi di stile reattivi

Grazie ai citati miglioramenti del nostro approccio alla creazione di CSS, ogni volta che erediti o collaborano in questi giorni in questi giorni, vivo raramente il terrore o la preoccupazione che mi stavo aprendo fino a cadere in un incendio di specificità inferno o disorganizzazione strutturale che ho usato avere in quelle situazioni. Ora so che posso trovare rapidamente e comprendere le classi e gli stili pertinenti grazie alle metodologie di denominazione e rendono le mie modifiche senza conseguenze inimmaginabili ad altri elementi, grazie a CSS modulari.

Sfortunatamente una principale causa di frustrazione che incontro è che gli stili reattivi sono ancora incoerenti in modo incoerente in tutto il progetto. Potrebbero essere contenuti all'interno di una struttura modulare e nominata in modo appropriato in una metodologia di denominazione, ma progetto per progetto vedo molti modi diversi che gli sviluppatori scelgono di includere i loro stili reattivi.

Alcuni creano un sassero separato parziale denominato _mobile.scs o _Tablet.SCSS per esempio. Alcune piazzano le query dei supporti nella parte inferiore del file pertinente in ordine ascendente o decrescente e altri posizionarli casualmente tra gli stili per altri elementi. Con questo approccio, mi trovo a tappezzare tra i file e lo scorrimento verso la parte superiore e inferiore dei file solo per ottenere una piena comprensione degli stili di un elemento in diversi punti di interruzione.

Problema dei media Bubbling.

Come puoi vedere, ci sono molti problemi con questo che tutti si combinano per causare lo sviluppatore di spendere più tempo a lavorare su modifiche / emendamenti di quanto sia effettivamente necessario.

Duplica gli stili e rende il processo di mantenimento e la ricerca di tutti gli stili pertinenti per un componente più difficile. Devi guardare in più posizioni o file per ottenere un'immagine completa degli stili di un elemento.
L'elemento non è più autonomo. Non è possibile riutilizzarlo facilmente in un altro progetto o di eliminare con sicurezza / modificarlo senza effetti negativi o codice persistente rimanente.
Per ogni nuovo progetto, il tempo è sprecato a capire come quel progetto si avvicina agli stili reattivi.
La commutazione tra i progetti diventa più difficile perché è necessario passare da un approccio nella tua testa. Ciò può portare a progetti accidentalmente avere un mix di approcci, che porta nuovamente a CSS disordinata.

La soluzione che mi piace implementare per correggere questo è chiamata query multimediale gorgogliante. Il modo più semplice per spiegare è considerare le query dei media per essere come qualsiasi altra variazione del tuo elemento modulare. Lo stesso di una classe di variazione BEM di .Heading__title è. Heading__title-Variation, ad esempio. Ciò significa che la query del supporto deve essere annidata all'interno, proprio come le tue classi di modifica. Vedi il seguente codice come esempio di questo:

 .Header {
Sfondo: $ nero;

@media solo schermo e (min-width: 640px) {
Sfondo: $ bianco;
}
}

In questo esempio, è possibile vedere chiaramente in un'unica posizione che lo sfondo per l'intestazione cambia in bianco a 640px o superiore. Per auto-contenente la query del supporto insieme agli stili dell'elemento, è ancora una volta creato un modulo totalmente autonomo che può essere riutilizzato o modificato con fiducia. Non è necessario attraversare un file _mobile.Scsss o cercare il progetto per altre menzioni della classe per assicurarsi di aver coperto tutti i punti di interruzione.

Query multimediale annidato

Ancora una volta, ho visto molte varianti su come gli sviluppatori scelgono di strutturare gli stili reattivi dei loro elementi. Questo dovrebbe essere considerato diverso dallo styling dell'elemento genitore e di tutte le query dei supporti e gli stili dovrebbero essere autonomi. Vedi il seguente esempio:

 .heading__title {
dimensione del carattere: 16 px;

@media solo schermo e (min-width: 640px) {
Font-Dimensione: 18 px;
}

& amp; .heading__title - Small {
Dimensione del carattere: 14px;

@media solo schermo e (min-width: 640px) {
dimensione del carattere: 16 px;
}
}
}

È possibile vedere che la dimensione del carattere per l'intestazione__title diventa più grande quando il punto di vista è 640px o più grande e come viene anche definita la variazione più piccola del titolo di intestazione, ma è definita per essere più piccola dello standard. Usando questa tecnica, è molto importante applicare fortemente la metodologia BEM per assicurarti di non finire per annidare più livelli in profondità. Ad esempio, assicurarsi che l'elemento .heading__title sia un modulo CSS autonomo che non è inutilmente annidato all'interno dell'elemento.

Stili reattivi puliti

Prendendo ciò che abbiamo imparato dai benefici forniti da BEM e CSS modulare e applicandolo alle query dei media all'interno della stessa struttura, ci fermiamo a ripetere gli errori del nostro passato.

Lavorando con le query dei media in questo modo, non devi imparare una metodologia o una struttura totalmente nuova per i tuoi stili. Fondamentalmente stiamo prendendo l'approccio modulare CSS e applicandolo alle nostre query dei media, che dovrebbero sentirsi abbastanza naturali.

La creazione di CSS più pulita con meno duplicazione delle classi CSS tra i file e il risparmio del tempo di sviluppo rimuovendo la necessità di controllare più posizioni quando si effettuano ammenda.

Questo articolo è stato originariamente pubblicato in netto , la rivista per web designer e sviluppatori professionisti. Iscriviti alla rete qui .

Articoli Correlati:

Crea fantastiche animazioni Ui CSS con Sass
10 cose che non hai mai saputo che potresti fare con il sass
Strumenti di progettazione Web per aiutarti a lavorare in modo più intelligente

Come strutturare le query dei supporti in Sass

CSS in passato

Precocessori, convenzioni di denominazione e CSS modulare

Luoghi di stile reattivi

Problema dei media Bubbling.

Query multimediale annidato

Stili reattivi puliti

Come si fa - Articoli più popolari

Come creare un collage di foto in Photoshop cc

condurre test utente gratuiti e veloci con UserLook

Crea un umano digitale realistico

Master la scienza dell'ottimizzazione del tasso di conversione

Crea un'immagine parallasse interattiva

Impara ad animare per i bambini

Aggiorna le tue trame in Prostanze Designer

Come fare lettering 3D in Illustrator

Categorie