Документация к файлу config.less

Оглавление:

1. Переменные
2. Миксины и функции
3. Правила наименования селекторов
4. Правила свойств
5. Префиксы в миксинах
6. Цветовая схема

Переменные:

Цвет необходимо указывать в названии переменной. Например:
@black-color, @gray, @green-color

Миксины и функции

Все допустимые миксины и функции изложены в файле mixins.less

Правила наименования селекторов

• В стилях не должно быть знаков > + ~
• По возможности убираем !important. В идеале - их не должно быть вообще
• Если определены стили для классов, которые совпадают по имени хотя бы на 50% - выделяем общий селектор и наследуем элементы. Пример:

Плохо:

.ul-w-review-avatar {     
    border: none !important;    
		top: 25px;    
		object-fit: cover;    
}   
.ul-w-review-titles {   
		border: none;   
}   

Хорошо:

.ul-w-review {    
  &-avatar {...}    
  &-titles {...}    
}   

Префиксы в миксинах

• Миксины, которые включают свойства с поддержкой без префиксов в IE11+, Chrome 67+, Mozilla 58+, Opera 50+, iOS Safari 10+, должны быть без префиксов. Предварительно убедившись в том, что существующие стили не попадают в исключения при использовании CSS свойств.

Пример 1:

Плохо:

.transition (@duration: 0.3s, @style: ease) {
	-webkit-transition: @duration all @style;
	-moz-transition: @duration all @style;
	-ms-transition: @duration all @style;
	-o-transition: @duration all @style;
	transition: @duration all @style;
}

Хорошо:

.transition (@duration: 0.3s, @style: ease) {
	transition: @duration all @style;
}

caniuse: transition

Пример 2:

Плохо:

.textCenter {
	text-align: center;
	text-align: -webkit-center; 
	text-align: -moz-center;
}

Хорошо:

.textCenter {
	text-align: center;
}

w3: text-align

Цветовая схема

Миксин .blockTheme(@arguments) должен включать только цветовые определения для элементов. Все CSS-правила, которые относятся к блочной модели, позиционированию, контенту элемента должны располагаться в миксине .behavior().

Пример 1:

Плохо:

.parent {
	.ul-widget {
		&-style1 { 
			background: @text1; 
			position: relative;
		}
	}
}

Хорошо:

.parent {
	.ul-widget {
		&-style1 { background: @text1; }
	}
}