Дополнительные рекомендации

Комментарии

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

/* Используется clearfix, чтобы контейнер корректно обтекал дочерние элементы */

.container::after {
  content: '';
  display: table;
  clear: both;
}

Не комментируйте очевидные вещи.

/* Плохо */

/*Установка цвета фона*/
.background {
  background-color: #fff;
}

/* Хорошо */
.background {
  background-color: #fff;
}

Избегайте !important

Избегайте использования !important для переопределения стилей. Используйте его только в самом крайнем случае.

Избегайте большие вложенности

Избегайте вложенности селекторов более чем на 3 уровня.

Избегайте использования селекторов с высокой специфичностью.

Хорошо

.navigation-link {
  /* ... */
}

Плохо

body header#main-header .navigation ul li a {
  /* ... */
}

Расположение медиа запросов

Размещайте медиа-запросы в конце файла стилей для лучшей организации кода (не внутри блока стилей).

Как стоит размещать медиа запросы

/* Styles for the block */
.block {
  display: flex;
  margin: 10px;

  /* Styles for the block element */
  &Element {
    flex: 1;
  }
}

@media screen and (min-width: 768px) {
  /* Styles for screens with a width of 768px and above */
  .block {
    margin: 0;

    &Element {
      flex: 0;
    }
  }
}

@media screen and (min-width: 1200px) {
  /* Styles for screens with a width of 1200px and above */
  .block {
    display: none;
  }
}

Как не стоит размещать медиа запросы

/* Styles for the block */
.block {
  display: flex;
  margin: 10px;

  /* Media queries for the block */
  @media screen and (min-width: 768px) {
    /* Styles for screens with a width of 768px and above */
  }

  /* Styles for the block element */
  &Element {
    flex: 1;

    /* Media queries for the blockElement */
    @media screen and (min-width: 768px) {
      /* Styles for screens with a width of 768px and above */
    }

    @media screen and (min-width: 1200px) {
      /* Styles for screens with a width of 1200px and above */
    }
  }
}