Перевод статьи Per Harald Borgen: Learn CSS Variables in 5 minutes. Пользовательские свойства CSS (CSS Custom Properties), также известные как переменные — большая победа для разработчиков интерфейсов. Они приносят силу переменных в CSS, что приводит к уменьшению дублирования, повышению читабельности и большей гибкости. Кроме того, в отличие от переменных в препроцессорах CSS, нативные переменные CSS фактически являются частью DOM, что даёт много преимуществ. Поэтому они по существу похожи на переменные SASS и LESS на стероидах...

При оформлении веб-страниц разработчикам часто приходится повторять одни и те же значения свойств в нескольких сегментах таблиц стилей - например, при использовании основного акцентного цвета для различных элементов веб-страницы. Но теперь CSS поддерживает использование пользовательских свойств, также известных как переменные CSS, чтобы избежать повторения значений свойств CSS. Как и в любом популярном языке программирования, в CSS также реализованы переменные для написания чистого кода с продуктивным синтаксисом присвоения и извлечения, поддержкой диапазонов и обратных значений...

Источник: WebForMyself.com Давайте рассмотрим новые веб-функции, которые влияют на то, как мы определяем стили в приложениях Angular. Использование @use вместо @import В 2019 году Sass представил новую модульную систему, включающую миграцию с @import на @use. Переключившись на синтаксис @use, мы можем определить, какой CSS не используется, и уменьшить размер скомпилированного файла CSS. Это делает невозможным непреднамеренное включение транзитивных зависимостей. Каждый модуль включается только один раз, независимо от того, сколько раз загружались стили...

Стилизовать страницу можно разными способами: встроить стили прямо в HTML, импортировать, создать с помощью JavaScript или подключить из отдельного файла. Среди разработчиков хорошим тоном считается использовать последний способ, то есть писать стили в отдельном файле и затем подключать их с помощью тега link. А вот внутренних стилей стараются избегать, хотя их применение тоже бывает оправдано. Встроить стили глобально: Встроить с помощью атрибута style: Импортировать стили из внешних файлов: Подключить...