Русский
Русский
English
Статистика
Реклама

Перевод Как я структурирую CSS

Приветствую. Представляю вашему вниманию перевод статьи How I Structure My CSS (for Now), опубликованной 11 августа 2020 года автором Matthias Ott

Когда вопрос касается структурирования CSS, нет недостатка различных соглашений об именовании, методологий и архитектур. Будь то BEM, OOCSS, SMACSS, ITCSS или CUBE CSS - за последние годы появилось много разных подходов к управлению модульным CSS. Одни предлагают стратегии разделения CSS на небольшие, лучше поддающиеся управлению фрагменты, другие больше сосредотачиваются на соглашениях об именовании классов. Порой сложно понять, в чём отличия или преимущества определённых методик, но у всех них, в конце концов, одна цель обеспечить единую структуру и принципы при работе в команде с другими людьми или с самим собой в будущем.

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

В этой статье я поделюсь своим текущим принципом структурирования CSS. В нём я не придерживаюсь какой-либо определённой методологии, хотя те, кто знаком с ITCSS Гарри Робертса, определённо увидят сходства. Если вы ещё не знакомились с ITCSS, настоятельно рекомендую это сделать. Больше всего в этой методологии мне нравится прагматичный, полностью прикладной подход и принцип структурирования, делающий CSS всё более конкретным и явным по мере продвижения вниз по структуре. Это облегчает работу с каскадом и наследованием селектора, оставляя количество классов их специфичность на низком уровне. Существует, однако, и несколько отличий, и это именно то, что я предлагаю любому, кто создаёт свою собственную структуру: берите любую методологию и свободно адаптируйте её к своим потребностям и способу работы.

Структура основной папки

Вот так в данный момент выглядит структура моей папки. Давайте разбираться

/scss/ 1-settings 2-design-tokens 3-tools 4-generic 5-elements 6-skeleton 7-components 8-utilities _shame.scss main.scss

Настройки

Первая папка 1-settings предназначена для общих настроек проекта, самой базовой конфигурации. Это может быть набор глобальных переменных: Sass-переменных или CSS-переменных

 1-settings    _global.scss

Дизайн-токены

Вторая папка предназначена для стилей, касающихся визуального оформления сайта. Мы всё ещё не пишем правила, предназначенные для стилизации разметки. Здесь мы определяем переменные для шрифта, цветов, отступов, медиа-запросов и всего остального, что будем использовать при вёрстке. Эти атрибуты визуального оформления принято называть "дизайн-токенами". Их значения могут быть взяты из дизайн-системы вашего проекта.

 2-design-tokens    _colors.scss    _fonts.scss    _media-queries.scss    _spacing.scss    _typography.scss

Инструменты

Папка "Tools" предназначена для ваших глобальных Sass-миксинов и функций. Возможно, вы захотите управлять цветами с помощью режимов смешивания (blend-mode) или установить соотношение сторон для элемента, содержащего видео? Или применить "clear" для каких-то float-элементов. Сам я не особо использую миксины, но знаю много людей, которые их любят.

 3-tools    _aspect-ratio.scss    _blend-modes.scss    _center.scss    _clearfix.scss    _gradients.scss

Общие стили

Как и в методологии ITCSS, "generic" - первая папка, в которую помещаются стили для оформления разметки. Она содержит глобальные правила "box-sizing", сброс CSS или стили для печати - всё, что должно быть задано в самом начале CSS, но еще не зависит от конкретного проекта.

 4-generic    _box-sizing.scss    _font-face.scss    _normalize.scss    _print.scss

Элементы

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

 5-elements    _forms.scss    _headings.scss    _images.scss    _links.scss    _lists.scss    ...

Скелет

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

 6-skeleton    _grid.scss    _layouts.scss    _objects.scss

Компоненты

Сердце проекта. Здесь мы разрабатываем компоненты интерфейса. В нескольких последних проектах я даже отделял большие модули и маленькие компоненты, но вместо этого можно просто вкладывать компоненты друг в друга. Если нравится, можете использовать префиксы и соглашение об именовании, такое как BEM. Недавно я остановился на BEM-подобном, но более упрощённом соглашении об именовании. Суть в том, чтобы использовать как можно более простые, но информативные имена классов и разделять элементы и их содержимое чертой. Например, .card и .card-content. Иногда, когда я работаю с Fractal, CSS для отдельных компонентов может также находиться в другой папке вместе с HTML и JavaScript-кодом. В этом случае папка с компонентами может быть пустой или содержать @import@.

 7-components    _accordion.scss    _card.scss    _hero.scss    _pan-galactic-gargle-blaster.scss    ...

Утилиты

Ещё одна папка? Да, но эта - последняя. Папка "utilities" содержит служебные и другие полезные классы и, самое главное, состояния и модификаторы, такие как .is-active или .visually-hidden. Эти стили переопределяют стили предыдущих слоёв и часто устанавливаются через JavaScript. Мне очень нравится предложение Andy Bell в его методологии CUBE CSS использовать data-атрибуты для изменения состояния компонентов, что также полезно с точки зрения большей специфичности.

 8-utilities    _modifiers.scss    _states.scss

_shame.css

Этот файл является ещё одной идеей Harry Roberts и предназначен для всех постыдных CSS-решений, таких как быстрые фиксы и хаки, которые могут выступить временным решением, но позже должны быть реализованы как полагается. Обязательно документируйте все эти временные меры с помощью комментариев. Почему вы реализовали это именно так? Есть ли у вас идея, как сделать лучше? Что для этого нужно? И так далее.

Собираем всё вместе

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

@charset "UTF-8";// 1. Settings@import "1-settings/global";  // 2. Design Tokens@import  "2-design-tokens/colors",  "2-design-tokens/fonts",  "2-design-tokens/media-queries",  "2-design-tokens/spacing",  "2-design-tokens/typography";...

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

На днях я делал опрос в Твиттер о предпочитаемой CSS-методологии:

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

Итоговая структура папок:

/scss/ 1-settings    _global.scss 2-design-tokens    _colors.scss    _fonts.scss    _media-queries.scss    _spacing.scss    _typography.scss 3-tools    _aspect-ratio.scss    _blend-modes.scss    _center.scss    _clearfix.scss    _gradients.scss 4-generic    _box-sizing.scss    _font-face.scss    _normalize.scss    _print.scss 5-elements    _forms.scss    _headings.scss    _images.scss    _links.scss    _lists.scss    ... 6-skeleton    _grid.scss    _layouts.scss    _objects.scss 7-components    _accordion.scss    _card.scss    _hero.scss    _pan-galactic-gargle-blaster.scss    ... 8-utilities    _modifiers.scss    _states.scss _shame.scss main.scss
Источник: habr.com
К списку статей
Опубликовано: 21.10.2020 20:04:14
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Разработка веб-сайтов

Css

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru