CSS Variables Naming

Convention that I define for myself and which saves my time during entire developing process

Every time, when I create the new css variables I think about the list of the rules which help me to clean my work. I check if there:

Main styles

• An amount of the variables is reasonable;
• All names of the variables are conform to the structure:

[name_of_the_block/element]__[css_property]_[modifier/base]
or
[css_property]_[modifier/base]

name_of_the_block/element- An element is independent part of the page, e.g. input, checkbox, etc. A block contains a number of the elements, e.g. time-picker, accordion, etc.

__css_property- the parameter which means style property, e.g. border-radius, box-shadow, etc;

_modifier/base- _base if the value of this variable is default use case; _modifier- defines additional appearance, state or behavior. Also, _base simplified searching and reassigning values of the css properties within a project through IDE.

Examples:

@input__border-color_focused: #F27431; //behavior
@text__color_status-success: #6BC509; //state
@link__color_has-dark-bg: #F3A620; //appearance
@table-row__background-color_dark: #E8ECF1; //appearance

Base Colors

• An amount of the variables is reasonable;

• The name of the color is unique as much as possible. The web-tool ‘Name That Color’ is used for the fastest and most suitable generation of the color names;

• Structure of the base color variable:

color_[name_of_the_color]-base

color- the prefix which define the variable which relate to the ‘color’ type;

_name_of_the_color- the parameter which include generated color name;

-base- the keyword which define the variable as base color name.

Examples:

@color_fern-frond-base: #657220;
@color_himalaya-base: #6A5D1B;

• If several shades of the color are used and they are differ from each other by one of the color parameters (e.g. hue, green, alpha), the name of the variable:

color_[name_of_the_color]-[color_parameter]-inc/dec-[degree_of_the_change]

-color_parameter- one parameter of the rgba, hsla;

-inc/dec- increase or decrease;

-degree_of_the_change- numeric value.

Examples:

@color_mystic-base: rgb(228, 232, 238); //the base color
@color_mystic-blue-inc-3: rgb(228, 232, 235); //the color with the blue level lower than base color for 3 points
@color_mystic-alpha-dec-40: fade(@color_mystic-base, 60); //the color with the transparency lower than base color for 40%

• The next structure is used only if more than 5 different shades of the particular color are used or they are differ from each other by more the one parameter, the name of the variable:

color-group_[name_of_the_group]-[number_of_the_group_item]

color_group- the prefix which define the variable as one color of the particular color category which consist of colors group;

_name_of_the_group- the name of the X11 color category;

-number_of_the_group_item- numeric value. All particular variables are sorted by the lightness order initially. But if the new group item would be added to this collection, there will no need to change the name of the existing variables.

Examples:

@color_group-blue-1: #6195ED;
@color_group-blue-2: #89A8DC; //the color which lighter than previous variable (@color_group-blue-1)

Documentation rules

• All variables are stored in the dedicated folder ‘variables’ in the variables__main.less file;
• All base color variables are stored in dedicated variables__colors.less file which is included by variables__main.less file;
• There are special sections/subsections with the comments on the top of the group of the variables. These comments are titles of the groups.

Examples:

/**
 * @section Base Color Variables
 *
 * @subsection Red
 */
@color_red-orange-base: #FF3635;
/**
 * @subsection Gray
 */
@color_oxford-blue-base: #354053;
@color_regent-gray-base: #7D889B;
/**
 * @section Main variables
 *
 * @subsection Typography
 */
@font-size_base: 12px;
@font-family_base: 'Open Sans', sans-serif;
/**
 * @subsection Borders
 */
@border_base 1px solid darken(#E8ECF1, 6%);
@border-radius_base: 2px;
/**
 * @subsection Typography
 */
@text__color_base: #354053;
@label__color_base: #354053;
/**
 * @subsection Links
 */
@link__color_base: #F27431;
@link__color_has-dark-bg: #F3A620;