Cum se structurează interogările media în SASS

Sep 12, 2025

să

Practic, fiecare site este acum construit cu cel puțin un semn de design web receptiv. Modul în care structurăm aceste stiluri receptive are o legătură directă cu privire la modul în care este complexul pe care proiectul va fi menținerea și editarea în viitor, deoarece se fac actualizări, iar proiectul crește în dimensiune.

În ciuda acestui fapt, se pare că o abordare larg acceptată pentru modul în care și unde să se structureze aceste stiluri receptive nu trebuie să fie adoptată în mod constant de către dezvoltatori. Deși nicăieri la fel de rău ca "vremurile vechi" ale CSS, înainte de preprocesoare și metodologii de numire, aceasta provoacă o abordare inconsecventă și adesea dezordonată pentru a structura stilurile receptive pentru elemente.

Doar am început cu site-ul dvs.? Alegeți un top Builder de site-uri web și web hosting serviciu. Lucrul cu o echipă mare? Asigurați-vă că ați făcut-o Stocare in cloud Păstrează toată lumea la curent cu sistemul dvs. de proiectare.

Ce este SASS?

Css în trecut

Pentru a înțelege problema cu care ne confruntăm, să ne întoarcem la început. Unul dintre motivele pentru care preprocesoarele CSS, cum ar fi SASS sau mai puțin, au fost create în primul rând, deoarece CSS poate deveni extrem de dezordonată și este greu de întreținut. Am folosit pentru a găsi că, după un timp, chiar și site-urile mici au avut linii pe linii de stiluri CSS care au fost lăsate în loc doar pentru că dezvoltatorul nu era sigur dacă era necesar sau rămășițele unei caracteristici eliminate sau elemente depășite care ar putea fi șterse.

Luați următorul scenariu ca exemplu:

 .Heading {fundal: # 000000; };
.itle {font-dimensiune: 16px; };
.title_small {font-dimensiune: 14px; }
.TITLE_ALT {FONT-FAMILIA: SANS-SERIF; }

Deși este posibil să credeți că este sigur să presupunem că elementul .itle este titlul pentru elementul .heading în acest context, de fapt nu puteți fi complet sigur că nu este folosit pentru a modela orice alt element de titlu din site . De asemenea, unde este clasa .TITLE_ALT folosită și este încă necesar sau în uz? Puteți vedea cum chiar și cu un astfel de exemplu simplu poate deveni un exercițiu consumator de timp pentru a verifica toate acestea înainte de a efectua modificări.

Din acest motiv, o mulțime de dezvoltatori ar economisi timp prin adăugarea unei noi clase la element sau folosind un selector CSS mai complex pentru a face schimbările pe care le-au dorit, care, la rândul lor, au crescut complexitatea CSS pentru data viitoare când a fost necesară o schimbare .

Preprocesoare, Convenții de numire și CSS modulare

Datorită capacității de a cuibări stiluri, utilizați variabile, extindeți alte clase și multe altele, preprocesoarele au revoluționat modul în care creăm și menținem CSS. Din păcate, ele nu rezolvă pe deplin problema stilurilor dezordonate, învechite, care se răspândesc și cresc pe tot parcursul unui proiect pe măsură ce îmbătrânesc o infecție.

De-a lungul convențiilor de numire și a metodologiilor CSS, cum ar fi BEM. , care, atunci când este aplicat dau un nivel mult mai mare de context față de stiluri.

Când este combinat cu efectuarea de variații, modificări și stilurile elementelor imbricate se autonomă prin utilizarea Module CSS. , sa născut o modalitate foarte puternică de a vă structura stilurile.

Mai jos puteți vedea cum aceste îmbunătățiri pot rezolva problemele pe care le-am întâlnit cu exemplul de cod anterior:

.
Fundal: $ negru;
}

.Heading__title {
font-dimensiune: 16px;

& amp; .head __title - mici {
font-dimensiune: 14px;
}
}

.post__title - Alt {
Font-Family: Sans-Seif;
}

Este clarificat instantaneu că stilurile de titlu sunt conținute în mod specific în cadrul elementului de poziție. Puteți elimina în siguranță / editați aceste fără griji de a afecta alte elemente. De asemenea, puteți vedea că titlul mic a fost o variație a titlului antetului, dar stilul titlului Alt a fost pentru un alt element.

În opinia mea, când urmați această combinație de structură și metodologie de numire, este destul de ușor să creați stiluri CSS curate, ușor de întreținut. Contextul poate fi rapid câștigat și module autonome ale CSS pot fi copiate și lipite în alte proiecte sau modificate și eliminate cu ușurință.

Poate părea că problema codului dezordonat și nemaipomenit a fost rezolvată. Dar, pe măsură ce designul receptiv a devenit din ce în ce mai relevant, a devenit evident că repetăm multe dintre greșelile noastre din nou și generând abordări extrem de structurate, prea complexe pentru crearea unor site-uri responsabile.

Rezolvarea acestei probleme este locul în care se intră în joc de interogare media.

Locații de stil receptive

Datorită îmbunătățirilor menționate în abordarea noastră de a crea CSS, ori de câte ori moștenesc sau colaborează într-un proiect în aceste zile, am experimentat rareori groaza sau îngrijorarea că mă deschid pentru a cădea într-un incendiu de specificitate sau dezorganizare structurală pe care am folosit-o să aibă în aceste situații. Acum știu că pot găsi și voi înțelege rapid clasele și stilurile relevante datorită metodologiilor de numire și fac schimbările fără consecințe inimaginabile la alte elemente, datorită CSS modulară.

