How to become an author
Search
Write a publication
Pull to refresh

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

Reading time7 min
Views20K
Website development*CSS*
Tutorial
Зачастую, создавая less-файлы (что, впрочем, касается и других препроцессоров css), мы гонимся за красотой и элегантностью less-кода, когда как частенько забываем про скомпилированный css-код. Иногда это влечет за собой критичные последствия, когда объем конечного css возрастает в раз, а код становится совершенно нечитаемым.

Disclaimer
1) Эта статья подойдет как для SASS/SCSS-разработчиков, так и для CSS-писателей.
2) Приведенные примеры кода не идентичны, но в большинстве случаев взаимозаменяемы и написаны для иллюстрации советов.

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;
	}
}


Посмотреть скомпилированный css-код
Плохо Хорошо 
				#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;
			}
		}
	}
}


Посмотреть скомпилированный css-код
Плохо Хорошо 
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);
	}
}


Посмотреть скомпилированный css-код
Плохо Хорошо 
#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, но мы должны писать качественный код!
Tags:
Hubs:
Total votes 22: ↑16 and ↓6+10
Comments14
8
Karma
0
Rating
Павел Щеголев @Carduelis

Principle Front-end Engineer

Send message

Articles

Your account

Sections

Information

Services

Support
© 2006–2024, Habr