Несколько советов less-разработчику

1) Не делайте слишком длинных вложений

Когда мы пишем обычный css-код, обычно не получается такой проблемы. Врядли мы напишем перед css-свойствами цепочку из 10 элементов. А вот с древовидной структурой less-кода, такое вполне вероятно. Упрощайте свои «лесенки» кода. Выделяйте отдельные блоки и выносите их. Особенно это касается универсальных классов и id. Длинные цепочки селекторов утяжеляют файл стилей, затрудняют его чтение, порой объем css-файл может увеличиваться из-за излишней вложенности в два раза.

#root { 	max-width: 1200px; 	margin: 0 auto; 	.wrapper { 		padding: 1rem; 		.cart { 			background: #eee; 			h1 { 				font-size: 2rem; 				margin: 1rem 0 2rem; 				&#green-header { 					color: green; 				} 			} 			.good { 				border: 0.1rem solid #ccc; 			} 			input { 				border: 1px solid #ccc; 				&.error { 					background: #99ffff; 				} 			} 		} 	} } 			

#root { 	max-width: 1200px; 	margin: 0 auto; 	.wrapper { 		padding: 1rem; 	} } #green-header { 	color: green; } input.error { 	background: #99ffff; } .cart { 	background: #eee; 	h1 { 		font-size: 2rem; 		margin: 1rem 0 2rem; 	} 	.good { 		border: 0.1rem solid #ccc; 	} } 			

				#root { 				  max-width: 1200px; 				  margin: 0 auto; 				} 				#root .wrapper { 				  padding: 1rem; 				} 				#root .wrapper .cart { 				  background: #eee; 				} 				#root .wrapper .cart h1 { 				  font-size: 2rem; 				  margin: 1rem 0 2rem; 				} 				#root .wrapper .cart h1#green-header { 				  color: green; 				} 				#root .wrapper .cart .good { 				  border: 0.1rem solid #ccc; 				} 				#root .wrapper .cart input { 				  border: 1px solid #ccc; 				} 				#root .wrapper .cart input.error { 				  background: #99ffff; 				} 				

				#root { 				  max-width: 1200px; 				  margin: 0 auto; 				} 				#root .wrapper { 				  padding: 1rem; 				} 				#green-header { 				  color: green; 				} 				input.error { 				  background: #99ffff; 				} 				.cart { 				  background: #eee; 				} 				.cart h1 { 				  font-size: 2rem; 				  margin: 1rem 0 2rem; 				} 				.cart .good { 				  border: 0.1rem solid #ccc; 				} 				

2) Опасайтесь селекторов через запятую

Если мы поставим в начале вложения селекторов (из примера выше) два или более селекторов через запятую, то все-все правила продублируются столько раз, сколько мы поставили селекторов вначале. Говоря об оптимизации веса получившегося css-файла, можно судить о десятках килобайт. Особенно опасно использовать селекторы через запятую, когда они вложены уже в селекторы, которые так же оформлены через запятую. Один из тяжелых случаев представлен ниже

