Системы проектирования зданий: как работать со стилями CSS

Советы и рекомендации по стилю вашей дизайн-системы

Дизайн-система — это набор токенов дизайна, практик и повторно используемых компонентов, которые помогают поддерживать согласованность между вашими дизайнерскими и продуктовыми командами. Цвета, типографика, значки и многое другое связано со стилями, которые помогают определить, как бренд представлен в пользовательском интерфейсе.

Поэтому при разработке системы дизайна стилизация играет жизненно важную роль. Крайне важно усилить индивидуальность вашего бренда и установить устойчивые стандарты брендинга и взаимодействия с пользователем.

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

Почему стиль в дизайн-системах важен?

Стили играют важную роль в улучшении взаимодействия с пользователем, а меньшее разнообразие стилей означает меньшее количество компонентов пользовательского интерфейса. Если вы используете небольшой набор компонентов пользовательского интерфейса, ваши пользователи будут тратить меньше времени на изучение вашего продукта и больше времени на удовольствие от работы.

Согласованность стиля и функциональности позволяет пользователям предвидеть результаты действий, предпринятых в вашем приложении. И это снижает вероятность недопонимания и раздражения, которое с этим связано.

CSS-архитектура для систем проектирования

Когда вы слышите слово «стили», определенно следующее слово, которое обычно всплывает в вашей голове, это «CSS». Чтобы начать работу с CSS, вам не нужно много. Вам просто нужно применить стиль к выбранному элементу. Разве это не просто? Но когда со временем все усложнится, вам понадобится архитектура CSS для вашей системы дизайна.

Когда вы планируете архитектуру CSS для своей системы дизайна:

Сокращение проблем с наследованием и специфичностью.
Используйте меньше правил стилей для более эффективного CSS и повторного использования.
Сделайте его пригодным для долгосрочного обслуживания и со временем масштабируйте.
Он должен быть доступным и независимым от устройства.
Все разработчики должны иметь возможность использовать его, потому что он хорошо документирован.
Определите стили кодирования, организацию и соглашения об именах.

Методологии архитектуры CSS

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

SMACSS (масштабируемая и модульная архитектура для CSS)
Теория атомного дизайна
ITCSS (перевернутый треугольник CSS)
БЭМ (Блок, Элемент, Модификатор)

Написание модульного кода

CSS, с другой стороны, не предназначен быть модульным. Однако SMACSS, OOCSS и BEM с годами включили в CSS структуру и модульность. Кроме того, в последнее время эту проблему решают стратегии CSS-in-JS, такие как Стили компонентов, которые определяют свойства CSS в структурах кода JavaScript.

Чтобы сделать его модульным:

Используйте объектно-ориентированный/функциональный CSS.
Отделите структуру от стиля и контейнер от содержимого.
Шаблоны и компоненты пользовательского интерфейса абстрагируются в многократно используемые фрагменты.
Стили также могут быть определены для одной цели.

Организуйте CSS

Проведите аудит и начните создавать перечень шаблонов проектирования, прежде чем писать код для своей системы проектирования. Следующим шагом является организация элементов по категориям, таким как цвета, типографика, значки и различные шаблоны пользовательского интерфейса. Такие группы также можно использовать для организации вашего CSS.

Затем начните писать CSS,

Базовые стили: начните с основных элементов и определите базовые стили (например, сбросы CSS и стили по умолчанию).
Цвета: создайте цветовую палитру и соберите цвета в группы (например, бренд, акцент, границы и т. д.).
Типографика: стили на основе текста, включая размер шрифта, толщину шрифта, семейство шрифтов/гарнитуру и типографский масштаб.
Шаблоны и компоненты. Разработайте повторно используемые компоненты и комбинации шаблонов (если применимо).

Определение соглашений об именах

Используйте строчные буквы и разделяйте слова тире.
Названия должны быть короткими, но описательными. (например, .btn-alert против .btn-a)
Используйте осмысленные и функциональные имена, которые описывают цель. (например, .btn-alert против .btn-red)
Используйте то же имя класса, что и префикс для связанных стилей. (например: .btn против .btn-alert )
Используйте префикс (или атрибуты данных) для классов, специфичных для JavaScript, чтобы отделить стили от поведения. (например: .btn против .js-btn )

Теперь давайте перейдем к различным подходам, применимым в системах дизайна стилей.

Использование CSS Utility Framework для применения стилей

Tailwind CSS — одно из самых известных и перспективных решений для разработки дизайн-системы. Это первый служебный фреймворк с открытым исходным кодом.

Никогда не засоряя ваши таблицы стилей произвольными значениями, служебные классы позволяют вам работать в рамках системы. Более того, они упрощают поддержание согласованности цветов, интервалов, типографики, теней и всего остального, что входит в хорошо продуманную систему дизайна.

Tailwind позволяет создавать индивидуальные дизайны, даже не выходя из HTML. Utility-first CSS побуждает вашу команду явно добавлять уже существующие классы в HTML, а не вводить новые классы CSS каждый раз, когда они хотят стилизовать компонент. Вы также можете использовать Tailwind для создания всеобъемлющей архитектуры CSS из файла конфигурации, который отражает все элементы системы дизайна.

Используя этот подход, мы можем определить некоторые интересные преимущества для команды разработчиков:

Просто напишите конфиг в JSON и настройте его в JavaScript.

В файле конфигурации вы можете полностью настроить отзывчивые точки останова.

Доступны подключаемые модули Tailwind для создания переменных SASS, которые могут быть независимо доступны в веб-компонентах.

Поддерживаются SASS и другие препроцессоры.
Разметка помогает пользователю визуализировать, как что-то выглядит.
Вам никогда не придется беспокоиться о том, что изменение стилей может испортить что-то еще.
Его можно полностью настроить, добавив точки останова, псевдоклассы и другие функции в служебные классы.
Никакая блокировка фреймворка не регулирует внешний вид кнопок и других элементов. Благодаря этому ваш дизайн будет уникальным.

Кроме того, одним недостатком является то, что использование Tailwind может привести к огромному файлу CSS из-за большого списка классов, созданных из файла конфигурации.

Styled-Components для расширения CSS

Наиболее часто используемыми компонентами в дизайн-системе являются кнопки и текстовые поля. Но эти кнопки, текстовые поля, панели приложений и другие элементы нельзя использовать для создания всего веб-сайта/приложения. Лучше всего соединить эти кусочки логично и продуманно.

В этом случае стилизованные компоненты являются одними из самых популярных библиотек CSS-in-JS. Это облегчает вам использование стилей на уровне компонентов, написанных на смеси JavaScript и CSS, в вашей системе дизайна. Styled- Components используют помеченные литералы шаблонов и мощь CSS для стилизации ваших компонентов. Он позволяет вам писать код CSS, доступный только для этого компонента, но не для любого другого элемента на этой странице или компоненте.

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

Чтобы изменить литерал шаблона styled-components на основе его свойств, вы можете передать ему функцию. Этот компонент кнопки может изменить свой цвет по сравнению с основным состоянием. Мы меняем фон и цвет текста, когда устанавливаем основной реквизит на true.

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

Просто оберните новый компонент в конструктор styled(), чтобы он наследовал стиль другого. Здесь мы берем кнопку из предыдущего раздела и делаем ее эксклюзивной, добавляя стиль, связанный с цветом:

Вы получите следующие преимущества с Styled-Components:

Стилизованные компоненты создают уникальные имена классов для ваших стилей, и ошибки в именах классов отсутствуют. Не нужно беспокоиться о дублировании, перекрытии или орфографических ошибках.
Простая динамическая стилизация: без ручного управления многими классами изменение стиля компонента на основе его свойств или глобальной темы является интуитивно понятным и простым.
Сопровождение простое: вам никогда не придется копаться в нескольких файлах, чтобы найти стиль, который влияет на ваш компонент. Таким образом, обслуживание будет намного проще, независимо от того, насколько велик ваш исходный код.
Автоматическое добавление префиксов поставщиков: обновляйте CSS, а styled-components позаботится обо всем остальном.

Кривая обучения и сложность интеграции с устаревшим CSS — два недостатка этого подхода. Поскольку styled-components преобразует все определения стиля вашего компонента React в простой CSS во время сборки и вставляет его в теги <style> в заголовке вашего файла index.html, это влияет на производительность.

Заключение

Разработчики часто хотят иметь более чистый лист CSS без ненужных классов. Итак, нам просто нужно подумать о классах, которые они хотели бы видеть в дизайн-системе, и ни о чем другом. Все рассмотренные выше подходы можно использовать для упорядочивания стилей в дизайн-системе, если дизайн-система фокусируется на базовых компонентах приложений, а не на внутренних реализациях.

Самое главное — выбрать наиболее подходящий стиль для вашей дизайн-системы, а не просто самый популярный подход.

Спасибо за чтение.

Переход к компонуемым интерфейсу и серверной части

Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых фреймворках, таких как React или Node. Создавайте масштабируемые и модульные приложения с мощными и приятными возможностями разработки.

Перенесите свою команду в Bit Cloud, чтобы совместно размещать и совместно работать над компонентами, а также ускорять, масштабировать и стандартизировать разработку в команде. Попробуйте компонуемые интерфейсы с помощью Design System или Микроинтерфейсы или изучите компонуемые интерфейсы с серверными компонентами. . Попробуйте →