Hur man strukturerar medifrågor i Sass

Sep 13, 2025

Hur

Praktiskt taget varje webbplats är nu byggd med åtminstone en nod till lyhörd webbdesign. Det sätt på vilket vi strukturerar dessa lyhörda stilar har ett direkt förhållande till hur komplicerat projektet kommer att vara att behålla och redigera i framtiden eftersom uppdateringar görs och projektet växer i storlek.

Trots detta verkar det som om ett allmänt accepterat tillvägagångssätt för hur och vart man ska strukturera dessa lyhörda stilar ännu inte kan antas konsekvent av utvecklare. Även om ingenstans nära så illa som "de gamla dagarna" av CSS, före förprocessorer och namngivningsmetoder, orsakar detta ett inkonsekvent och ofta rörigt tillvägagångssätt för att strukturera de svarande stilerna för element.

Bara komma igång med din webbplats? Plocka en topp Website Builder och webbhotell service. Arbetar med ett stort lag? Se till att du molnlagring Håller alla uppdaterade med ditt designsystem.

Vad är sass?

CSS i det förflutna

För att förstå det problem vi står inför, låt oss gå tillbaka till början. En av anledningarna till att CSS preprocessorer som Sass eller mindre skapades i första hand, beror på att CSS kan bli extremt rörigt och är känt svårt att behålla. Vi brukade finna att efter ett tag hade även små webbplatser linjer på linjer av CSS-stilar som lämnades på plats bara för att utvecklaren var osäker på om det var nödvändigt eller rester av ett borttaget funktion eller föråldrat element som kunde raderas.

