Урок 44. Обзор урока: Организация CSS: структура, порядок свойств

📁 Раздел: Организация CSS ⏱️ Время изучения: ~75 мин 🎯 Сложность: Средняя
#import #layer

⚡ Кратко

Браузеру всё равно, как написан CSS, — а команде нет. Урок про то, как навести порядок: единый порядок свойств, секции-комментарии, разбивка на файлы и слои каскада (ITCSS, @layer), чтобы правка одной кнопки не превращалась в раскопки.

О чём урок

Результат CSS на экране не зависит от того, в каком порядке стоят свойства и в скольких файлах лежат стили. Зато от этого зависит, как быстро вы найдёте нужное правило и не сломаете соседнее. Разбираем четыре уровня порядка: свойства внутри правила, секции-комментарии, файловую структуру и слои каскада (ITCSS, @layer, utility-first).

В уроке 45 продолжим темой стабильного именования классов — БЭМ.

Ключевые понятия

  • порядок свойств — позиционирование → блочная модель → типографика → оформление
  • секции-комментарии — границы блоков и причины правил
  • файловая структура — base / layout / components / utilities
  • ITCSS — пирамида слоёв от общего к частному
  • @layer — явный приоритет слоёв каскада
  • utility-first — мелкие повторяемые классы
  • документация — фиксация командных договорённостей

Структура урока

📖 Теория

Понятия, правила и практическая логика.

🔖 Справочник

Синтаксис и короткие примеры.

💻 Примеры

Рабочая HTML/CSS связка.

⚖️ Старый vs Новый

Что усложняло поддержку и чем заменить.

📝 Задания

Практика для самостоятельной проверки.

✅ Решения

Один из корректных вариантов.

🐛 Ошибки

Типовые проблемы и исправления.

🏠 Домашнее задание

Итоговая мини-практика урока.

🔗 Ресурсы

Документация и повторение.

Навигация