AIKraft/AI/Войти
AIKraft/Skills/Лучшие практики SCSS

Лучшие практики SCSS

SCSS/Sassy CSS best practices and coding guidelines for maintainable, scalable stylesheets

mindrally official Другое

Что делает навык

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

Когда применять

  • Структурирование проекта CSS/SCSS по паттерну 7-1 (abstracts, base, components, layout, pages, themes, vendors) для четкого разделения ответственности.
  • Создание масштабируемой системы дизайн-токенов (переменные цветов, типографики, отступов, брейкпоинтов) с использованием семантических имен и карт.
  • Разработка переиспользуемых компонентов с применением BEM-нейминга и ограничением глубины вложенности селекторов до 3 уровней.
  • Генерация утилитарных классов и адаптивных стилей с помощью циклов, миксинов и плейсхолдеров (@extend) для минимизации дублирования кода.

Как работает

  1. Организовать файловую структуру проекта согласно паттерну 7-1, создав папки для абстракций, базовых стилей, компонентов, макета, страниц и тем.
  2. Настроить порядок импорта файлов в main.scss: от абстракций и вендоров к базовым стилям, макету, компонентам и страницам.
  3. Определить глобальные переменные в _variables.scss, используя семантические имена (категория-свойство-вариант) и карты для группировки связанных значений.
  4. Создать миксины для повторяющихся задач (адаптивность, Flexbox, типографика, доступность) и функции для преобразования единиц и цветов.
  5. Применять BEM-нейминг для компонентов, ограничивая вложенность селекторов максимум тремя уровнями и избегая избыточной специфичности.
  6. Использовать современные функции SCSS (@use, @forward, встроенные модули sass:math, sass:color) вместо устаревшего @import и ручных префиксов.

Примеры запросов агенту

Как правильно организовать структуру папок и порядок импорта файлов для большого SCSS-проекта по паттерну 7-1?
Напиши миксин для адаптивной типографики и утилитарные классы для отступов, используя циклы и переменные из карты spacing.
Проверь мой код на соответствие принципам BEM и ограничению глубины вложенности, предложи рефакторинг для улучшения читаемости.

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «scss-best-practices» из репозитория: # https://github.com/mindrally/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r scss-best-practices/ ~/.claude/skills/scss-best-practices/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.