CSS променливи: общи стойности с ясно предназначение

Полезно е да знаеш

В един интерфейс често се повтарят едни и същи цветове, разстояния и размери. Ако всяка стойност е записана отделно на много места, промяната изисква внимателно търсене. CSS custom properties позволяват стойностите да бъдат именувани и използвани повторно. Обичайният запис започва с две тирета, а достъпът става чрез функцията var. Това помага не само при редактиране, но и при четене: името може да обясни предназначението, което една числова или цветова стойност сама не показва. [1]

Тези свойства участват в каскадата, а обичайно дефинираните с две тирета стойности се наследяват. [1] Това означава, че мястото на дефиниране има значение. Една обща стойност може да бъде зададена високо в структурата, а отделен компонент да я замени за собствената си област. Полезно е тази възможност да бъде използвана съзнателно. Иначе дълга последователност от преопределяния може да направи крайния цвят толкова труден за намиране, колкото при многократните буквални стойности.

Да си представим измислен каталог с основни и второстепенни бутони. Вместо всички сини стойности да бъдат обединени само защото изглеждат еднакви днес, можем да попитаме каква роля има всеки цвят. Цветът за връзка и цветът за съобщение може да съвпадат временно, но да обслужват различни решения. Изборът на имена трябва да отразява тези роли. Така бъдеща промяна на съобщенията няма непременно да промени и всички връзки в сайта.

Функцията var се използва в стойности на CSS свойства. Тя не е общ механизъм за замяна на имена на свойства или селектори. Може да има и резервна стойност, която се използва при подходящите условия. [2] Това разграничение е важно при четене на пример: удобството на синтаксиса не означава, че той работи навсякъде в стила. Добре е всяка малка демонстрация да показва къде е зададена стойността и кой елемент действително я получава.

В практическа проверка можем да променим една роля и да обходим компонентите, които я използват. Ако целта е само основният бутон, проверяваме дали второстепенният и съобщенията са останали според очакванията. После разглеждаме локално преопределяне в конкретна секция. Тази проверка е по-смислена от доказване, че дадена променлива съществува. Важен е крайният резултат в интерфейса и съответствието му с избраното предназначение.

При поддръжка е полезно общите имена да бъдат малко и последователни, а специфичните да описват своя компонент. Не е необходимо всяко число автоматично да получава име. Въпросът е дали повторната употреба или смисълът оправдават общата стойност. CSS custom properties предоставят механизъм за това решение. Качеството идва от ясните роли, предвидимото наследяване и проверката, че една редакция променя точно онези части на страницата, които е трябвало да бъдат свързани.