Ta följande scenario som ett exempel:

 .heading {bakgrund: # 000000; };
.title {Font-size: 16px; };
.title_small {Font-size: 14px; }
.title_alt {font-familj: sans-serif; }

Även om du kanske tror att det är säkert att anta. Title-elementet är titeln för. Heading-elementet i det här sammanhanget, kan du faktiskt inte vara helt säker på att det inte är vanligt att stila något annat titelelement på webbplatsen . Också, var är det. Title_alt klass används och är det fortfarande nödvändigt eller i bruk? Du kan se hur även med ett så enkelt exempel kan det bli en tidskrävande övning för att kontrollera allt detta innan du ändrar.

På grund av detta skulle massor av utvecklare spara tid genom att lägga till en ny klass till elementet eller använda en mer komplex CSS-väljare för att göra de förändringar de önskade, som sedan ökade CSS-komplexiteten för nästa gång en förändring behövdes .

Preprocessorer, namngivningskonventioner och modulära CSS

Tack vare förmågan att neststilar, använd variabler, förlänga andra klasser och mer, preprocessor revolutionerade hur vi skapar och upprätthåller CSS. Tyvärr löser de inte problemet med rörigt, föråldrade stilar som sprids och växer genom ett projekt som det som en infektion.

Längs kom namngivningskonventioner och CSS-metoder som Bem , som när det tillämpas ger en mycket större nivå av kontext till stilar.

I kombination med att göra variationer, modifieringar och stilar av kapslade element som är självständiga med användning av CSS-moduler , ett riktigt starkt sätt att strukturera dina stilar föddes.

Nedan kan du se hur dessa förbättringar kan lösa de problem vi stött på med vårt tidigare kodexempel:

. Heading {
Bakgrund: $ svart;
}

.heading__title {
FONT-STORLEK: 16PX;

& amp; .heading__title - liten {
Font-storlek: 14px;
}
}

.post__title - Alt {
Font-familj: sans-serif;
}

Det är omedelbart klart att titeln stilar här är specifikt innehållna i rubrikementet. Du kan säkert ta bort / redigera dessa utan oro för att påverka andra element. Du kan också se att den lilla titeln var en variation av rubriken titeln, men att alt titel stil var för ett annat element.

Enligt min åsikt, när den följer denna kombination av struktur och namngivning, är det ganska lätt att skapa rena, lätt underhållbara CSS-stilar. Kontexten kan snabbt uppnås och fristående moduler av CSS kan kopieras och klistras in i andra projekt, eller ändras och tas bort med lätthet.

Det kan tyckas som om problemet med rörig och oanvändbar kod löstes. Men som lyhörd design blev allt mer relevant blev det uppenbart att vi upprepade många av våra misstag igen och genererade dåligt strukturerade, alltför komplicerade tillvägagångssätt för att skapa svariva webbplatser.

Att lösa detta problem är där mediafråga bubbling kommer i spel.

Responsive Style Placeringar

Tack vare de nämnda förbättringarna i vårt tillvägagångssätt för att skapa CSS, när jag ärver eller samarbetar på ett projekt, upplever jag sällan den rädda eller oro som jag öppnade mig upp för att falla i en spets av specificitet helvete eller strukturell disorganisation som jag använde att ha i dessa situationer. Jag vet nu att jag snabbt kan hitta och förstå relevanta klasser och stilar tack vare namngivningsmetoder och göra mina ändringar utan ofattbara konsekvenser för andra element, tack vare Modular CSS.

Tyvärr är en viktig orsak till frustration jag stöter på att lyhörda stilar fortfarande är inkonsekvent belägna i hela projektet. De kan väl innehålla i en modulär struktur och namngivna på lämpligt sätt i en namngivningsmetod, men projektet av projektet ser jag många olika sätt som utvecklare väljer att inkludera sina lyhörda stilar.

Vissa skapar en separat sass partial som heter _mobile.scss eller _tablet.scss till exempel. Vissa platsmediafrågor längst ner i den relevanta filen i stigande eller nedåtgående ordning och andra bara placerar dem slumpmässigt mellan stilar för andra element. Med detta tillvägagångssätt finner jag mig att tappa mellan filer och rulla till toppen och botten av filer bara för att få en fullständig förståelse för ett elements stilar över olika brytpunkter.

Media Query bubbling

Som du kan se finns det många problem med detta som alla kombinerar för att få utvecklaren att spendera mer tid på att arbeta med förändringar / ändringar än vad som faktiskt behövs.

Det duplicerar stilar och gör processen att behålla och hitta alla relevanta stilar för en komponent hårdare. Du måste titta på flera platser eller filer för att få en komplett bild av ett elements stilar.
Elementet är inte längre självständigt. Du kan inte enkelt återanvända det i ett annat projekt eller med självsäkert ta bort / ändra det utan att de är negativa eller långvariga koden kvar.
För varje nytt projekt är tiden bortkastad att räkna ut hur det projektet närmar sig responsiva stilar.
Växling mellan projekt blir hårdare eftersom du måste byta mellan metoder i ditt huvud. Detta kan leda till att projekt av misstag har en blandning av tillvägagångssätt, vilket återigen leder till rörig CSS.

Lösningen som jag gillar att implementera för att fixa detta kallas mediafråga bubbling. Det enklaste sättet att förklara det är att överväga mediefrågor att vara som någon annan variation av ditt modulära element. Detsamma som en BEM-variationsklass av .heading__Title är .heading__Title-variation, till exempel. Det betyder att medifrågan ska nestas in, precis som dina modifierande klasser. Se följande kod som ett exempel på detta:

 .header {
Bakgrund: $ svart;

@media endast skärm och (min-bredd: 640px) {
Bakgrund: $ vit;
}
}

I det här exemplet kan du tydligt se på en plats som bakgrunden för huvudet ändras till vit vid 640px eller högre. Genom att självständigt innehålla medifrågan tillsammans med elementets stilar har du återigen skapat en helt fristående modul som kan återanvändas eller redigeras med förtroende. Det finns inget behov av att korsa en _mobile.scss-fil eller söka på projektet för andra nämnder i klassen för att vara säker på att du har täckt alla brytpunkter.

Nested Media Query Bubbling

Återigen har jag sett många variationer av hur utvecklare väljer att strukturera de svarande stilarna i deras element. Detta bör betraktas som inte annorlunda än styling av moderelementet och alla medifrågor och stilar ska vara fristående. Se följande exempel:

 .heading__title {
FONT-STORLEK: 16PX;

@media endast skärm och (min-bredd: 640px) {
Fontstorlek: 18px;
}

& amp; .heading__title - liten {
Font-storlek: 14px;

@media endast skärm och (min-bredd: 640px) {
FONT-STORLEK: 16PX;
}
}
}

Du kan se att teckensnittstorleken för rubriken __Title blir större när visningsporten är 640px eller större och hur den mindre variationen av rubrikstiteln också förstorar men definieras vara mindre än standard. Med hjälp av denna teknik är det mycket viktigt att tillämpa BEM-metodiken starkt för att du inte hamnar på flera nivåer djupt. Till exempel, se till att .heading__Title-elementet är en självständig CSS-modul som inte är obehagligt nestat i. Heading-elementet.

Cleaner Responsive Styles

Genom att ta det vi lärde oss av de fördelar som Bem och Modular CSS tillhandahåller och att applicera det på medifrågor inom samma struktur, stoppar vi oss från att upprepa vårt förflutna misstag.

Genom att arbeta med medifrågor på det här sättet behöver du inte lära dig en helt ny metod eller struktur för dina stilar. Vi tar i grund och botten den modulära CSS-tillvägagångssättet och applicerar det på våra medifrågor, vilket borde känna sig ganska naturligt.

Vi skapar också renare CSS med mindre dubbelarbete av CSS-klasser över filer och sparar utvecklingstid genom att ta bort behovet av att kontrollera flera platser när de ändras.

Denna artikel publicerades ursprungligen i netto , tidningen för professionella webbdesigners och utvecklare. Prenumerera på nätet här .

Relaterade artiklar:

Skapa coola UI CSS-animationer med SASS
10 saker som du aldrig visste att du kunde göra med sass
Webbdesignverktyg som hjälper dig att arbeta smartare

Hur man strukturerar medifrågor i Sass

CSS i det förflutna

Preprocessorer, namngivningskonventioner och modulära CSS

Responsive Style Placeringar

Media Query bubbling

Nested Media Query Bubbling

Cleaner Responsive Styles

Hur - Mest populära artiklar

Cloud Storage för foton och bilder: Hur man väljer det bästa molnet för ditt arbete

Hur man undviker en Amazon Prime Day 2020 misslyckas

14 ZBRUSH WORKFLOW TIPS

Skapa Slick UI-animationer

4 Viktiga bildoptimeringstips

Måla ett furigt husdjursporträtt

Skapa perspektiv genom att vrida dina texturer i Photoshop

Hur man lägger till data till dina skissdesigner

Kategorier