8 SCSS-практик, которые стоит иметь в виду

От /

Перевод статьи «8 SCSS Best Practices to Keep in Mind».

Photo by Campaign Creators on Unsplash

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

Вот 8 лучших подходов к написанию SCSS из гайдлайна, которые заставили меня переосмыслить то, как я структурирую свой CSS-код.

Примечание. Советы касаются SCSS, так что некоторые из них могут быть неприменимы к CSS.

1. Mobile First

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

Вот так не надо:

.bad {
  // Desktop code

  @media (max-width: 768px) {
    // Mobile code
  }
}

Делайте так:

.good {
  // Mobile code

  @media (min-width: 768px) {
    // Desktop code
  }
}

2. Назначайте переменные

Определение CSS-переменных и примесей должно быть частью начальной настройки. Благодаря этому проект будет более поддерживаемым.

Как написано в нашем гайдлайне, есть некоторые часто применяемые свойства, которые выигрывают от применения переменных:

  • border-radius
  • color
  • font-family
  • font-weight
  • margin (gutters, grid gutters)
  • transition (duration, easing) – подумайте о примеси.

3. Избегайте #id и !important

И !important, и #id считаются излишне специфичными. Они могут смешать порядок CSS-рендеринга, особенно при работе в команде.

Вот так не надо:

#bad {
  #worse {
     background-color: #000;
  }
}

Делайте так:

.good {
  .better {
     background-color: rgb(0, 0, 0);
  }
}

4. Избегайте магических чисел

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

Если вам интересно, на CSS Tricks есть понятное объяснение, почему магические числа это зло.

Вот так не надо:

.bad {
  left: 20px;
}

Делайте так:

.good {
  // 20px because of font height
  left: ($GUTTER - 20px - ($NAV_HEIGHT / 2));
}

5. Описательные имена

Определить CSS-селекторы в соответствии с тем, какой вид они обеспечивают, — проще всего. Но лучше описывать иерархию.

Вот так не надо:

.huge-font {
  font-family: 'Impact', sans-serif;
}

.blue {
  color: $COLOR_BLUE;
}

Делайте так:

.brand__title {
  font-family: 'Impact', serif;
}

.u-highlight {
  color: $COLOR_BLUE;
}

6. Нулевые значения и единицы измерения

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

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

Вот так не надо:

.not-so-good {
  animation-delay: 0;
  margin: 0px;
  opacity: .4567;
}

Делайте так:

.better {
  animation-delay: 0s;
  margin: 0;
  opacity: 0.4;
}

7. Комментирование в строке

Лучше всего оставлять комментарий над свойством, к которому он относится. Также стоит использовать строчные комментарии (//), а не блочные (/* */). Последние сложнее раскомментировать.

Вот так не надо:

.bad {
  background-color: red; // Not commenting on top of property
  /* padding-top: 30px;
  width: 100% */
}

Делайте так:

.good {
  // Commenting on top of property
  background-color: red;
  // padding-top: 30px;
  // width: 100%;
}

8. Вложенные медиа-запросы

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

Вот так не надо:

.bad {

  &__area {
    // Code

    @media (min-width: 568px) {
      // Code
    }
  }

  &__section {
    // Code

    @media (min-width: 568px) {
      // Code
    }
  }
}

Делайте так:

.good {

  &__area {
    // Code
  }

  &__section {
    // Code
  }

  @media (min-width: 568px) {
    &__area {
      // Code
    }

    &__section {
      // Code
    }
  }
}

Это, безусловно, не исчерпывающий список лучших практик, но подобные вещи важны для создания читаемых и масштабируемых веб-приложений.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Прокрутить вверх