Як структурувати Media Queries в SASS

Sep 11, 2025

Як

Практично кожен сайт тепер побудований принаймні кивкою до чуйного веб-дизайну. Те, як ми структураємо ці чуйні стилі, має пряме відношення до того, наскільки складним проектом буде підтримувати та редагувати в майбутньому, оскільки проект здійснюється, і проект зростає за розміром.

Незважаючи на це, здається, що широко прийнятий підхід до того, як і де структурувати ці чутливі стилі ще не приймаються послідовно розробниками. Незважаючи на те, що не поруч, як «старі часи» CSS, до попередніх процесів та методологій імен, це викликає непослідовний і часто брудний підхід до структурування чутливих стилів для елементів.

Просто починається з вашого сайту? Вибирати вершину Веб-будівельник і веб хостинг Сервіс. Робота з великою командою? Переконайтеся, що ваш хмара зберігання Зберігає всіх в курсі своєї конструкторської системи.

Що таке сас?

CSS в минулому

Щоб зрозуміти проблему, яку ми стикаємося, давайте повернемося до початку. Однією з причин, з якими вони були створені попередніпроцесори CSS, такі як SASS або менше, були створені, оскільки CSS може отримати надзвичайно брудний і значно важко підтримувати. Ми використовували, що через деякий час, навіть невеликі веб-сайти мали рядки на лінії стилів CSS, які залишилися на місці, тому що розробник не був не впевнений, якщо це було потрібно, або залишки видаленої функції або застарілого елемента, який можна було б видалити.

Введіть наступний сценарій як приклад:

 .hehding {background: # 000000; };
.title {шрифт-розмір: 16px; };
.title_small {шрифт-розмір: 14px; }
.title_alt {font-family: sans-serif; }

Хоча ви можете подумати, що безпечно припустити, що елемент .Title - це заголовок для елемента .Heading у цьому контексті, насправді ви не можете бути повністю впевненими, що він не використовується для стилю будь-якого іншого елемента заголовка на сайті . Крім того, де використовується .Title_Alt Class і це все ще потрібно або використовується? Ви можете побачити, як навіть з таким простим прикладом він може стати трудомістким заняттям, щоб перевірити все це, перш ніж вносити зміни.

Через це багато розробників заощаджує час, додавши новий клас до елемента або використання більш складного селектора CSS, щоб змінювати, як бажані, які, то, у свою чергу, збільшили складність CSS на наступний раз, що змінилася зміна .

Попередніпроцесорні конвенції та модульні CSS

Завдяки здатності гніздити стилі, використовуйте змінні, розширювати інші класи та більше, попередники революціонували спосіб, який ми створюємо та підтримували CSS. На жаль, вони не повністю вирішують проблему брудних, застарілих стилів, які поширюються і зростають протягом усього проекту, як це віком, як інфекція.

Уздовж назв конвенцій та методології CSS, такі як Байдарка , який, коли застосовується, дає набагато більший рівень контексту до стилів.

При поєднанні з виготовленням варіацій, модифікацій та стилів вкладених елементів, що містяться за допомогою Модулі CSS , дійсно сильний спосіб структурувати ваші стилі народилися.

Нижче ви можете побачити, як ці поліпшення можуть вирішити проблеми, з якими ми зустрічаються з нашим попереднім прикладом коду:

 .heading {
фон: $ чорний;
}

.Heading__title {
шрифт: 16px;

& amp; .Heading__title - маленький {
шрифт: 14px;
}
}

.post__title - Alt {
Шрифт-Сім'я: SANS-Serif;
}

Миттєво зрозуміло, що стилі титулу тут конкретно містяться в заголовку елемента. Ви можете безпечно видалити / редагувати їх, не турбуючись про вплив інших елементів. Ви також можете побачити, що невелика назва була варіацією заголовка заголовка, але цей стиль заголовка ALT був для іншого елемента.

На мій погляд, при цьому слідкує за цією комбінацією структури та методології іменування, це досить легко створювати чисті, легко збережені стилі CSS. Контекст можна швидко отримувати, а автономні модулі CSS можуть бути скопійовані та вставлені в інших проектах, або з'їзду та з легкістю.

Це може здатися, ніби проблема брудного та незручного коду було вирішено. Але як реагуваний дизайн став все більш актуальним, стало очевидним, що ми повторювали багато наших помилок знову та генеруючих сильно структурованих, надмірно складних підходів до створення чутливих веб-сайтів.

Вирішення цієї проблеми полягає в тому, де потрапляє в гру.

Відповідні місця розташування

Завдяки зазначеним покращенням у нашому підході до створення CSS, коли я успадкував або співпрацював за проектом у ці дні, я рідко відчуваю страх або стурбованість, що я відкриваю себе, щоб потрапити в пожежу специфіки пекла або структурної дезорганізації, яку я використовував мати у цих ситуаціях. Я зараз знаю, що я можу швидко знайти та зрозуміти відповідні класи та стилі завдяки методології іменування та зробити мої зміни без незмінних наслідків до інших елементів, завдяки модульній CSS.

На жаль, однією великою причиною розчарування я зустрічаю, що чутливі стилі все ще залишаються непослідовними протягом усього проекту. Вони можуть бути добре містяться в модульній структурі та належним чином назвати методологію іменування, але проект за проектом я бачу багато різних способів, щоб розробники вирішили включити їхні чутливі стилі.

Деякі створюють окрему частку SASS, названу _mobile.scs або _tablet.scs, наприклад. Деякі місця Media Queries у нижній частині відповідного файлу у порядку зростання або зменшення, а інші просто розміщують їх випадковим чином між стилями для інших елементів. За допомогою такого підходу я вважаю, що я перебуваю вбрання між файлами та прокручуючи до верхньої та нижньої частини файлів, просто щоб отримати повне розуміння стилів одного елемента через різні точки зупинки.

Media Query Bubbling

Як ви бачите, є багато проблем з цим, що всі поєднуються, щоб призвести до того, що розробник витрачати більше часу на зміни / поправки, ніж це необхідно.

Він дублює стилі та робить процес підтримки та пошуку всіх відповідних стилів для складового складника. Ви повинні подивитися в декількох місцях або файлах, щоб отримати повну картину стилів елемента.
Елемент більше не є автономним. Ви не можете легко повторно використовувати його в іншому проекті або впевнено видаляти / змінити його без побічних впливів, або залишкового коду.
Для кожного нового проекту час втрачається, з'ясовано, як цей проект підходить до чутливих стилів.
Перехід між проектами стає важче, тому що ви повинні перемикати між підходами у вашій голові. Це може призвести до випадкових проектів, що мають поєднання підходів, що знову призводить до брудних CSS.

Рішення, яке мені подобається реалізувати, виправити це, називається медіа-запит. Найпростіший спосіб пояснити, що це розглянути засоби масової інформації, щоб бути подібними до будь-якої іншої варіації вашого модульного елемента. Те ж, що і клас Variation Bem .Heading__title є .Heading__title-варіація, наприклад. Це означає, що медіа-запит повинен бути вкладений всередині, як і ваші модифіковані класи. Див. Наведений нижче код:

 .header {
фон: $ чорний;

@Media тільки екран і (min-ширина: 640px) {
фон: $ білий;
}
}

У цьому прикладі ви можете чітко бачити в одному місці, що фон для заголовка змінюється на білий при 640px або вище. За допомогою самодостатності медіа-запиту разом з стилями елемента, ви ще раз створили абсолютно автономний модуль, який можна повторно використовувати або редагувати з упевненістю. Немає необхідності перетинати файл _mobile.scss або шукати проект для інших згадок класу, щоб переконатися, що ви охопили всі точки зупинки.

Вкладений медіа-запит

Знову ж таки, я бачив багато варіантів того, як розробники вибирають структурувати чутливі стилі своїх елементів. Це повинно розглядатися як не відрізняється від стилю батьківського елемента, і всі засоби масової інформації та стилі повинні бути автономними. Див. Наступний приклад:

 .heading__title {
шрифт: 16px;

@Media тільки екран і (min-ширина: 640px) {
Шрифт-розмір: 18px;
}

& amp; .Heading__title - маленький {
шрифт: 14px;

@Media тільки екран і (min-ширина: 640px) {
шрифт: 16px;
}
}
}

Ви можете побачити, що розмір шрифту для Heading__Title стає більшим, коли ViewPort становить 640px або більший, і як менший варіант заголовка заголовка також збільшує, але визначається, щоб бути меншим за стандарт. Використовуючи цю техніку, дуже важливо застосовувати методологію BEM, щоб гарантувати, що ви не в кінцевому підсумку в гніздувати кілька рівнів. Наприклад, переконайтеся, що елемент .HEADING__TITLE - це автономний модуль CSS, який не є бездоганно вкладеним у елементі.

Очищувальні стилі

Приймаючи те, що ми дізналися з переваг, наданих BEM та модульними CSS та застосовуючи його до засобів масової інформації в межах однієї структури, ми зупиняємося з повторення помилок нашого минулого.

Працюючи з Media Queries таким чином, вам не доведеться вивчати абсолютно нову методологію або структуру для ваших стилів. Ми в основному приймаємо модульний підхід CSS і застосовуючи його до наших засобів масової інформації, які повинні відчувати себе досить природними.

Ми також створюємо Cleaner CSS з менш дублюванням класів CSS через файли та збереження часу розробки, видавши необхідність перевірки декількох місць під час внесення змін.

Ця стаття була опублікована сітка , журнал для професійних веб-дизайнерів та розробників. Підписатися на мережу тут .

Пов'язані статті:

Створіть прохолодний анімацію CSS з SASS
10 речей, яких ви ніколи не знали, ви можете зробити з Sass
Інструменти для веб-дизайну, щоб допомогти вам працювати розумнішим

Як структурувати Media Queries в SASS

CSS в минулому

Попередніпроцесорні конвенції та модульні CSS

Відповідні місця розташування

Media Query Bubbling

Вкладений медіа-запит

Очищувальні стилі

Як - Найпопулярніші статті

Adobe XD: Як використовувати автоматичну функцію

Використовуйте Adobe XD для створення мікро-взаємодій

Побудуйте голосовий контроль UI

7 Найкращі поради для початку власного бізнесу

17 способів малювати кращі істоти

Як використовувати смарт-шари в Photoshop

загострення ваших навичок живопису

Моделювання космічного корабля для дизайну геймплея

Категорії