Що таке CSS?

Де застосовується

CSS відповідає за все, що видно на екрані після готової розмітки: сітку сторінки, адаптацію під телефон і монітор, темну тему, стани кнопок, плавні переходи. У реальних проєктах його рідко пишуть без допоміжних інструментів: використовують Tailwind, Sass або методологію на кшталт БЕМ, щоб стилі залишалися впорядкованими.

Окремо CSS впливає на швидкість і доступність сайту. Важкі тіні та анімації, які змушують браузер перераховувати макет, гальмують сторінку на слабких телефонах, а слабкий контраст тексту ускладнює читання частині користувачів.

Приклад

Картки каталогу мають стояти в чотири колонки на моніторі, у дві на планшеті й в одну на телефоні. У сучасному CSS це робиться одним правилом grid з автоматичним підбором кількості колонок — без JavaScript і без окремої мобільної версії.

.catalog {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card {
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}