Что такое CSS
CSS (Cascading Style Sheets, каскадные таблицы стилей) - язык, который описывает внешний вид страницы. HTML задаёт структуру: где заголовок, где абзац, где кнопка. CSS определяет, как это выглядит - цвета, шрифты, отступы, расположение блоков на экране.
CSS простыми словами
Если HTML - это скелет и содержимое страницы, то CSS - это её одежда. Один и тот же HTML-документ можно "одеть" по-разному: сделать сайт тёмным или светлым, собрать колонки в список на телефоне, сделать кнопки круглыми или квадратными. Меняется только CSS, структура остаётся прежней.
Как устроен CSS
Правило CSS состоит из трёх частей. Селектор указывает, к какому элементу применяется правило - ко всем кнопкам или к конкретному заголовку. Свойство называет, что меняется: цвет, размер шрифта, отступ. Значение задаёт конкретную величину этого свойства.
Каскад, наследование и специфичность
Слово "каскадные" в названии не случайно. Если к одному элементу применяется несколько правил, побеждает не первое и не последнее из них, а то, у которого больше вес - он складывается из специфичности селектора (id весит больше class, class больше тега) и порядка подключения стилей. Наследование добавляет слой: часть свойств, например шрифт, элемент получает от родителя, если не задано своё. Когда специфичности не хватает, в ход идёт !important - перебивает правила силой, а не точностью селектора. Отсюда и споры: он решает проблему быстро, но следующему разработчику придётся перебивать уже его.
Что умеет CSS
- Цвета и шрифты. Управляет палитрой, начертаниями и размерами текста.
- Отступы и размеры. Задаёт расстояния между блоками и их габариты.
- Раскладка. Flexbox и grid строят сложные сетки без таблиц и обходных приёмов.
- Анимации и переходы. Плавные изменения состояний - наведение курсора, появление, скрытие.
- Адаптивность. Медиазапросы меняют оформление в зависимости от ширины экрана.
CSS-переменные
CSS-переменные, они же кастомные свойства, позволяют задать значение один раз и использовать его во всех правилах сразу. Основной цвет бренда или базовый отступ хранятся в одном месте: меняешь переменную - меняется весь сайт, а не десятки строк кода. На переменных строится дизайн-система: токены цвета, отступов и шрифтов вместо значений, разбросанных по файлу стилей.
Как подключается CSS
Есть три способа. Внешний файл подключается одной строкой в head и кэшируется браузером - правильный вариант: код переиспользуется на всех страницах, его проще поддерживать. Стили внутри тега style в head работают только для одной страницы. Инлайн-стили в атрибуте style у самого элемента нельзя переиспользовать, зато их специфичность выше любых внешних правил. Годятся как исключение, например для значения, которое рассчитал JavaScript.
Влияние на скорость загрузки
CSS блокирует отрисовку страницы: браузер не показывает содержимое, пока не получит и не разберёт стили. Поэтому важны размер файла, отсутствие мёртвых правил и критические стили первого экрана, вынесенные отдельно, чтобы страница отрисовалась, не дожидаясь всего файла целиком.
Что чаще всего делают неправильно
- Жёстко прописанные цвета. Hex-код в каждом правиле вместо переменной - при редизайне его приходится искать по всему коду.
- Гонка !important. Один !important тянет за собой следующий, и специфичность перестаёт работать так, как задумана.
- Мёртвые правила. Стили от старых версий страницы, которые никто не решается удалить: вдруг где-то ещё используются.