0Pricing
CSS Academy · Урок

Организация файлов: ITCSS и шаблон 7-1

Структурируйте файлы CSS по шаблону перевёрнутого треугольника или 7-1 для масштабируемых проектов.

«Организация файлов: ITCSS и шаблон 7-1» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Зачем организовывать файлы CSS?

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

ITCSS: перевёрнутый треугольник CSS

ITCSS организует CSS по слоям, упорядоченным по возрастанию специфичности. Подобно перевёрнутому треугольнику, самые широкие (наиболее общие) правила находятся сверху, а самые специфичные — снизу. Это соответствует естественной работе каскада.

Слои ITCSS

7 слоёв ITCSS (от наиболее к наименее общему):

  1. Настройки — переменные и токены дизайна
  2. Инструменты — примеси и функции
  3. Общие правила — сброс и нормализация
  4. Элементы — базовые стили элементов HTML
  5. Объекты — абстракции компоновки (без оформления)
  6. Компоненты — компоненты пользовательского интерфейса
  7. Утилиты — переопределения и вспомогательные классы; здесь разрешён !important

Структура файлов ITCSS

Типичная структура файлов ITCSS:

  <pre class="file-tree">src/styles/
  01-settings/
    _colors.scss
    _typography.scss
    _spacing.scss
  02-tools/
    _mixins.scss
  03-generic/
    _reset.scss
  04-elements/
    _headings.scss
    _links.scss
  05-objects/
    _container.scss
    _media.scss
  06-components/
    _button.scss
    _card.scss
  07-utilities/
    _text-align.scss
    _display.scss</pre>

Шаблон 7–1

Шаблон 7–1 организует Sass в 7 папок и 1 главный файл, который импортирует всё содержимое:

  • abstracts/ — переменные, функции, примеси
  • base/ — сброс, типографика, базовые элементы
  • components/ — кнопки, карточки, модальные окна
  • layout/ — верхний и нижний колонтитулы, боковая панель, сетка
  • pages/ — стили отдельных страниц
  • themes/ — несколько тем
  • vendors/ — CSS сторонних разработчиков

Главный входной файл

Главный файл main.scss импортирует все фрагменты по порядку:

  <pre class="file-tree">@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'base/typography';
@use 'components/button';
@use 'components/card';
@use 'layout/header';</pre>

Слои CSS (<code>@layer</code>) для организации

Современный CSS @layer обеспечивает те же преимущества упорядочивания каскада, что и ITCSS, без препроцессора. Слои объявляются один раз, а их приоритет фиксируется независимо от порядка в исходном коде.

  <div class="card text-primary">Layered card text</div>

Размещение рядом и централизованное хранение

Альтернатива централизованным файлам стилей — размещать CSS компонента рядом с файлом компонента. Это распространено в проектах на Реакте и Вью, использующих модули CSS или CSS в JS.

Именование фрагментов Sass

Файлы-фрагменты Sass начинаются с символа подчёркивания (_button.scss). Подчёркивание сообщает Sass, что файл не компилируется отдельно и должен быть импортирован в главный файл.

PostCSS как альтернатива

Если вы не используете Sass, PostCSS с плагином @import или нативный CSS @import с @layer обеспечивают такую же организацию файлов без препроцессора.

Файлы CSS компонентов

Используете ли вы ITCSS, шаблон 7–1 или размещение файлов рядом, у каждого компонента должен быть собственный файл. Называйте файл по компоненту, стили которого он задаёт: _card.scss, button.css, Nav.module.css.

Быстрая проверка

Какой слой в ITCSS находится на самом верху перевёрнутого треугольника (самый широкий и наименее специфичный)?

Итоги

ITCSS упорядочивает слои CSS от общих к специфичным в соответствии с каскадом. Шаблон 7–1 организует Sass в 7 папок, импортируемых через один главный файл. Современный CSS @layer обеспечивает такой же контроль каскада средствами самого языка. Независимо от того, хранятся ли файлы централизованно или рядом с компонентами, главный принцип таков: один файл на компонент и единообразный порядок импортов.

Часто задаваемые вопросы

Урок «Организация файлов: ITCSS и шаблон 7-1» бесплатный?

Да — полный текст урока «Организация файлов: ITCSS и шаблон 7-1» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Организация файлов: ITCSS и шаблон 7-1»?

Структурируйте файлы CSS по шаблону перевёрнутого треугольника или 7-1 для масштабируемых проектов. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Организация файлов: ITCSS и шаблон 7-1»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Почему архитектура CSS важна
  2. BEM: именование блока, элемента и модификатора
  3. Организация файлов: ITCSS и шаблон 7-1
  4. Как избежать войн специфичности
← Назад к CSS Academy