Продолжая неделю верстки на хабре, хочу поделиться и устранить все непонятки относительно препроцессоров. Рассматривать буду на примере LESS, потому что я не люблю SASS он ближе по синтаксису к CSS, при этом содержит в себе ряд самых важных особенностей: наследование, классы/примешивания/миксины, переменные и базовые операции над переменными.
Я не буду сейчас повторять советы по оптимизации less-кода, которые описывал в этой статье-туториале. Эта статья будет некоторым продолжением той. Но вначале сделаю небольшой ответ на одну из последних статей.
Многие не любят препроцессоры за излишнее количество кода, приверженности БЭМу, или еще каким шаблонизаторам. В принципе, они правы, так как неосторожное написание кода на препроцессорах может выдать очень грязный css. В одной из последних статей, автор пишет очень неправильный код LESS, используя дублирование html-структуры в самом файле стилей.
- Во-первых, это генерирует огромное число строк кода конечного css;
- Во-вторых, странно, что используя некоторый препроцессор для html, автор вручную дублирует структуру html-тегов в less. Получается некоторое дублирование информации, так почему бы не оптимизировать и данный шаг? Ведь в данном примере автор изначально в less добавляет классы, а затем их необходимые сочетания подключает в нужных местах.
Это требует дополнительного внимания. Возьмем рассматриваемый автором пример:
blue-arial-element{
// в less можно делать строчные комментарии
// поэтому property желательно писать «в столбик»
// background-color: black;
background-color: blue;
color: white;
font-family: Arial;
font-size: 12px;
}
.button{
.blue-arial-element;
}
.header{
.blue-arial-element;
}
.footer{
.blue-arial-element;
}
Результатом компиляции будет четверократное повторение исходного класса. Это недопустимо. Даже для примера.
Стоит избегать дефолтных классов, а использовать исключительно миксины.
Вот, оптимизированный код less:
blue-arial-element(){
// в less можно делать строчные комментарии
// поэтому property желательно писать «в столбик»
// background-color: black;
background-color: blue;
color: white;
font-family: Arial;
font-size: 12px;
}
.button, .header, .footer{
.blue-arial-element;
}
Данный пример скомпилится в 6 строчек кода против 24(!). На самом деле, такой код может быть только в каком-нибудь одностраничном примере. На большом проекте все будет по-другому.
@pad: 0.5em;
@xs: @pad;
@s: @pad*1.2;
@m: @pad*1.5;
@l: @pad*2;
@xl: @pad*3;
@color-red: #a81430;
.btn-params(@size: @s) {
padding: @size/2 @size;
display: inline-block;
border-radius: @size/4;
margin: @size/2;
}
.btn-flat(@size: @s, @color: @color-red) {
.btn-params(@size);
background: @color;
//.gradient(lighten(@color,3%),darken(@color,3%));
color: #fff;
}
.button {
.btn-flat(@l, @color: #ccc);
}
.button2 {
.btn-flat;
}
input[type="submit"], // Обычно на проектах используются разные input
input[type="button"], //
button, // а иногда и кнопки
.button { // и еще у нас бывают ссылки с классом button
.btn-flat(@m);
&[disabled="disabled"] {
.btn-flat(@m,#eee);
}
}
.button {
padding: 0.5em 1em;
display: inline-block;
border-radius: 0.25em;
margin: 0.5em;
background: #cccccc;
color: #fff;
}
.button2 {
padding: 0.3em 0.6em;
display: inline-block;
border-radius: 0.15em;
margin: 0.3em;
background: #a81430;
color: #fff;
}
input[type="submit"],
input[type="button"],
button,
.button {
padding: 0.375em 0.75em;
display: inline-block;
border-radius: 0.1875em;
margin: 0.375em;
background: #a81430;
color: #fff;
}
input[type="submit"][disabled="disabled"],
input[type="button"][disabled="disabled"],
button[disabled="disabled"],
.button[disabled="disabled"] {
padding: 0.375em 0.75em;
display: inline-block;
border-radius: 0.1875em;
margin: 0.375em;
background: #eeeeee;
color: #fff;
}
- Здесь я использовал задание размеров с помощью переменных. При этом в процессе разработки не нужно думать над тем, сколько пикселей/пунктов/em'ов ставить для заголовка, маленькой приписочки, большой, средней, маленькой или крохотной кнопки.
- Используются именно миксины, они не дублируется сами по себе в коде. Используется параметризация миксинов. Хотим красную кнопку, ставим цвет по-умолчанию. Хотим зеленую — ставим в параметр зеленый цвет.
- В серьезных проектах и для универсальности, стоит задавать переменные для большинства цветов, например, говорящие за себя переменные цвета: @color-disabled; @color-warning; @color-success; @color-brand; @color-brand-2; @color-link; @color-txt; @color-border;
Еще одна проблема верстки CSS
Этой проблемой болен БЭМ, неучтивое использование LESS, да и просто обычного CSS. Это — перебивание одних стилей другими. Иногда встречаешься с тем, что к какой-нибудь несчастной ссылке-кнопки применяется стилей с 10, а то и 20 различных правил. Половина друг друга перебивает. Это мало того, что увеличивает ненужное количество кода, так еще и тормозит редрединг, а к тому же, ну ооочень сильно затрудняет восприятие. Начинаешь искать, какие же селекторы были перебиты каким-нибудь самым специфичным.
К таком поведению ведет две ситуации:
- Лень
- Незнание
Лень я неспроста вывел на первое место: часто бывает, что не хочется модернизировать какой-то миксин под аргументы, и просто пишешь другой цвет фону какой-нибудь отличной кнопки. Т.е. получается вот такая вещь:
.btn-params(@size: 0.5em) {
padding: @size/2 @size;
display: inline-block;
border-radius: @size/4;
margin: @size/2;
}
.btn-for-our-project() {
.btn-params;
background: #ccc;
color: #fff;
border-radius: 0.25em;
border: 1px solid #000;
}
.active {
color: #000;
background: yellow;
}
.button {
.btn-for-our-project;
&.active {
background: #aaa;
color: #fff;
border: 1px solid blue;
}
}
.active {
color: #000;
background: yellow;
}
.button {
padding: 0.25em 0.5em;
display: inline-block;
border-radius: 0.125em;
margin: 0.25em;
background: #ccc;
color: #fff;
border-radius: 0.25em;
border: 1px solid #000;
}
.button.active {
background: #aaa;
color: #fff;
border: 1px solid blue;
}
В итоге для тега <a href="/" class="button active"> применится три стиля цвета фона, три цвета текста и еще некоторые ненужные. Разумеется, это не совсем реальный пример, и данная практика еще допустима. Но, когда идет перебивание практически всех стилей: от position и display до color и box-shadow, да еще и в количестве десятка — это очень плохая практика.
Заключение
В основном, не выбранная методика определяет качество конечного кода, а умение ей пользоваться. Я остановился на препроцессорах. Возможно, стоит использовать препроцессоры для html. Но в рамках моей текущей рутины, я не использую написание html, а беру уже существующий.
P.S.: Статья получилось маленькой. Думал, что выйдет материала побольше. Поэтому, если я где-то что-то упустил, или же примеры стоит сделать другими, прошу это высказывать в комментариях или ЛС. Предполагаю, что статья после некоторого периода обрастет подробностями, а я повешу шильдик «tutorial».
Автор: Carduelis
