Методология Atomic CSS на фреймворке mlut. Часть 1: Знакомство
В этом мини-курсе мы научимся верстать по методологии Atomic CSS с использованием инструмента mlut.
Atomic CSS — это методология, в которой мы используем маленькие атомарные CSS-правила, каждое из которых делает одно действие. В первом уроке разберем основные понятия и познакомимся с возможностями mlut.
Атомарные классы обычно называют утилитами. В общем случае, у утилиты есть имя и значение. Имя соответствует CSS-свойству (или группе свойств), а значение — CSS-значению.
Добавляем несколько утилит для базовых размеров поста. На примере утилиты W100p: W — имя (свойство width), а 100p — значение (100%). Если значение — число или hex-цвет, то разделитель не ставится.
mlut генерирует стили на основе тех утилит, которые вы используете в разметке. На вкладке style.css вы можете смотреть во что превратятся утилиты, которые мы будем добавлять в разметку. В этом уроке, для упрощения, мы будем использовать статичный CSS, который был сгенерирован предварительно.
Механика значений утилит в mlut, близка к оригинальному CSS, поэтому они могут быть достаточно сложными. Сейчас для примера, сложное значение утилиты тени Bxsd0;1;3;#0005 мы указываем прямо в разметке. Но если оно будет повторяться, его можно вынести в конфигурацию mlut.
Также добавляем скругление краев и цвет фона поста.
Имена утилит являются сокращениями от названий CSS-свойств. Эти сокращения составлены по алгоритму, который основан на частоте использования свойств. Наличие такого алгоритма позволяет не зазубривать весь список утилит, а выводить их названия в голове и намного проще запоминать.
Если совсем упрощать алгоритм, то чем популярнее свойство, тем короче будет название утилиты. Отсюда D — display, а Ctn — container. С полным алгоритмом можно ознакомиться в документации или в этой статье.
А тем временем, добавляем стили раскладки для основного содержимого поста.
В mlut есть 2 вида утилит: common и custom. Первые соответствуют реальным CSS-свойствам, а вторые служат для всего остального. Например, для управления CSS-переменными (custom properties) или устанавки сразу несколько свойств.
В данном случае, -Sz13u (сокращение size) устанавливает сразу 2 свойства: width и height.
Большинство значений тоже являются сокращениями по тому же самому алгоритму. В первую очередь, это касается ключевых слов, типа flex, center и т. д.
Формируем раскладку блока с верхними ссылками.
А у некоторых утилит есть значение по умолчанию. Оно применяется, если утилиту прописать без значения, например: Txd. Это будет соответствовать декларации: text-decoration: none.
В mlut утилита делится на составные части — компоненты. Каждый такой компонент соответстует определенной части CSS-правила. C двумя мы уже познакомились — имя и значение. Сейчас рассмотрим еще один: post states. Он соответствует части селектора после класса утилиты. Используя этот компонент, мы можем реализовать утилиту, которая работает только по hover.
Добавим ссылке на профиль автора поста состояние при наведении.
Таким же образом, с помощью post states добавляем псевдоэлемент-разедлитель before перед датой публикации поста.
В первом уроке мы стилизуем некоторые элементы наивным способом. Как здесь, например: ссылка в пользовательском контенте. В следующих туториалах рассмотрим более продвинутые техники в Atomic CSS.
В утилитах для установки размеров и отступов можно использовать разные единицы измерения. При указании этих единиц, так же используются сокращения. Они похожи на сокращения из Emmet. Например: 20p -> 20%, 3r -> 3rem
Для примера, попробуем задать верхний отступ у параграфа в rem.
Некоторые утилиты в mlut соответствуют сокращенным свойствам CSS. Чтобы указать несколько CSS значений в одной утилите, для пробелов используется ;.
Добавим верхний бордер сразу со всеми стилями с помощью утилиты Bdt1;s;gray50.
Еще в mlut есть специальные единицы измерения, которых нет в CSS. Одна из них — unit или сокращенно u. По умолчанию: 1u = 4px, но через конфигурацию это можно изменить. Эти единицы нужны для упорядачивания всех размеров, в соответствии с дизайн системой. По умолчанию, при верстке рекомендуется использовать их, вместо px или rem.
Хотя основную часть CSS-кода mlut генерирует из разметки, небольшая готовая библиотека в нем все-таки есть. Она содержит базовые стили и хелперы. В отличии от утилит, хелперы могут быть более сложными и состоять из нескольких CSS правил. При этом, они так же универсальны: подобные хелперы часто повторяются в разных проектах.
Один из таких хелперов — btn. Он используется для сброса стилей элемента, чтобы в дальнейшем оформить его как кнопку или ссылку.
Доделываем стилизацию кнопки «Reply» и закрепляем полученные знания.
Не забываем визуально скрывать подпись у кнопки. В этом поможет кастомная утилита -D-vh.
Оформляем оставшиеся кнопки по аналогии с первой. Наш пост готов!
В этом туториале мы использовали заранее подготовленный CSS. Но если устанавливать mlut как пакет из npm, то он будет генерировать CSS на основе вашей разметки. Поэтому в качестве домашнего задания: попробуйте установить mlut из npm, запустить код из урока локально и поиграться с ним. Инструкция есть в документации. А в следующих уроках мы уже будем работать с mlut прямо в браузере!
Для тех, кого заинтересовали технические детали того, как устроен mlut, предлагаем ознакомиться с докладом по теме. И если вам понравилось демо, то ставьте звезды на гитхабе!
Встретимся в следующем уроке!
