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

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

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

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

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

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









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

.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 доступен по ссылке.

Автор

MIIIG

Занимаюсь разработкой сайтов, знаю php, js, html, css, gulp, bash, увлекаюсь разработкой на микроконтроллерах(esp, arduino), перевожу статьи, также увлечен графическим дизайном, типографией, знаю также немного арабский, люблю минимализм, простоту и material design