Jak strukturować zapytania medialne w Sass

Sep 15, 2025

Jak

Praktycznie każda strona jest teraz zbudowana z przynajmniej skinieniem do reagującym do projektowania stron internetowych. Sposób, w jaki struktura, w jaki te responsywne style ma bezpośrednią relację do tego, w jaki sposób kompleksowy projekt będzie w celu utrzymania i edycji w przyszłości, ponieważ aktualizacje są wykonane, a projekt rośnie.

Mimo to wydaje się, że jest to powszechnie przyjęte podejście do tego, jak i gdzie struktura te responsywne style nie jest jeszcze przyjmowane konsekwentnie przez programistów. Chociaż nigdzie nie jest tak źle, jak "dawne dni CSS przed preprocesorami i metodologiami nazewnictwa, powoduje to niespójne i często brudne podejście do strukturyzacji reagujących stylów dla elementów.

Po prostu zacznij od swojej witryny? Wybierz górę Kreator strony internetowej i hosting usługa. Praca z dużym zespołem? Upewnij się magazyn w chmurze Utrzymuje wszystkim na bieżąco z systemem projektowym.

Co to jest Sass?

CSS w przeszłości

Aby zrozumieć problem, przed którym stoimy, wróćmy do początku. Jednym z powodów, dla których preprocesory CSS, takie jak Sass lub mniej, powstały w pierwszej kolejności, jest to, że CSS może uzyskać niezwykle bałagan i jest słynnie do utrzymania. Uważaliśmy, że po pewnym czasie, nawet małe strony internetowe miały linie na liniach stylów CSS, które pozostały na miejscu, ponieważ deweloper był niepewny, jeśli był to wymagane lub pozostałości usuniętego funkcji lub przestarzałego elementu, który można usunąć.

