Sådan strukturerer du medier forespørgsler i SASS

Sep 18, 2025

hvordan

Næsten hvert websted er nu bygget med mindst en nik til lydhør webdesign. Den måde, hvorpå vi strukturerer disse responsive stilarter, har en direkte forbindelse til, hvor komplekse projektet vil være at opretholde og redigere i fremtiden, da opdateringer foretages, og projektet vokser i størrelse.

På trods af dette ser det ud til, at en bredt accepteret tilgang til, hvordan og hvor man kan strukturere disse responsive stilarter, endnu ikke vedtages konsekvent af udviklere. Selvom ingen steder nær så slemt som 'de gamle dage' af CSS, før præprocessorer og navngivningsmetoder, forårsager dette en inkonsekvent og ofte rodet tilgang til at strukturere de responsive stilarter for elementer.

Bare komme i gang med dit websted? Vælg en top. Website Builder. og Web Hosting. service. Arbejder med et stort hold? Sørg for din Sky lagring Holder alle opdaterede med dit designsystem.

Hvad er sass?

CSS i fortiden

For at forstå det problem, vi står overfor, lad os gå tilbage til begyndelsen. En af grundene til, at CSS-præprocessorer som SAS-eller mindre blev skabt i første omgang, skyldes, at CSS kan blive ekstremt rodet og er berømt svært at vedligeholde. Vi plejede at finde det efter et stykke tid, selv små websites havde linjer på linjer af CSS-stilarter, der blev efterladt på plads, bare fordi udvikleren var usikker på, om det var påkrævet, eller resterne af et fjernet træk eller forældet element, der kunne slettes.

Tag følgende scenario som et eksempel:

. Heading {Baggrund: # 000000; };
.title {font-størrelse: 16px; };
.title_small {font-størrelse: 14px; }
.title_alt {font-familie: sans-serif; }

Selvom du måske tror, at det er sikkert at antage .Title-elementet er titlen for .hovedelementet i denne sammenhæng, faktisk kan du faktisk ikke være helt sikker på, at det ikke bruges til at style et andet titelelement på webstedet . Også, hvor er .title_alt klasse brugt og er det stadig påkrævet eller i brug? Du kan se, hvor selv med et så simpelt eksempel kan det blive en tidskrævende øvelse for at kontrollere alt dette, før du foretager ændringer.

På grund af dette ville mange udviklere spare tid ved at tilføje en ny klasse til elementet eller bruge en mere kompleks CSS-vælger til at foretage de ændringer, de ønskede, hvilket igen øgede kompleksiteten af CSS for næste gang en ændring var nødvendig. .

Preprocessors, navngivningskonventioner og modulære CSS

Takket være evnen til at redde stilarter, brug variabler, udvide andre klasser og mere, revolutionerede præprocessorer den måde, vi skaber og vedligeholder CSS. Desværre løser de ikke fuldt ud problemet med rodet, forældede stilarter, der spredes og vokser gennem et projekt, som det aldrer som en infektion.

Langs kom neming konventioner og CSS-metoder som f.eks Bem , som, når det påføres, giver et langt større niveau af kontekst til stilarter.

Når de kombineres med at lave variationer, modifikationer og stilarter af indlejrede elementer selvstændig ved anvendelse af CSS moduler. , en virkelig stærk måde at strukturere dine stilarter blev født på.

Nedenfor kan du se, hvordan disse forbedringer kan løse de problemer, vi stødte på med vores tidligere kodeeksempel:

 .heading {
Baggrund: $ Sort;
}

.heading__title {
Font-størrelse: 16px;

& amp; .heading__title - lille {
Font-størrelse: 14px;
}
}

.post__title - alt {
Font-familie: SANS-SERIF;
}

Det er øjeblikkeligt klart, at titelstilstandene her er specifikt indeholdt i overskriftselementet. Du kan sikkert fjerne / redigere disse uden bekymring for at påvirke andre elementer. Du kan også se, at den lille titel var en variation af header-titlen, men at ALT-titelstilet var til et andet element.

Efter min mening, når du følger denne kombination af struktur og navngivningsmetode, er det temmelig nemt at skabe rene, let vedligeholdelsesbare CSS-stilarter. Kontekst kan hurtigt opnås, og selvstændige moduler af CSS kan kopieres og indsættes i andre projekter eller ændres og fjernes med lethed.

Det kan virke som om problemet med rodet og ubehagelig kode blev løst. Men da lydhøredes design blev mere og mere relevant, blev det tydeligt, at vi gentog mange af vores fejl igen og genererede dårligt strukturerede, alt for komplekse tilgange til at skabe lydhørt websteder.

At løse dette problem er, hvor medie forespørgsel boblende kommer i spil.

Responsive Style Locations.

Takket være de nævnte forbedringer i vores tilgang til at skabe CSS, når jeg arver eller samarbejder om et projekt i disse dage, oplever jeg sjældent den frygt eller bekymring, at jeg åbner mig selv op for at falde i en ild af specificitet helvede eller strukturel uorganisering, som jeg brugte at have i disse situationer. Jeg ved nu, at jeg hurtigt kan finde og forstå relevante klasser og stilarter takket være navngivning af metoder og gøre mine ændringer uden fantastiske konsekvenser for andre elementer takket være modulære CSS.

Desværre er en stor årsag til frustration, jeg støder på, at lydhørt stilarter stadig er i strid med hele projektet. De kan godt være indeholdt i en modulær struktur og navngives hensigtsmæssigt i en navngivningsmetode, men projektet efter projekt Jeg ser mange forskellige måder, som udviklere vælger at inkludere deres lydhør stilarter.

Nogle opretter en separat SASS partial ved navn _mobile.scss eller _tablet.scss for eksempel. Nogle placer medieforespørgsler nederst på den relevante fil i stigende eller faldende rækkefølge, og andre placerer bare dem tilfældigt mellem stilarter til andre elementer. Med denne tilgang finder jeg mig selv at feabing mellem filer og rulle til toppen og bunden af filer for blot at få en fuld forståelse af et elements stilarter på tværs af forskellige breakpoints.

Media Query Bubbling.

Som du kan se, er der mange problemer med dette, som alle kombinerer for at få udvikleren til at bruge mere tid på at arbejde på ændringer / ændringsforslag, end det faktisk er nødvendigt.

Det duplikerer stilarter og gør processen med at opretholde og finde alle relevante stilarter til en komponent hårdere. Du skal se på flere steder eller filer for at få et komplet billede af et elements stilarter.
Elementet er ikke længere selvstændigt. Du kan ikke nemt genbruge det i et andet projekt eller selvfølgelig slette / ændre det uden negative virkninger eller dvælende kode tilbage.
For hvert nyt projekt er tiden spildt at finde ud af, hvordan projektet nærmer sig lydhør stilarter.
Skift mellem projekter bliver sværere, fordi du skal skifte mellem tilgange i dit hoved. Dette kan føre til, at projekter ved et uheld har en blanding af tilgange, hvilket igen fører til rodet CSS.

Løsningen, som jeg kan lide at implementere for at løse dette, kaldes Media Query Bubbling. Den enkleste måde at forklare det på er at overveje medieforespørgsler for at være som enhver anden variation af dit modulære element. Det samme som en BEM-variationsklasse af .heading__title er .Heading__Title-Variation, for eksempel. Det betyder, at medieforespørgslen skal indlejres inden for, ligesom dine modificerende klasser. Se følgende kode som et eksempel på dette:

 .Header {
Baggrund: $ Sort;

@media kun skærm og (min bredde: 640px) {
Baggrund: $ Hvid;
}
}

I dette eksempel kan du tydeligt se på et sted, at baggrunden for overskriften skifter til hvid ved 640px eller højere. Ved selvholdig medie forespørgsel sammen med elementets stilarter har du igen oprettet et helt selvstændigt modul, der kan genbruges eller redigeres med tillid. Der er ikke behov for at krydse en _mobile.scss-fil eller søge på projektet for andre nævnelser af klassen for at være sikker på at du har dækket alle breakpoints.

Nested medie forespørgsel boblende

Igen har jeg set mange variationer af, hvordan udviklere vælger at strukturere de responsive stilarter af deres elementer. Dette bør betragtes som ikke anderledes end styling af moderselskabet, og alle medieforespørgsler og stilarter bør være selvstændige. Se følgende eksempel:

 .Heading__title {
Font-størrelse: 16px;

@media kun skærm og (min bredde: 640px) {
Font-størrelse: 18px;
}

& amp; .heading__title - lille {
Font-størrelse: 14px;

@media kun skærm og (min bredde: 640px) {
Font-størrelse: 16px;
}
}
}

Du kan se, at skrifttypestørrelsen til overskriften__Title bliver større, når visningsporten er 640px eller større, og hvordan den mindre variation af overskriften titel også udvider, men er defineret til at være mindre end standard. Ved hjælp af denne teknik er det meget vigtigt at anvende BEM-metoden stærkt for at sikre, at du ikke ender med at nestes flere niveauer dybt. For eksempel sikre, at. Heading__Title-elementet er et selvstændigt CSS-modul, der ikke er unødigt indlejret inden for .hovedelementet.

Cleaner Responsive Styles.

Ved at tage det, vi lærte af fordelene ved BEM og MODULAR CSS og anvender det til medieforespørgsler inden for samme struktur, ophører vi os med at gentage fejlene i vores fortid.

Ved at arbejde med medieforespørgsler på denne måde behøver du ikke at lære en helt ny metode eller struktur til dine stilarter. Vi tager stort set den modulære CSS-tilgang og anvender det til vores medieforespørgsler, som skal føle sig ret naturligt.

Vi skaber også renere CSS med mindre duplikering af CSS-klasser på tværs af filer og gemmer udviklingstiden ved at fjerne behovet for at kontrollere flere steder, når de ændrer sig.

Denne artikel blev oprindeligt offentliggjort i net , bladet til professionelle webdesignere og udviklere. Abonner på nettet her .

Relaterede artikler:

Lav cool UI CSS animationer med SASS
10 ting, du aldrig vidste, at du kunne gøre med SASS
Webdesign værktøjer til at hjælpe dig med at arbejde smartere

Sådan strukturerer du medier forespørgsler i SASS

CSS i fortiden

Preprocessors, navngivningskonventioner og modulære CSS

Responsive Style Locations.

Media Query Bubbling.

Nested medie forespørgsel boblende

Cleaner Responsive Styles.

hvordan - Mest populære artikler

Sådan bruges referencebilleder: 13 Væsentlige tips til kunstnere

Sådan tegner du et hoved: En komplet vejledning

Portrætfotografi: Sådan tager du perfekte portrætter

ANIMATE SVG med JavaScript

Rebuild en 2004-flashwebsted for 2018

Sådan maler du overbevisende refleksioner

Tegn en blyantportræt af en hund

10 Top Houdini Tutorials

Kategorier