Простой CSS

CSS-препроцессоры — это замечательные инструменты, которые позволяют писать код проще и быстрее. Но следует понимать, что само по себе использование препроцессоров не сделает ваш код лучше, и даже более того, если до препроцессоров код был так себе, их применение может сделать его ещё хуже. Несмотря на все прекрасные возможности, которые дают препроцессоры, вам всё ещё придется самостоятельно поддерживать ваш код аккуратным и продумывать его структуру.

Главное правило при работе с препроцессорами — ваши переменные и миксины не должны превращаться в черный ящик. Вы всегда должны понимать что хранится в переменной и что возвращает миксин.

Почему это важно? Потому что проект должно быть удобно не столько писать, сколько читать. Если вы передадите проект другому разработчику, сколько ему потребуется времени, чтобы разобраться в нём? Разберётесь ли вы сами в своём проекте через полгода? Чем меньше в коде чёрных ящиков и неочевидных мест, тем меньше времени вы потратите на въезжание в проект и тем быстрее вы сможете начать решать свои задачи. Поэтому как бы ни было весело придумывать хитрые ходы и навороченные функции и миксины, помните о том, что в какой-то момент вам, возможно, придется разбираться в этом коде заново.

Если очень хочется заняться программированием на препроцессорах, заведите себе аккаунт на Codepen и играйтесь там безо всяких ограничений. Экспериментировать с кодом не только интересно, но и полезно, и вы легко сможете поделиться своими экспериментами с миром публикуя ссылки на онлайн-демки, но в коде сайтов, которые вам предстоит поддерживать, делать навороченные конструкции лучше не стоит.

И переменные и миксины должны создаваться для значений и кодов, которые планируется потом многократно использовать. Если переменная или миксин используются в коде ровно один раз, они, скорее всего, не нужны.

1. Миксины #

   В миксины удобно класть простой и часто повторяющийся код. Например, clearfix или сброс стилей списков.

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

2. Переменные #

   Переменные удобно использовать для часто повторяющихся значений, например, для цветов. В отличие от HEX-значения цвета, название переменной можно вписать по памяти. Что проще запомнить и написать: #ffd700 или $gold?

   Возможность удобно назвать неудобную кракозябру — одна из сильных сторон препроцессоров, только для переменных нужно выбирать удобные и запоминаемые имена.

3. Медиавыражения #

   Препроцессоры позволяют вкладывать медиавыражения в блок стилей, что позволяет удобнее организовывать код. Например, так:

   • Плохо

     $bp-tablet: 660px;
     $bp-desktop: 960px;
     
     .header {
       padding: 20px;
       font-size: 20px;
     }
     .header A {
       text-transform: uppercase;
       color: crimson;
     }
     
     @media (min-width: $bp-tablet) {
       .header {
         padding: 30px;
       }
       .header A {
         color: orange;
       }
     }
     
     @media (min-width: $bp-desktop) {
       .header {
         padding: 40px;
       }
       .header A {
         color: gold;
       }
     }

   • Хорошо

     $bp-tablet: 660px;
     $bp-desktop: 960px;
     
     .header {
       padding: 20px;
       font-size: 20px;
     
       @media (min-width: $bp-tablet) {
         padding: 30px;
       }
     
       @media (min-width: $bp-desktop) {
         padding: 40px;
       }
     }
     
     .header A {
       text-transform: uppercase;
       color: crimson;
     
       @media (min-width: $bp-tablet) {
         color: orange;
       }
     
       @media (min-width: $bp-desktop) {
         color: gold;
       }
     }

   По примеру слева может быть не очень понятно в чём, собственно, проблема, потому что код короткий, но реальных проектах между элементом и медиавыражениями могут оказаться десятки строчек кода, и в этих условиях работать с кодом становится ощутимо неудобно.

   Если внутри медиавыражения окажется много кода, и оно перестанет помещаться в экран, придется всё время держать в голове с каким медиавыражением вы работаете в данный момент.

   Если же организовать код как в примере справа, все изменения стилей элемента будут лежать внутри самого элемента, и все точки изменений будут видны как на ладони. Это очень удобно.

   Правда, при таком подходе в скомпилированном слое получится много разрозненных медиавыражений для одних и тех же брикпойнтов, но эта проблема решается с помощью css-mqpacker — плагина для PostCSS.