Методология Atomic CSS на фреймворке mlut. Часть 2: Состояния и селекторы
В этом уроке мы продолжаем осваивать методологию Atomic CSS, используя фреймворк mlut.
Ранее мы узнали, что утилиты в mlut состоят из компонентов. Сегодня начнем детально разбираться с одним из них, который называется states. Посмотрим, какие они бывают и для чего применяются.
Для демонстрации используется web-версия mlut, поэтому CSS будет автоматически генерироваться из разметки. Но из-за технических ограничений, в открытой вкладке со стилями показывается только заготовленный CSS.
States — это общее название для двух похожих компонентов: pre-states и post-states. Эти компоненты отвечают за части селектора перед и после класса утилиты, соответственно. С помощью states мы можем реализовать такие состояния, как hover и focus, а также, использовать сложные селекторы с комбинаторами.
Подготавливаем окно к интерактивному интерфейсу: устанавливаем шрифт, настраиваем скругление краев и прокрутку содержимого.
Для начала, повторим базовые возможности верстки с mlut.
Закрепляем верхнюю панель при прокрутке с помощью Ps-sk (position: sticky) и T0. Сделаем панель полупрозрачной с помощью специального синтаксиса значений цветов: Bgc#000*50p.
Начнем практиковаться со states. В предыдущем уроке мы уже использовали h — state, который соответствует hover и применяет утилиту только при наведении. Здесь нам без него не обойтись.
Стилизуем кнопку закрытия модального окна и заготавливаем transition для других интерактивных элементов.
В states мы можем использовать любые псевдоселекторы CSS и комбинировать их друг с другом, через разделитель :. Полный список сокращений для них можно посмотреть в документации.
Завершаем верстку верхней панели и стилизуем кнопку закрытия модального окна. Здесь так же не забываем про состояние наведения на кнопку.
В mlut есть и custom states — заготовки для частоиспользуемых комбинаций селекторов. Как и у большинства custom сущности, их названия в утилитах начинаются с -, например -evc. Полный их список также есть в документации.
А тем временем, мы перестраиваем область обложки и добавляем отступ для аватара. Это готовит компонент к интерактивности его дочерних кнопок.
Теперь познакомимся с одним из специальных state, под названием контекст. Это специальная утилита, которая не применяет стили, но с которой удобно комбинировать другие утилиты в сложных селекторах. В синтаксисе обозначается «крышечкой» ^.
Кроме того, контекст может быть именованным. Для примера, мы будем использовать здесь контекст с именем wallpaper. Утилита контекста будет записываться как -Ctx-wallpaper. А использование этого контекста в states будет выглядеть так: ^wallpaper:h:.
В данном случае, с помощью контекста мы реализовываем паттерн group hover. Так, при наведении на родителя, изменяются стили у дочерних элементов.
При этом, контекст можно:
- использовать с любыми утилитами
- как угодно комбинировать в states
Чуть позже мы снова столкнемся с ним, в процессе стилизации.
Добавляем показ кнопки изменения фото профиля по наведению.
А теперь откроем главную тайну states! Дело в том, что states — это по сути, упрощенный selector list из CSS. То есть, в них вы можете использовать большую часть с возможностей селекторов CSS, следуя похожей логике. Только некоторые комбинаторы будет отличаться по синтаксису. В частности:
: — объединение states (compound)<empty>: — пробел в селекторе
Также доступны множественные селекторы через ,. На данном шаге мы попробуем их применить для input и textarea, чтобы задать цвет текста и transition этим элементам.
При работе со сложными states, важны еще два момента:
- не конвертируемые части states переносятся в селектор без изменений
- чтобы предотвратить конвертацию сокращения, используйте
= перед ним: =a:_D
Добавляем базовые стили для label, чтобы в дальнейшем настроить состояния input. Здесь нам снова понадобится контекст.
С помощью контекста и стейта fw (focus-within) добавляем изменение цвета рамки и подписи, когда фокус находится в поле ввода.
Сбрасываем стили при фокусе по умолчанию и добавляем корректный цвет текста у поля, с помощью тех же средств
Добавляем индикатор обязательного поля через content у псевдоэлемента after — ему соответствует state af. Далее, комбинируя states, мы можем легко стилизовать псевдоэлемент, когда у родителя срабатывает focus-within.
В завершение урока, познакомимся с еще одним специальным state: ! (not), который соответствует псевдоэлементу :not(). Not можно использовать перед любым другим стейтом, чтобы инвертировать его логику.
В нашем случае, мы хотим, чтобы цвет рамки менялся при наведении на поле ввода, но это не влияло на стили при фокусе. Такого поведения мы добиваемся комбинацей: !fw:h, которая конвертируется в псевдоклассы: :not(:focus-within):hover.
Для закрепления, немного вернемся назад, чтобы сделать кнопки редактирования профиля доступными с клавиатуры. Здесь мы снова используем множественные селекторы и focus-within.
На этом мы закончили стилизацию окна редактирования профиля. Встретимся в следующем уроке!
