Использование адаптивных модификаторов для управления изменениями компоновки в компонентах

Использование адаптивных модификаторов для управления изменениями компоновки в компонентах

От автора: новый подход к адаптивности контент-зависимых компонентов — модификаторы. Планирование адаптивного поведения компонента может быть непростой задачей, особенно когда его содержание сильно влияет на компоновку компонента.

Например, давайте рассмотрим компонент таблицы. Вы можете решить использовать две различные схемы: одна — оптимизированная для небольших экранов (макет state-a), другая — для больших экранов (макет state-b). Затем вам нужно будет выбрать контрольную точку для изменения макета и установить ее в CSS с помощью медиа-запроса. Однако один и тот же компонент таблицы может иметь два или двадцать столбцов.

Если в таблице мало столбцов, вы можете изменить макет на небольшой контрольной точке:

Использование адаптивных модификаторов для управления изменениями компоновки в компонентах

В то же время, для таблицы с большим количеством столбцов или большим количеством содержимого вы можете изменить ее позже, чтобы на маленьких экранах она не выглядела слишком переполненной:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Использование адаптивных модификаторов для управления изменениями компоновки в компонентах

В идеале, вы должны найти контрольную точку, которая работает для обоих (и для всех других таблиц на сайте). Вы можете использовать класс .table для определения стиля макета state-a, и использовать медиа-запрос, чтобы переписать этот стиль для макета state-b:

Это решение может быть не идеальным, поскольку выбранная вами контрольная точка является компромиссом: в результате вы можете получить несколько таблиц, которые выглядят слишком переполненными, а другие — слишком разреженными. Даже если вы найдете решение, которое, кажется, подходит для текущих таблиц, оно может легко сломаться с будущими.

Модификаторы класса

Возможной альтернативой будет определение модификаторов адаптивных классов (классов, которые имеют один и тот же стиль, но нацелены на разные контрольные точки), чтобы иметь возможность инициировать изменение макета в разных контрольных точках.

Если мы рассмотрим пример с двумя контрольными точками (малая и средняя), вы получите:

Затем вы можете применить эти модификаторы к различным элементам table на основе их содержимого:

Код, определенный в классе .table—state-b@sm, такой же, как и в .table—state-b@md. Помните, что эти два класса используются для создания одинакового макета; он применяется только в разных контрольных точках.

Этот подход имеет два основных недостатка. Первый — это возможность поддержки кода: если вам нужно внести изменения в макет state-b, вам нужно обновить два разных класса (.table—state-b@sm и .table—state-b@md). Это то, что вы можете решить, используя препроцессор CSS (например, миксины SASS).

Вторая проблема заключается в том, что CSS-код для state-b повторяется несколько раз в окончательном CSS-коде (дважды, если у вас есть два модификатора, но может быть и больше, если вам нужны дополнительные варианты!).

Повторите это для всех компонентов и различных медиа-запросов, и это может привести к значительному увеличению размера файла CSS.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Решение

Работая над категорией «Таблица» библиотеки компонентов в CodyHouse, мы использовали другой подход; мы определили класс для макета state-b:

Затем мы определили пользовательское свойство CSS —table-layout внутри класса .table и изменили его значение с помощью модификаторов класса:

Обратите внимание, что модификаторы класса теперь используются для изменения значения пользовательского свойства CSS; нет повторения стиля макета.

Используя JavaScript, мы можем проверить, добавлять или удалять класс .table—state-b, основываясь на значении этого пользовательского свойства CSS. В результате будет применен нужный стиль макета!

Этот метод позволяет нам использовать один класс (.table—state-b) для стиля макета, независимо от медиа-запроса. Добавление нового варианта требует только установки значения отдельного пользовательского свойства CSS. Нет повторения кода!

В этом примере мы работали с таблицами, но вы можете применить эту технику к любому компоненту, чье адаптивное поведение зависит от его содержимого.

Недостатки?

Этот подход требует JavaScript, но это не должно быть проблемой: если JS выключен, мы обслуживаем версию таблицы state-a, которая полностью доступна.

Как насчет поддержки пользовательских свойств CSS? Использование переменных CSS, вероятно, самый чистый и понятный способ. Но если вам нужно поддерживать более старые браузеры (например, IE 11 и ниже), вы можете использовать псевдо-элемент ::before и изменить его содержимое с помощью модификаторов класса:

В JS вы можете проверить значение содержимого ::before, а не пользовательское свойство. Тот же результат, более широкая поддержка! Вы можете принять решение, исходя из своих потребностей.

Вот и все. Я надеюсь, что вы найдете этот подход полезным. Если вы используете другую технику, я хотел бы услышать об этом!

Автор: Claudia Romano

Источник: https://codyhouse.co

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Технология CSS Grid

Руководство по адаптивной верстке

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий