компилируется...
Перейти к основному содержанию
Рекомендовать во Вконтакте Рекомендовать в Фейсбуке Рекомендовать в Твиттере

Современный процесс разработки во фронтенде: Создание Sass архитектуры

В предыдущих двух статьях мы рассмотрели настройку репозитория стартового проекта с помощью скриптов NPM и Parcel. Я, как правило, использую более или менее одинаковую архитектуру Sass для каждого проекта, поэтому я хочу, чтобы моя шаблонная структура включала SCSS файлы и каталоги, в которые я могу сразу же начать писать код. Это моя любимая архитектура, в общих чертах основанная на ITCSS:

Config - обычно содержит три файла: Здесь я определяю все переменные Sass, миксины и функции для использования на протяжении всего проекта. Обычно я использую один файл для своих переменных, брекпоинтов (breakpoints), цветов, интервалов. Но нет причин разбивать файл переменных на несколько файлов, что может быть хорошей идеей только для больших проектов.

Base - предполагает написание стилей на самих элементах, а не на классах. Он включает в себя любые ресеты (например, * { box-sizing: border-box; }) и базовые стили для типографии и элементов формы, некоторые из которых впоследствии могут быть переопределены на уровне компонентов.

Objects - любые небольшие, многократно используемые элементы пользовательского интерфейса, которые могут присутствовать в нескольких компонентах. Я начинаю с файла button.scss, потому что практически в каждом проекте есть кнопки!

Globals - глобальные компоненты, которые будут использоваться на каждой странице, такие как header и footer. Я также добавляю сюда общие классы лэйаутов - например, если у меня есть сетка, которую я хочу использовать во многих местах.

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

Utilities - это вспомогательные классы, которые могут быть применены к любому элементу. Например, для установки вертикальных отступов на всех элементах, которые относятся к этому классу, можно использовать следующее:

.padding-y {
  padding-top: var(--padding-y);
  padding-bottom: var(--padding-y);
}

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

Итак, чтобы закончить наш стартовый проект, я добавлю следующую структуру файлов в каталог src/scss:

config
    _variables.scss
    _functions.scss
    _mixins.scss
base
    _resets.scss
    _typography.scss
    _forms.scss
objects
    _buttons.scss
globals
    _header.scss
    _footer.scss
    _layout.scss
components
utilities

Заключение

Мы узнали об установке пакетов NPM, написании сценариев для выполнения задач, использовании Parcel для упрощения автоматизации и добавлении базовой архитектуры Sass. Этот стартовый репозиторий включает в себя все, о чем мы говорили. Не стесняйтесь клонировать его использовать для ваших собственных проектов.

Комментарии

Пока что нет комментариев, вы можете быть первым.
Войти или Регистрация , чтобы оставлять комментарии.

Лучшие публикации

Популярные теги

Наш сайт использует куки. Узнайте больше о нашем использовании куки: политика в отношении файлов cookie
Наш сайт существует только благодаря показу онлайн-рекламы нашим посетителям.
Пожалуйста, поддержите нас, отключив блокировку рекламы.