Структурирование Sass: Скажите пока неоднозначности атомарного дизайна

Атомарный дизайн представляет собой методологию с изложением разумной структуры кода для таблиц стилей. Он имеет много последователей, но я считаю его именование конвенций может быть неоднозначным. Что такое молекула? Что такое организм? Где провести грань между этими двумя понятиями? Эти конкретные вопросы, кажутся, самым большим камнем преткновения для интерпретации атомной архитектуры.

атомарный дизайн

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

Атомарная структура

Я люблю атомарный дизайн и его идеологии, но я обнаружил, что они могут разрушаться при работе в команде, а конкретно с людьми, которые не знают как это все работает. Раньше я использовал следующую структуру папок:

Организация папок root/css/src/

- vars
- functions
- mixins
- base
- plugins
- typography
- atoms
- molecules
- organisms
- templates
- pages
- states
- utility
style.scss

В файле style.scss использую импорт gulp-sass-glob-import:

Импорт стилей в файле root/css/src/style.scss:

// Конфигурация
@import "vars/*";
@import "functions/*";
@import "mixins/*";
 
// Компоненты Bower
@import "../bower_components/normalize-scss/_normalize";
 
// Основные селекторы стилей DOM
@import "base/*";
 
// Шрифты
@import "typography/*";
 
// Дополнения
@import "plugins/*";
 
// Атомарный дизайн
@import "atoms/**/*";
@import "molecules/**/*";
@import "organisms/**/*";
@import "templates/**/*";
@import "pages/**/*";
 
// Варианты событий
@import "states/*";
 
// UI
@import "utility/*";

Свойства заданные в шаблоне или на странице, отменяют свойства у "атома", "молекулы" или "организма", вместе с связанными элементами.

Содержание

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

- atoms
  - _buttons.scss
  - _links.scss
  - _inputs.scss
- molecules
  - _navigation.scss
  - _search-form.scss
  - _contact-form.scss
- organisms
  - _header.scss
  - _footer.scss
  - _content.scss
- templates
  - _sticky-footer.scss
  - _grid-2column.scss
  - _grid-3column.scss
- pages
  - _home.scss
  - _about.scss
- _contact.scss

Организация кажется разумной, если вы ранее работали с Atomic Design, но не дотягивает для кого-то, кто не знаком с данным подходом в веб-дизайне. Разработчики не знают о атомарной конструкции и не поймут смысла того, почему форма поиска находится внутри каталога "молекулы", и могут начать поиск в других областях для внесения изменений, или просто создадут новый файл.

Измененная структура компонентов

Взгляните на переработанную структуру каталогов:

- vars
- functions
- mixins
- base
- typography
- plugins
- toolbox
- components
- layout
- pages
- states
- utility
style.scss

Данная структура интуитивно понятная, и вы с легкостью сможете понять назначение каждой папки (за исключением toolbox). "toolbox" является местом для хранения помощников, которые не связанны с утилитами, такими как пользовательские классы для компоновки шаблонов и объектов, пользовательские ключевые кадры анимации и так далее.

Импорт стилей:

// Конфигурация
@import "vars/**/**";
@import "functions/*";
@import "mixins/*";
 
// UI
@import "../bower_components/normalize-scss/_normalize";
@import "base/*"; // general styling using DOM element selectors
@import "typography/*";
@import "plugins/**/*"; // Дополнения
@import "toolbox/**/*"; // Помощники
@import "components/**/*"; // Отдельные блоки
@import "layout/**/*";
@import "pages/**/*";
@import "states/**/*";
@import "utility/**/*";

"Components" будет содержать части пользовательского интерфейса, такие как кнопки, поля ввода, логотипы, аватары, верхний и нижний колонтитулы, формы и даже модули, такие как навигация. Самое главное качество в компонентах, они могут быть независимыми; Данный подход также реализует различные идеи из SMACSS (состояний) и атомарного дизайна.

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

- components
  - _buttons.scss
  - _navigation.scss
  - _masthead.scss
  - _footer.scss
  - _logo.scss
  - _avatar.scss
  - _contact-form.scss
- _sales-calculator.scss

 

Перевод статьи Structuring Sass: Saying Goodbye to Atomic Design Ambiguity

Тэги: scss

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.