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

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

⚡ Кратко

Три задания: объяснить разницу между уровнями порядка, навести порядок свойств в правиле и разнести «свалку» CSS по файлам. Результат на экране меняться не должен — меняется только структура.

Задания

  1. Объяснение. Своими словами опишите разницу между «порядком свойств внутри правила», «файловой структурой» и «ITCSS». Для каждого приведите по одному примеру.
  2. Порядок свойств. Дано правило с перемешанными свойствами — приведите его к порядку «позиционирование → блочная модель → типографика → оформление», ничего не меняя визуально. 
    .alert {
  color: #7f1d1d;
  border-radius: 8px;
  display: flex;
  background: #fee2e2;
  gap: 8px;
  padding: 12px 16px;
  font-weight: 600;
  align-items: center;
}
  3. Файловая структура. Разложите «свалку» ниже на base/, components/ и utilities/; напишите содержимое главного styles.css с @import в правильном порядке. 
    * { box-sizing: border-box; }
.btn { padding: 10px 16px; background: #2563eb; color: #fff; }
.mt-4 { margin-top: 16px; }
body { margin: 0; font-family: system-ui; }
  4. Ревью. Найдите в своём коде один хрупкий селектор (зависит от места на странице или имя описывает вид) и перепишите его так, чтобы компонент переносился без поломок.
Ожидаемый результат: во всех заданиях страница выглядит так же, как до правок — вы меняете только организацию кода. Сверьтесь с решениями.

Навигация