Структурирование наших стилизованных компонентов | Часть I
Как мы организуем наши приложения в Decisiv
ВСТУПЛЕНИЕ
Некоторый контекст
Наша команда по интерфейсу пользовательского интерфейса много думала о том, как мы структурируем наши приложения React, и после нескольких итераций мы обнаружили шаблоны, которые хорошо работают для нас. Мы хотели бы поделиться тем, что мы узнали в процессе, а также узнать больше о том, как вы организуете свои приложения.
Эта статья является частью первой из серии статей, в которой основное внимание уделяется блокам, элементам и модификаторам, а также тому, как мы адаптировали эти шаблоны для обеспечения предсказуемого и единообразного пользовательского интерфейса. Мы также разработали шаблон для взаимодействия с состоянием и данными приложения, который мы называем композициями. Но мы обсудим эту тему в следующем посте.
Наше вдохновение
Мы действительно стилизованы-компоненты. Они помогли нам создать предсказуемые, компонуемые стили, которые мы можем повторно использовать в нашем приложении. Все, что вы прочитаете ниже, относится к этому контексту. Мы также заимствуем идеи из БЭМ для нашей структуры.
Наши задачи
По мере того, как наша команда и кодовая база росли, становилось все труднее обеспечивать единообразное применение стилей во всем приложении. Наши отступы и поля были перекосами. В нашей шкале серого мы приближались к 15 оттенкам, хотя спецификация дизайна требовала только семь. Мы создавали дублированные компоненты, потому что ранее существовавшие элементы терялись в структуре папок. Все это привело к множеству дублированных работ и непоследовательному стилю. Именно в этой суматохе мы разработали лучшую структуру.
Наши цели
Мы хотели создать шаблоны, которым было бы легко следовать и которые не позволяли нам делать ошибки. Нам нужна была согласованность. Нам нужен был способ описать, как отдельные части пользовательского интерфейса взаимодействуют друг с другом, и четкое разграничение ответственности между ними. Многие из этих деталей обсуждались во время встреч, и большинство из них не попадут в эту статью. Однако структура блока, элемента, модификатора действительно лежит в основе решения. Я надеюсь, что дальнейшее будет также полезно для вас и вашей команды.
БЛОКИ
Обзор
Блоки - это высший уровень абстракции в концепции блоков, элементов и модификаторов. Они несут ответственность за предоставление контекста для элементов, рендеринг элементов и обработку логики пользовательского интерфейса. Они не связаны с состоянием приложения и не обрабатывают бизнес-логику. Card будет хорошим примером.
Этот Card компонент является блоком. Он не отвечает за бизнес-логику и имеет дочерние элементы: Header, Image, Text и Title.
Структура файла блока карты
ПРИМЕЧАНИЕ. Блоки не должны быть вложенными. Структура папок должна быть плоской. Цель состоит в том, чтобы поощрять повторное использование общих элементов.
Компонент блока карты
Этот шаблон позволяет нам использовать эти блоки следующим образом:
Наша структура блоков обеспечивает соглашение об именах БЭМ и делает разметку действительно читаемой. Еще одно преимущество - сокращение длинного оператора импорта. Например, эти операторы импорта:
Становится этим единственным оператором импорта.
Каждый из дочерних элементов доступен через блок, и это снижает множество проблем для нашей команды разработчиков.
ЭЛЕМЕНТЫ
Обзор
Элементы - это самые маленькие и неделимые части нашего пользовательского интерфейса. Они не несут ответственности за логику приложения или логику пользовательского интерфейса, но они обрабатывают свои собственные модификаторы, которые изменяют стиль элемента. Хотя они обычно существуют в контексте блока, они не связаны исключительно с ними. Иногда элемент остается автономным. Примером автономного элемента может быть A, Link, H3 или P. Они универсально применимы во всем нашем приложении и не привязаны к контексту блока.
Пример файловой структуры
В ситуациях, когда существующие общие элементы не будут работать для вашего варианта использования, примите во внимание:
- Создание модификатора для вашего конкретного стиля
- Реструктуризация существующего элемента в соответствии с вашим вариантом использования
- Создание нового универсального элемента
- Или (в крайнем случае) создание нового элемента, специфичного для блока, в каталоге этого блока.
Порядок этих опций является преднамеренным. Как правило, старайтесь использовать уже существующие элементы, при необходимости изменяйте и реструктурируйте и, в крайнем случае, создавайте новый элемент, специфичный для блока. Это помогает нам поддерживать согласованность пользовательского интерфейса.
Пример элемента
МОДИФИКАТОРЫ
Обзор
Модификаторы - это небольшие функции, которые позволяют нам изменять свойства CSS элементов. Они живут в файле Element и несут полную ответственность за изменение стилей. Их не волнует логика пользовательского интерфейса. У нас есть внутренняя библиотека styled-components-modifiers, которая помогает нам предсказуемо изменять стили компонентов.
ПРИМЕЧАНИЕ. Мы недавно открыли исходный код
styled-components-modifiers. 🎉 Вы можете найти библиотеку здесь. Попробуйте и дайте нам знать, что вы думаете!
Пример модификатора
Использование модификаторов
Чтобы использовать наши модификаторы, мы передаем массив имен модификаторов, которые хотим применить в качестве опоры.
Оттуда мы находим соответствующие ключи модификаторов в нашей конфигурации модификаторов, объединяем стили и объединяем их все вместе в одну строку. styled-components сделает остальное за нас.
Большинство наших модификаторов делают только одно. Но иногда один модификатор применяет несколько стилей. Например, если нам нужно, чтобы кнопка была «отключена» или «активна». Но мы обнаружили, что объединение множества стилей в один модификатор ограничивает его возможность повторного использования. Для нас было лучше объявлять больше модификаторов при вызове компонента, чем иметь странные побочные эффекты и одноразовые модификаторы.
ЗАКЛЮЧЕНИЕ
Наша структура компонентов БЭМ стала отличным образцом для нашей команды. Блоки и элементы поощряют многоразовые и гибкие компоненты. А модификаторы делают изменения нашего стиля предсказуемыми.
Спасибо за прочтение! Если вам понравилась эта статья, подпишитесь на мою рассылку! Https://tinyletter.com/alanbsmith
Следите за обновлениями второй части!