Din păcate, o cauză majoră de frustrare pe care o întâlnesc este că stilurile receptive sunt încă situate inconsecvent pe tot parcursul proiectului. Acestea pot fi conținute într-o structură modulară și denumite în mod corespunzător într-o metodologie de numire, dar proiectul prin proiect văd multe modalități diferite pe care dezvoltatorii aleg să le includă stilurile lor receptive.

Unele creează un parțial SASS separat numit _mobile.scss sau _tablet.scss, de exemplu. Unele interogări media în partea de jos a fișierului relevant în ordine ascendentă sau descendentă și alții doar le plasează aleatoriu între stiluri pentru alte elemente. Cu această abordare, mă găsesc tabbing între fișiere și derulare în partea de sus și de jos a fișierelor doar pentru a obține o înțelegere completă a stilurilor unui element în diferite puncte de întrerupere.

Bubbling interogare media

După cum puteți vedea, există multe probleme cu acest lucru care combină toate pentru a determina dezvoltatorul să petreacă mai mult timp să lucreze la schimbări / amendamente decât este de fapt necesar.

Acesta duplică stilurile și face procesul de menținere și de a găsi toate stilurile relevante pentru o componentă mai greu. Trebuie să vă uitați în mai multe locații sau fișiere pentru a obține o imagine completă a stilurilor unui element.
Elementul nu mai este autonom. Nu puteți reutiliza cu ușurință într-un alt proiect sau cu încredere să ștergeți / modificați-l fără efecte adverse sau un cod persistent rămas.
Pentru fiecare proiect nou, timpul este irosit imaginând modul în care proiectul abordează stilurile receptive.
Comutarea între proiecte devine mai greu, deoarece trebuie să comutați între abordările din cap. Acest lucru poate duce la proiecte având accidental un amestec de abordări, care din nou duce la CSS dezordonat.

Soluția pe care îmi place să o pun în aplicare pentru a remedia acest lucru se numește Bubbling interogare media. Cea mai simplă modalitate de a explica este să luați în considerare interogările media să fie ca orice altă variantă a elementului dvs. modular. Același lucru ca o clasă de variație a BEM a .Heading__title este .Head __TiTle-variație, de exemplu. Aceasta înseamnă că interogarea media ar trebui să fie imbricată în interiorul, la fel ca și clasele dvs. de modificare. Consultați următorul cod ca un exemplu de acest exemplu:

 .Header {
Fundal: $ negru;

@Media numai ecran și (min-lățime: 640px) {
fundal: $ alb;
}
}

În acest exemplu, puteți vedea clar într-o singură locație că fundalul pentru antetul se schimbă în alb la 640px sau mai mare. Prin auto-conținând interogarea media împreună cu stilurile elementului, ați creat încă o dată un modul complet autonom care poate fi reutilizat sau editat cu încredere. Nu este nevoie să verificați un fișier _Mobile.scss sau să căutați proiectul pentru alte mențiuni ale clasei pentru a vă asigura că ați acoperit toate punctele de întrerupere.

Qusted suport media bubbling

Din nou, am văzut multe variații ale modului în care dezvoltatorii aleg să structureze stilurile receptive ale elementelor lor. Acest lucru ar trebui să fie considerat diferit de styling elementul părinte și toate interogările și stilurile media ar trebui să fie autonome. Consultați următorul exemplu:

 .Heading__title {
font-dimensiune: 16px;

@Media numai ecran și (min-lățime: 640px) {
font-dimensiune: 18px;
}

& amp; .head __title - mici {
font-dimensiune: 14px;

@Media numai ecran și (min-lățime: 640px) {
font-dimensiune: 16px;
}
}
}

Puteți vedea că dimensiunea fontului pentru rubrica __title devine mai mare atunci când funcția de vizualizare este de 640px sau mai mare și modul în care variația mai mică a titlului poziției mărește, de asemenea, dar este definită ca fiind mai mică decât standardul. Folosind această tehnică, este foarte important să aplicați puternic metodologia BEM pentru a vă asigura că nu ajungeți să cuibați mai multe niveluri adânci. De exemplu, asigurați-vă că elementul .heading__title este un modul CSS autonom care nu este imbricat inutil în elementul .heading.

Stiluri receptive mai curate

Prin luarea a ceea ce am învățat din beneficiile oferite de BEM și CSS modulare și aplicându-l la interogările mass-media în aceeași structură, ne oprim să repetăm greșelile trecutului nostru.

Lucrând cu interogări media în acest fel, nu trebuie să învățați o metodologie sau o structură complet nouă pentru stilurile dvs. În principiu, luăm abordarea modulară CSS și aplicarea acesteia la întrebările noastre media, care ar trebui să se simtă destul de naturală.

De asemenea, creăm CSS CSS cu mai puțină dublare a claselor CSS între fișiere și economisind timpul de dezvoltare prin eliminarea necesității de a verifica mai multe locații la efectuarea modificărilor.

Acest articol a fost publicat inițial în net , revista pentru designeri și dezvoltatori profesioniști. Abonați-vă la net aici .

Articole similare:

Creați animații CSS cool cu SASS
10 lucruri pe care nu le știți niciodată că ați putea face cu SASS
Instrumente de design web pentru a vă ajuta să lucrați mai inteligent

Cum se structurează interogările media în SASS

Css în trecut

Preprocesoare, Convenții de numire și CSS modulare

Locații de stil receptive

Bubbling interogare media

Qusted suport media bubbling

Stiluri receptive mai curate

să - Cele mai populare articole

Cum să atragă un trandafir: sfaturi începător și avansate

Folosiți instrumentul Pen și textul pentru a adăuga adâncimea în Photoshop

Cum se face și de a folosi un mahlstick pentru pictura

Master Știința optimizării ratei de conversie

Creați o imagine interactivă parallax

Construiți un site de comerț electronic de la zero

vopsea ca un impresionist

Cum să obțineți mai mult din GIF-uri

Categorii