Зачастую, создавая 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, но мы должны писать качественный код!
Автор:
Источник [1]