Что такое CSS?
CSS (Cascading Style Sheets) — язык описания внешнего вида страницы: цвета, шрифты, отступы, расположение блоков и поведение вёрстки на разных размерах экрана. HTML задаёт, что находится на странице, CSS — как это выглядит.
Стили записываются правилами: селектор указывает, к каким элементам применить оформление, а внутри перечисляются свойства и их значения. Слово «каскадные» в названии означает механизм приоритетов: когда к элементу подходит несколько правил, побеждает более специфичное.
Современный CSS отвечает за всю раскладку интерфейса. Flexbox и Grid выстраивают элементы в ряды и сетки, медиазапросы адаптируют страницу под мобильные экраны, переменные и анимации позволяют обходиться без JavaScript там, где раньше он был обязателен.
Где применяется
CSS отвечает за всё, что видно на экране после того, как разметка готова: сетка страницы, адаптация под телефон и монитор, тёмная тема, состояния кнопок, плавные переходы. В реальных проектах его редко пишут «голым» — подключают Tailwind, Sass или методологию вроде БЭМ, чтобы стили не превратились в кашу.
Отдельная зона ответственности — производительность и доступность. Тяжёлые тени и анимации, пересчитывающие раскладку, заметно просаживают скорость на слабых телефонах, а недостаточный контраст текста превращается в реальную проблему для части пользователей и в замечание при проверке сайта.
Пример
Карточки каталога должны идти в четыре колонки на мониторе, в две на планшете и в одну на телефоне. В современном 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);
}Частые вопросы
Что означает «каскадные» в названии CSS?
Это правило разрешения конфликтов. К одному элементу может подходить несколько правил сразу, и браузер выбирает победителя по специфичности селектора и порядку объявления. Понимание каскада избавляет от привычки лечить стили ключевым словом important.
Что учить: Flexbox или Grid?
Оба, они решают разные задачи. Flexbox выстраивает элементы вдоль одной оси — меню, панель кнопок, строка карточек. Grid работает в двух измерениях и подходит для раскладки страницы целиком. На практике их спокойно комбинируют в одном макете.
Нужен ли Tailwind или достаточно обычного CSS?
Начинать стоит с обычного CSS: без понимания каскада, селекторов и раскладки Tailwind превращается в запоминание классов. Когда база есть, утилитарный подход экономит время в больших проектах и держит стили рядом с разметкой. Это инструмент, а не замена знанию CSS.
Как сделать сайт адаптивным?
Начинают с мобильной версии и расширяют её медиазапросами. Используют относительные единицы вместо жёстких пикселей, гибкие сетки на flex и grid, изображения с ограничением по ширине контейнера. Проверять результат нужно на реальных устройствах, а не только уменьшая окно браузера.