Weź następujący scenariusz jako przykład:

 .heading {tło: # 000000; };
.Title {font-size: 16px; };
.Title_small {rozmiar czcionki: 14px; }
.Title_alt {font-family: sans-serif; }

Chociaż możesz myśleć, że jest bezpieczny, że jest to bezpieczne, że element .Title jest tytuł dla elementu .heading w tym kontekście, w rzeczywistości nie możesz być całkowicie pewien, że nie jest używany do stylu innego elementu tytułu w miejscu . Również gdzie jest używana klasa .tle_alt i jest nadal wymagana lub w użyciu? Możesz zobaczyć, jak nawet z takim prostym przykładem może stać się czasochłonne ćwiczenia, aby sprawdzić to wszystko przed dokonaniem zmian.

Z tego powodu wielu deweloperów zaoszczędziłby czas, dodając nową klasę do elementu lub za pomocą bardziej złożonego selektora CSS, aby zmienić wybrane zmiany, co następnie z kolei zwiększyło złożoność CSS na następny zmianę .

Preprocesory, konwencje nazewnictwa i modułowe CSS

Dzięki zdolności do gniazdowania stylów, stosować zmienne, rozszerzyć inne klasy, a więcej, przedwczesne preprecesory zrewolucjonizowały sposób, w jaki tworzymy i utrzymujemy CSS. Niestety nie rozwiązują w pełni problemu bałaganu, przestarzałych stylów, które rozprzestrzeniają się i rosną w całym projekcie, jak w wieku, jak w przypadku infekcji.

Wzdłuż przyszłych konwencji i metodologii CSS, takich jak Bem. , który po zastosowaniu daje znacznie większy poziom kontekstu do stylów.

W połączeniu z odmianami, modyfikacjami i stylami zagnieżdżonych elementów samodzielnie za pomocą Moduły CSS. , Naprawdę silny sposób na strukturę urodzonego stylów.

Poniżej widać, jak te ulepszenia mogą rozwiązać problemy, które napotkaliśmy z naszym wcześniejszym kodem:

 .heading {
Tło: $ czarny;
}

.heading__title {
Rozmiar czcionki: 16px;

& amp; .heading__title - mały {
Rozmiar czcionki: 14px;
}
}

.post__title - alt {
Czcionka: Sans-Serif;
}

Należy natychmiast usunąć, że style tytułu są specjalnie zawarte w elemencie nagłówka. Możesz bezpiecznie usunąć / edytować, nie martw się o wpływanie na inne elementy. Można również zobaczyć, że mały tytuł był zmiennością tytułu nagłówka, ale styl tytułu Alt był dla innego elementu.

Moim zdaniem, podążając za tym połączeniem struktury i metodologii nazewnictwa, jest dość łatwo tworzyć czyste, łatwe do utrzymania stylów CSS. Context można szybko zdobyć, a samodzielne moduły CSS można skopiować i wkleić w innych projektach lub zmienionych i usuniętych z łatwością.

Może się wydawać, że problem został rozwiązany problem z brudnym i nieoczeskim kodem. Ale ponieważ responsywny projekt stał się coraz bardziej istotny, stało się oczywiste, że powtarzaliśmy wiele naszych błędów ponownie i generując źle zorganizowane, zbyt skomplikowane podejścia do tworzenia responsywnych stron internetowych.

Rozwiązywanie tego problemu polega na tym, gdzie pojawia się baniek zapytania do mediów.

Responsive Style Lokalizacje

Dzięki wspomnianym ulepszeniom w naszym podejściu do tworzenia CSS, gdy dziedzictwo lub współpracę w tym dniach w tych dniach, rzadko doświadczam strachu lub troski, że otwieram się, by wpaść w ogień związany ze specyfika i dezorganizacją strukturalną, którą użyłem mieć w tych sytuacjach. Teraz wiem, że mogę szybko znaleźć i zrozumieć odpowiednie klasy i style dzięki metodologiom nazewnictwa i wprowadzić moje zmiany bez niewyobrażalnych konsekwencji do innych elementów, dzięki modułowym CSS.

Niestety jedna ważna przyczyna frustracji, którą spotkam, jest to, że responsywne style są nadal niespójnie zlokalizowane w całym projekcie. Mogą być zawarte w strukturze modułowej i odpowiednio nazwane w metodologii nazewnictwa, ale projekt według projektu widzę wiele różnych sposobów, aby programistom wybierają dołączenie ich responsywnych stylów.

Niektórzy tworzą na przykład oddzielną częściową Sass Named _Mobile.Scss lub _tablet.scss. Niektóre zapytań multimedialne na dole odpowiedniego pliku w porządku rosnącym lub malejącym, a inni znajdują je losowo między stylami dla innych elementów. Z tym podejściem znajduję się, znajduję się z plików i przewijam do góry i dołu plików, aby uzyskać pełne zrozumienie stylów jednego elementu w różnych punktach przerwania.

Query Media Bubbling.

Jak widać, istnieje wiele problemów z tym, że wszystkie łączą się, aby deweloperowi spędza więcej czasu na pracę nad zmianami / poprawkami niż w rzeczywistości.

Doplicza style i proces utrzymania i znalezienia wszystkich odpowiednich stylów dla komponentu ciężej. Musisz spojrzeć w wielu lokalizacjach lub plikach, aby uzyskać pełny obraz stylów elementu.
Element nie jest już samodzielny. Nie możesz łatwo ponowić go w innym projekcie lub pewnie usunąć / zmienić go bez negatywnych wpływów lub pozostałych kodu utrzymującego.
Dla każdego nowego projektu czas jest zmarnowany przez to, jak ten projekt zbliża się do reagujących stylów.
Przełączanie między projektami staje się trudniejsze, ponieważ musisz przełączać między podejśćami w głowie. Może to prowadzić do przypadkowych projektów mających mieszankę podejść, które ponownie prowadzi do brudnego CSS.

Rozwiązanie, które lubię wdrożyć, aby naprawić to nazywa się bąbelkiem zapytania o media. Najprostszym sposobem wyjaśnienia należy rozważyć zapytania medialne, aby były jak każda inna zmienność elementu modułowego. Tak samo jak klasa zmienności bemu .heading__title jest na przykład .heading__Title-Variation, na przykład. Oznacza to, że zapytanie medialne powinny być zagnieżdżone, podobnie jak twoje klasy modyfikujące. Zobacz poniższy kod jako przykład tego:

 .header {
Tło: $ czarny;

@media tylko ekran i (min-szerokość: 640px) {
Tło: $ White;
}
}

W tym przykładzie można wyraźnie zobaczyć w jednej lokalizacji, że tło dla nagłówka zmienia się na biały o 640px lub wyższym. Wraz z samonezą zawierającą zapytanie multimedialne wraz z elementami elementu, po raz kolejny utworzyłeś całkowicie samodzielny moduł, który może być ponownie wykorzystany lub edytowany z pewnością. Nie ma potrzeby przekroczenia pliku _Mobile.Scss lub przeszukaj projekt dla innych wspomnienia o klasie, aby upewnić się, że pokryłeś wszystkie punkty przerwania.

Zagnieżdżone zapytanie multimedialne bulgotanie

Ponownie widziałem wiele wariantów tego, jak deweloperzy wybierają strukturę responsywnych stylów ich elementów. Należy to uznać za inny niż stylizacja elementu macierzystego i wszystkie zapytania i style multimedialne powinny być samodzielne. Zobacz poniższy przykład:

 .heading__title {
Rozmiar czcionki: 16px;

@media tylko ekran i (min-szerokość: 640px) {
Rozmiar czcionki: 18px;
}

& amp; .heading__title - mały {
Rozmiar czcionki: 14px;

@media tylko ekran i (min-szerokość: 640px) {
Rozmiar czcionki: 16px;
}
}
}

Widać, że rozmiar czcionki dla pozycji_title staje się większy, gdy rzutnia ma 640px lub większa i jak mniejsza odmiana tytułu tytułowego również powiększa, ale jest zdefiniowana jako mniejsza niż standard. Korzystając z tej techniki, bardzo ważne jest, aby zdecydowanie stosować metodologię BEM, aby zapewnić, że nie trafisz do gniazdowania kilku poziomów głębokości. Na przykład, upewnić się, że element .heading__Title jest samodzielnym modułem CSS, który nie jest niepotrzebnie zagnieżdżony w elemencie .heading.

Cleaner Responsive Style.

Biorąc to, czego nauczyliśmy się z korzyści zapewnianych przez BEM i modułowe CSS i stosując go do zapytań multimedialnych w tej samej strukturze, zatrzymujemy się od powtarzania błędów naszej przeszłości.

Dzięki pracy z zapytaniami multimediów w ten sposób nie musisz nauczyć się całkowicie nowej metodologii ani struktury dla swoich stylów. W zasadzie biorę modułowe podejście CSS i stosujemy go do naszych zapytań medialnych, które powinny czuć się dość naturalne.

Tworzymy również czyszczące CSS z mniejszą powielaniem klas CSS w różnych plikach i zapisywanie czasu rozwoju, usuwając potrzebę sprawdzenia wielu lokalizacji podczas wytwarzania.

Ten artykuł został pierwotnie opublikowany netto , Magazyn dla profesjonalnych projektantów stron internetowych i programistów. Subskrybuj netto tutaj .

Powiązane artykuły:

Utwórz fajne animacje CSS z Sass
10 rzeczy, których nigdy nie wiedziałeś, że możesz zrobić z Sass
Narzędzia do projektowania stron internetowych, aby pomóc Ci pracować mądrzej

Jak strukturować zapytania medialne w Sass

CSS w przeszłości

Preprocesory, konwencje nazewnictwa i modułowe CSS

Responsive Style Lokalizacje

Query Media Bubbling.

Zagnieżdżone zapytanie multimedialne bulgotanie

Cleaner Responsive Style.

Jak - Najpopularniejsze artykuły

Jak tworzyć wnętrza z Eeveeem Blenderem

Jak tworzyć tekst usterki i efekty obrazu w CSS

Utwórz świecący Efekt tekstowy Neon

Zbuduj złożoną scenę 3D Sci-Fi w blenderze

Jak podkreślić centralny punkt obrazu

Jak tworzyć futrzane postacie z kreskówek

Jak tworzyć kolorowe światy, które opowiadają historię

Przygotuj swoją pracę do drukowania 3D: 8 najlepszych wskazówek

Kategorie