We're still in need of documenting variable naming guidelines similar to PHP variables or JavaScript variables. Following up archived discussion at https://www.mediawiki.org/wiki/Manual_talk:Coding_conventions/CSS/Archive_1#Less_and_future_CSS_variable_naming_convention it's now time to settle on a guiding convention. The full property name variant has seen the most supportive feedback due to reduced cognitive load and is therefore the selected proposal.
LESS exampleː
/* Colors */
@background-color-base: #fff;
@background-color-error: #fff36f;
@color-base: #000;
@color-error: #c00;
@color-progressive: #347bff;
/* Sizes & Boxes */
@size-selector: 42rem;
@size-small: 0.1rem;
@border-error: @size-small solid @color-error;
/* Fonts */
@font-family-heading: "Linux Libertine", Georgia, Times, serif;
@font-family-flow: "Helvetica Neue", Helvetica, Arial, sans-serif;
/* Transitions */
@transition-base: 0.2s ease-in;
/* CSS Variables example */
--background-color-error: #fff36f;
--color-error: #c00;
/* Applied (Less): */
.mw-selector {
background-image: url( selector.svg );
background-repeat: no-repeat;
color: @color-error;
display: block;
position: absolute;
top: 0;
left: 0;
width: @size-selector;
height: @size-selector;
font-family: @font-family-flow;
}
/* Applied (mixed): */
.mw-error {
background-color: @background-color-error;
background-color: var( --background-color-error );
margin: @size-small 0;
border: @border-error;
transition: opacity @transition-base;
}
Variables are (with the very exception of calculations and size values) almost always belonging to a certain CSS property, therefore starting with repeating the property clarifies and emphasizes the content of the variable.