form.type { 	&#typeAddress, 	&form#typeReview { 		textarea { 			background: #eee; 		} 		table { 			td { 				&.value { 					padding: 1rem; 				} 				&.title { 					padding: 0.5rem 1rem; 					margin: 0.5rem 0; 				} 				&.value, &.title { 					background: #eee; 					color: #444; 					a { 						text-decoration: none; 						padding: 0 0.4rem; 					} 					b { 						color: #ccc; 					} 					p { 						border-left: 0.25rem solid #ece; 					} 				} 				&.result { 					padding: 1rem 0; 					background: green; 				} 			} 		} 	} } 			

form.type { 	textarea { 		background: #eee; 	} 	table { 		td { 			background: #eee; 			color: #444; 			padding: 1rem; 			a { 				text-decoration: none; 				padding: 0 0.4rem; 			} 			b { 				color: #ccc; 			} 			p { 				border-left: 0.25rem solid #ece; 			} 			&.title { 				padding: 0.5rem 1rem; 				margin: 0.5rem 0; 			} 			&.result { 				padding: 1rem 0; 				background: green; 			} 		} 	} } 			

form.type#typeAddress textarea, form.typeform#typeReview textarea {   background: #eee; } form.type#typeAddress table td.value, form.typeform#typeReview table td.value {   padding: 1rem; } form.type#typeAddress table td.title, form.typeform#typeReview table td.title {   padding: 0.5rem 1rem;   margin: 0.5rem 0; } form.type#typeAddress table td.value, form.typeform#typeReview table td.value, form.type#typeAddress table td.title, form.typeform#typeReview table td.title {   background: #eee;   color: #444; } form.type#typeAddress table td.value a, form.typeform#typeReview table td.value a, form.type#typeAddress table td.title a, form.typeform#typeReview table td.title a {   text-decoration: none;   padding: 0 0.4rem; } form.type#typeAddress table td.value b, form.typeform#typeReview table td.value b, form.type#typeAddress table td.title b, form.typeform#typeReview table td.title b {   color: #ccc; } form.type#typeAddress table td.value p, form.typeform#typeReview table td.value p, form.type#typeAddress table td.title p, form.typeform#typeReview table td.title p {   border-left: 0.25rem solid #ece; } form.type#typeAddress table td.result, form.typeform#typeReview table td.result {   padding: 1rem 0;   background: green; } 				

form.type textarea {   background: #eee; } form.type table td {   background: #eee;   color: #444;   padding: 1rem; } form.type table td a {   text-decoration: none;   padding: 0 0.4rem; } form.type table td b {   color: #ccc; } form.type table td p {   border-left: 0.25rem solid #ece; } form.type table td.title {   padding: 0.5rem 1rem;   margin: 0.5rem 0; } form.type table td.result {   padding: 1rem 0;   background: green; } 				

3) Миксины

Создавайте миксины чаще

Если вы пишете код и возникает ощущение deja vu, смело добавляйте миксин. Это значительно сэкономит время в последующих проектах. Не пытайтесь сразу сделать миксин идеальным, с кучей параметров. Он должен быть простым и понятным. Впоследствии вы будете его расширять и делать более универсальным.

Используйте параметризацию миксинов

Любой миксин, который вы используете, можно запараметризовать. Во-первых, это удобно. Во-вторых, это экономит получившийся результат в css.
Когда мы добавляем миксин, пусть это будет оформление кнопки, а далее простыми css-свойствами меняем ему размеры или цвет, то в скомпилированном css в селекторе будут сначала правила, описанные в миксине, а затем уже те, которые вы описали. Получается ненужное дублирование css-свойств. Избежать этого можно, вставляя значения параметров в миксин: так миксин скомпилируется сразу с нужными параметрами. И не забывайте ставить параметрам значения по умолчанию.

@color-btn: #ea186e; @color-txt: #000; .btn-flat() { 	display: inline-block; 	text-align: center;	text-decoration: none;  	margin: 1rem 0; 	padding: 0.5rem 1rem; 	background: @color-btn; 	color: @color-txt; 	border: 0.1rem solid darken(@color-btn,15%); }  #root { 	a.btn { 		.btn-flat; 	} 	button { 		.btn-flat; 		background: #ccc; 		color: #303; 		padding: 0.75rem 1.5rem; 		margin: 1.5rem 0; 		border: 0.2rem solid darken(#ccc,15%); 	} } 			

@color-btn: #ea186e; @color-txt: #000; .btn-flat(@bgcolor: @color-btn, @color: @color-txt, @pad: 1rem) { 	display: inline-block; 	text-align: center;	text-decoration: none; 	 	margin: @pad 0; 	padding: @pad/2 @pad; 	background: @bgcolor; 	color: @color; 	border: @pad/10 solid darken(@bgcolor,15%); }  #root { 	a.btn { 		.btn-flat; 	} 	button { 		.btn-flat(#ccc, #303, 1.5rem); 	} } 			

#root a.btn {   display: inline-block;  text-align: center;  text-decoration: none;    margin: 1rem 0;   padding: 0.5rem 1rem;   background: #ea186e;   color: #000000;   border: 0.1rem solid #a60f4d; } #root button {   display: inline-block;  text-align: center;  text-decoration: none;    margin: 1rem 0; /* Это свойство "перебито" нижним */   padding: 0.5rem 1rem; /* Это свойство "перебито" нижним */   background: #ea186e; /* Это свойство "перебито" нижним */   color: #000000; /* Это свойство "перебито" нижним */   border: 0.1rem solid #a60f4d; /* Это свойство "перебито" нижним */    background: #ccc;   color: #303;   padding: 0.75rem 1.5rem;   margin: 1.5rem 0;   border: 0.2rem solid #a6a6a6; } 				

#root a.btn {   display: inline-block;  text-align: center;  text-decoration: none;    margin: 1rem 0;   padding: 0.5rem 1rem;   background: #ea186e;   color: #000000;   border: 0.1rem solid #a60f4d; } #root button {   display: inline-block;  text-align: center;  text-decoration: none;    margin: 1.5rem 0;   padding: 0.75rem 1.5rem;   background: #cccccc;   color: #330033;   border: 0.15rem solid #a6a6a6; } 				

Хороший миксин — небольшой миксин

Собирайте миксины как кубики. Видите повторяющиеся куски кода, используйте миксин. Многие css-свойства имеют вендорные префиксы, поэтому для каждого подобного свойства добавляйте миксин с параметром @arguments. А затем их уже вкладывайте в другие миксины.
Используйте миксины для свойств, имеющих вендорные префиксы — экономьте свое время.

@pad: 0.5rem; @bpad: @pad/5; @color-back: #fff; @color-btn: maroon; .border(@color: #ccc) { 	border: @bpad solid @color; } .gradient(@c1,@c2){   background: @c1;   background: -moz-linear-gradient(top,  @c1 0%, @c2 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@c1), color-stop(100%,@c2));   background: -webkit-linear-gradient(top,  @c1 0%,@c2 100%);   background: -o-linear-gradient(top,  @c1 0%,@c2 100%);   background: -ms-linear-gradient(top,  @c1 0%,@c2 100%);   background: linear-gradient(to bottom,  @c1 0%,@c2 100%);  } .btn(@padding: @pad) { 	padding: @padding/2 @padding; 	display: inline-block; 	text-align: center; 	text-decoration: none; } .btn-simple(@color: @color-btn) { 	.btn; 	.border(darken(@color,7%)); 	.gradient(lighten(@color,3%), darken(@color,3%)); 	color: @color-back; 	color: lighten(@color,40%); 	&:hover { 		.gradient(darken(@color,3%), darken(@color,8%)); 		color: lighten(@color,50%); 	} 	&:active { 		.gradient(darken(@color,15%), darken(@color,15%)); 		color: lighten(@color,10%); 		.border(darken(@color,25%)); 	} } 			

4) Используйте свой шаблон

В любом случае, особенно если вы не пользуетесь css/less-фреймворками, создавайте свой шаблон, подключайте less-файлы, каждый из которых имеет свой набор правил. Один из них может отвечать за мелкие миксины для вендорных префиксов, другой будет css сброс свойств селекторов, третий — подключение веб-шрифтов и иконок.

5) Используйте переменные

Переменные для размеров, для цвета. Это помогает придерживаться сетке и выравниванию элементов.
Я использую для задания размеров блоков и отступов единицы rem, они хороши тем, что не зависят от размера родительского шрифта. Таким образом, горизонтальные отступы становятся одинаковыми, даже если мы меняем размер шрифта. А в дополнение, задав изменение размера шрифта от разрешения экрана для тега html, все размеры пропорционально увеличатся. Такое применяется для планшетов: текст и отступы там должны быть чуть больше по сравнению с «телефонным» масштабом. (работает в современных браузерах, ie9+)

Подытожим

• Не гонитесь за чистотой less-кода, следите за как он будет компилироваться
• Не увлекайтесь древовидной вложенностью селекторов
• Пользуйтесь перечислением селекторов с осторожностью, и только там, где это действительно неободимо
• Добавляйте переменные везде, где только можно.
• Используйте rem, если того позволяет поддержка браузеров для проекта. Так вы избавитесь от проблемы с разными отступами у блоков и подгонкой значений (не забывайте про поддержку браузерами)
• Составляйте миксины как кубики: двигайтесь от простых, заменяющих одно-два свойств, до сложных, включающих в себя другие миксины.
• Создавайте параметризированные миксины везде, обязательно задавая значения по умолчанию
• Используйте миксины для кнопок, элементов интерфейса, вендорных свойств

Разумеется, многие вещи можно оптимизировать через специальные сокращатели и минимизаторы css, но мы должны писать качественный код!