Домашнее задание
Задача: Возьмите хаотичный CSS-файл и разложите его на
tokens/base/components/utilities. Внутри одного компонента приведите свойства к единому порядку и добавьте один полезный комментарий, объясняющий причину правила.1
Подготовьте пример
Создайте небольшую страницу (1–2 компонента) с CSS «в одном файле, как получилось» — намеренно перемешанный порядок свойств.
2
Разнесите по файлам
Создайте tokens.css, base.css, папку components/ и utilities.css. Соберите их в styles.css через @import в порядке каскада (база → компоненты → утилиты).
3
Наведите порядок свойств
В одном компоненте выстройте свойства «позиционирование → блочная модель → типографика → оформление» и добавьте секцию-комментарий + один комментарий-причину.
4
Проверьте переносимость
Убедитесь, что компонент не зависит от случайного родителя (нет селекторов вида .parent .component) и что страница выглядит так же, как до рефакторинга.