CSS совет: Используйте :not, чтобы сэкономить свое время

Недавно увидел твит Матта Гриффана, который гласит:

Наконец-то сделал свою жизнь проще, используя :not(:last-of-type), вместо того, чтобы переопределять свойства отдельным правилом :last-of-type. О да!

Взрыв. Разума.

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

• Post TitleThurs, Feb 16, 2017

Вот как глупо я стилизовал это. Говорю же: глупо!

.post {
  border-bottom: 1px solid #eee;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  &:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

Куча кода только для того, чтобы добавить пространства после каждой статьи, кроме последней. Вот для чего был создал :not!

.post:not(:last-of-type) {
  border-bottom: 1px solid #eee;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
}

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

Надеюсь этот совет будет для вас полезным.

Статью перевел aziev. Оригинал на Theboldreport.net доступен по ссылке.