sass

SASS: Вложенные селекторы: Начальное правило

В рамках подготовки презентации по SASS я натолкнулся на интересную публикцию на thesassway «Nested Selectors: The Inception Rule» (автор: Mario Ricalde), свой перевод которой опубликую у себя в блоге.

Хорошо известно, что SASS — эффективный инструмент, для генерации стилей CSS. Становится гораздо удобней работать с большими проектами, в три строчки мы можем сгенерировать десятки строк CSS стилей. Следовательно, с огромной властью над кодом к нам приходит и ответственность за него.

Проблема

Мы все помним то время, когда код находился только на «корневом уровне», а написание вложенных селектров означало написание большого количество повторяющегося кода.
Сегодня, мы углубимся в базовое правило вселенной SASS. Она называется «Начальное правило». Правило, которое сможет предотвратить большинство ошибок, которые сразу же делают новички и энтузиасты.

Для примера возьмем код:

.post {
  border-radius: 3px;
  background: #FFF8FF;
  border: 1px solid #EFC6F3;
  padding: 15px;
  color: #333333;
}
.post .title, .post .alt-title  {
  color: #000000;
  font-size:20px;
}
.post .alt-title {
  border-bottom:1px solid #EFC6F3;
}

Вполне вероятно, что когда то, вы сталкивались с определенными задачами, вам приходилось создавать множество классов и на скорую руку пихать их в ваш HTML. Доводилось ли вам создавать DOM элемент с 5 классами?

...

Это было ежедневной рутиной. Но появился SASS и код стал веселее. И так же как просто в SASS технологии разобраться и сразу же применять на живых проектах, так же просто и сделать всё абсолютно неправильно.

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

Давайте посмотрим на пример вложенности селектров в SASS

$border: 1px solid #EFC6F3;
.post {
  border-radius: 3px;
  background: #FFF8FF;
  border: 1px solid $border;
  padding: 15px;
  color: #333333;
  .title {
    color: #000000;
    font-size:20px;
  }
  .alt-title {
    @extend .title;
    border-bottom:1px solid $border;
  }
}

Компилирую такой код на выходе создается такой же код, как и код, который вам не нравилось писать в CSS из-за множества повторений.

Это результат SASS кода описанного выше:

.post {
  border-radius: 3px;
  background: #FFF8FF;
  border: 1px solid 1px solid #efc6f3;
  padding: 15px;
  color: #333333;
}
.post .title, .post .alt-title {
  color: #000000;
  font-size: 20px;
}
.post .alt-title {
  border-bottom: 1px solid 1px solid #efc6f3;
}

Но всё же, как ребенок с новой игрушкой, некто начинает использовать новую фичу, которая, как мы считали является наиболее потенциальная неправильно. И в результате мы получаем то, что можно назвать — CSS селекторский кошмар.

CSS селекторский кошмар.

Так званный кошмар случается с фронт-энд разработчиками когда стили тесно связанные с DOM до той степени, что изменив в структуре хоть что то заканчивается полным крахом фронт-энда.

Давайте посмотрим на этот неочень красивый кусок разметки HTML


  

  • ...

...

...

  • ...

Так как SASS предалагает Вам возможносить вложения селекторов, и вы знаете, что инкупсуляция — это «хороший способ избежать конфликтов стилей», то вы легко и без угрызения совести сымитируете DOM в вашем SASS (и это будет плохая идея).

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

body {
  div.container {
    div.content {
      div.articles {
        & > div.post {
          div.title {
            h1 {
              a {
              }
            }
          }
          div.content {
            p { ... }
            ul {
              li { ... }
            }
          }
          div.author {
            a.display {
              img { ... }
            }
            h4 {
              a { ... }
            }
            p {
              a { ... }
            }
            ul {
              li { ... }
            }
          }
        }
      }
    }
  }
}

«Всё хорошо», правда? Используя код приведенного выше, вы можете предсказать всё. Но посмотрите, какое чудовище вы создали:

body { ... }
body div.content div.container { ... }
body div.content div.container div.articles { ... }
body div.content div.container div.articles > div.post { ... }
body div.content div.container div.articles > div.post div.title { ... }
body div.content div.container div.articles > div.post div.title h1 { ... }
body div.content div.container div.articles > div.post div.title h1 a { ... }
body div.content div.container div.articles > div.post div.content { ... }
body div.content div.container div.articles > div.post div.content p { ... }
body div.content div.container div.articles > div.post div.content ul { ... }
body div.content div.container div.articles > div.post div.content ul li { ... }
body div.content div.container div.articles > div.post div.author { ... }
body div.content div.container div.articles > div.post div.author a.display { ... }
body div.content div.container div.articles > div.post div.author a.display img { ... }
body div.content div.container div.articles > div.post div.author h4 { ... }
body div.content div.container div.articles > div.post div.author h4 a { ... }
body div.content div.container div.articles > div.post div.author p { ... }
body div.content div.container div.articles > div.post div.author p a { ... }
body div.content div.container div.articles > div.post div.author ul { ... }
body div.content div.container div.articles > div.post div.author ul li { ... }

Существует так много причин, почему вы сделали всё в корне не верно, от скорости рендера, до размера файла. Только подумайте о том, как много байтов это добавит в ваш CSS. Конечно, кто то может сказать:

«Эй! Компьютеры сейчас на столько быстры! и скорость интернет загрузки, не так как когда то!» — это скажет пользователь, который ненавидит фронт-энд инжинерику.

Это не одна проблема! С тех пор, как ваши стили стали столь привязаны к DOM, возникает проблема поддержки этого кода. Любые изменения, которые вы будете производить в размтке нужно сопровождать аналогичными изменениями в SASS файле.

Поприветствуйте Начальное правило

Для того что бы предотвратить вас от этих кошмаров создали простое правило. До сих пор, это правило оставлось не написанным, но многие придерживались его.

«Не преодолевайте рубеж в 4 уровня вложенности».

Другими словами это значит, что Вы не должны создавать столь специфичный DOM объект. Если вы обнаружите уровень вложенности более 4-х — это красный флаг. Конечно, не исключенно, что будут случаться ситуации, когда иначе никак, но пусть это будет исключением из правил.

Держите в форме свой код

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

В контексте сайта

Иногда приходится работать с разметкой, не искушенной большим количеством класов, айдишников и других идентификаторов. В таких случаях приходится работать с тэгами общего назначения. В таком случае, наверняка вам прийдется работать лишь с одним уровнем вложенности. Примером тому может послужить стили по умолчанию для h1-h6, ul, p. Но и будут случаи, где нужно использовать по несколько селекторов, например в CSS reset.

В контексте страницы

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

Пример того, что имеется ввиду:

.cart {
  #sidebar { width: 150px; }
  #content { width: 850px; }
}

Объекты

Объекты — это самостоятельные элементы, или элементы со вложениями, которые идентификуются через class или id. Стили должны описываться в одном месте, но при необходимости видоизменяться из «контекста страницы».

Список элементов, который обычно стилизируются, как объекты

#sideabr
#content
#footer
.blog-post
.comment
.widget
.logo
.user
.button

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

ul.special-deal {
  ...
  li {...}
  a {...}
}

Обратите внимание, что объекты должны иметь вложенность максимум в 4 уровня. Старайтесь не выходить за границу 2-3 уровней, так как 4-й будет уровень состояния объекта.

Взаимодействие состояний

Состояния объекта при разного рода воздействия на него чаще будут описываться ближе к 4 уровню вложенности — такая глубокая вложенность для него будет весьма приемлимой.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *