Css подобряване на четливостта с потребителски свойства, lopart

Премахване на дубликат код

Сухи означава «не повтаряйте си сам» или «не се повтори." Добър мишена, тъй като това ще ви спести не само печатен текст, но и време за търсене, замени, и отстраняване на грешки, ако изведнъж искате да промените нещо. Просто казано, този подход намалява разходите за поддръжка код.

Нека разгледаме един пример. По-долу е лоша CSS код, с много повторения:

Ако искате да промените цветовата тема, трябва да промените стойността на първите три селектори. Цветът на подписа не могат да бъдат докоснати.

Е, как може да помогне на потребителски свойства на CSS? Можете да зададете стойността веднъж и след това да го използвате отново и отново! Нека да създадете потребителски имот -theme-цвят:

Запазването на цвета тема в персонализирана променлива, можете да направите промени на едно място, и всички стойности ще бъдат актуализирани. Не само защото сте добавили семантика в CSS: ако преди цветът беше трудно да се отнасят към темата, но сега това е ясно изразен.

Цвят на подпис на текста също могат да бъдат записани в променлива потребител:

Ние току-що започна!

Сложете калкулатор

Ако четете въвеждането на потребителски CSS свойства, трябва да знаете, че те могат да бъдат използвани с изчислено (функция) за извършване на изчисления в браузър.

Нека разгледаме един пример за мрежа:

Ако сте виждали този модел или добре знаем кутия модел СГО, най-вероятно, ще разберем, че този код създава оформление с клетки, чиито страни са равни на 16px 16px и ширина сепаратори между клетките. от чист CSS код е трудно да се разбере, а ние не отбележа това, което е наистина важно.

От дизайнерска гледна точка важен аспект тук е пространството около клетките в 16px. Ние всички искаме да се създаде като се вземат предвид крайния резултат, а не междинните изчисления. Сами по себе си, тези изчисления са маловажни, но за да ги отличават твърде дълго.

Персонализирани свойства и изчислено () може да ни помогне:

Така че ние работим с смислени концепции изчислителни, отколкото резултатите от тези изчисления. Така че много по-лесно да се разбере кода в бъдеще.

В действителност, тази идея може да бъде удължен до цялата оформлението на сайта, за изравняване елементи на мрежата:

В примера по-горе ние използваме междинни изчисления прави кода по-разбираеми.

Забележка: в Safari / WebKit момента имаме проблеми с междинните изчисления от този тип. Проблемът е решен в Safari Technology Preview, е вероятно, че постоянните и следващата Safari 10.1 освобождаване.

прочетете промени

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

Нека разгледаме един пример. Обикновено оформление на окото на flexbox:

Просто не разбирам какво се случва тук. Нека да разгледаме кода. По подразбиране на мрежата с една колона е конструиран за малки екрани. Както окото на екрана се разширява до 3 и 6 колони. Както в примера в предишния раздел, ние имаме една клетка със странична 16px 16px и разделители.

Сега, всички изчисления се извършват в едно и също място. Остава само да се променят стойностите на потребителски свойства във всички медийни заявки. Независимо дали знаете кода, или не, така че това става много по-ясно и по-разбираемо. И като бонус, така че да не направите грешка при въвеждане в изчисленията в нови медийни заявки, и това няма да доведе до неочаквани резултати!

Забележка: Кодът по-горе може да бъде твърде трудно за CSS предпроцесорни. Имайте това предвид, ако използвате нещо подобно и да получите неочакван резултат!