Пользовательские свойства. Часть 1: Знакомство
Часть 1: Знакомство с пользовательскими свойствами
Это стартовый туториал серии про пользовательские свойства, в котором мы познакомимся с их синтаксисом и покажем типовые примеры использования. Кастомные свойства часто называют «CSS переменными», но их настоящее название «CSS Custom Properties».
Для начала посмотрите на файлы index.html и card.css для общего понимание структуры страницы. Для этого нажмите на вкладки в левом верхнем углу демонстрации.
На следующих шагах не стесняйтесь возвращаться на вкладку с разметкой. Разметка один из важных аспектов понимания работы кастомных свойств.
Для создания кастомного свойства используется префикс --, после которого следует название кастомного свойства. С помощью var() можно считывать значения этого свойства.
--color: #3370ce; — создание кастомного свойства со значением #3370ce.
color: var(--color); — использование кастомного свойства. Значение у color будет равно #3370ce, поэтому заголовок стал синего цвета.
Уже видно преимущество использования кастомных свойств: одно значение можно использовать в разных местах. Это упрощает поддержку и изменение стилей. Такой подход называется DRY (Don’t Repeat Yourself).
Кастомные свойства можно объявить с помощью -- только внутри CSS-правил.
Мы вынесли объявление --color наружу из CSS-правила, и объявление не сработало. Поэтому заголовок и кнопка потеряли свои цвета. Кнопка сейчас имеет прозрачный цвет фона и белый цвет текста поэтому её стало не видно.
Парсер CSS распознаёт кастомное свойство только если оно начинается с --. В противном случае браузер не поймёт, что это кастомное свойство, и просто проигнорирует его. Поэтому важно всегда начинать название кастомного свойства с двух дефисов.
Заголовок стал синего цвета из-за обычного CSS-свойства color, что не делает его кастомным.
Кастомные свойства чувствительны к регистру. Это означает, что переменные с одинаковым именем, но разным регистром, будут считаться разными переменными.
--COLOR и --Color это два разных кастомных свойства. Из-за этого заголовок и кнопка разного цвета.
Имена кастомных свойств не могут содержать пробелы и спецсимволы, кроме дефиса.
На этом шаге ни одно кастомное свойство не сработало, так как именование не соответствует требованиям.
Так как кастомные свойства с нами уже давно, в проектах можно увидеть именование с помощью дефиса или в стиле camelCase.
Значением кастомного свойства может быть другое кастомное свойство.
Обычно так делают, что создать глобальные переменные, которые используются по всему проекту. А в конретных компонентах используются более подходящие названия со значениями, которые зависят от глобальных переменных.
Это не значит, что в компоненте всегда нужно использовать в качестве значения только глобальные переменные. Использовать можно любые значения, которые нужны.
Глобальные значения, которые используются по всему проекту, обычно указывают в «глобальном селекторе», обычно это :root. :root — это псевдокласс, который представляет корневой элемент документа, обычно это <html>.
Внутри :root можно объявлять пользовательские свойства, которые будут доступны во всем документе.
На этом первое знакомство с кастомными свойствами завершено. Закрепим то, что мы узнали про них:
- Кастомные свойства позволяют придерживаться подхода DRY и переиспользовать значения в нескольких CSS-правилах.
- Названия должны всегда начинаться с двух дефисов
--. - Объявлять кастомные свойства можно только внутри CSS-правил.
- Чувствительны к регистру,
--color и --Color — разные свойства. - В имени нельзя использовать пробелы и спецсимволы, кроме дефиса.
- В проектах обычно используется именование с помощью camelCase или kebab-case:
colorBase или color-base. - Значением кастомного свойства может быть другое кастомное свойство.
- Кастомные свойства, используемые на всём проекте, обычно объявляют в
:root.
