Используйте не запрещающие, а разрешающие CSS-селекторы

Под «разрешающим» селектором я понимаю такой селектор, который выполняет какую-то задачу, а не отключает какое-то правило. Лучше это объяснить на примере.

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

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
<ul>

Вот обычный, запрещающий подход:

li {
  margin-bottom: 1em;
}

li:last-child {
  margin-bottom: 0;
}

Сначала мы задаем margin-bottom для всех элементов. Затем отключаем его для последнего элемента. Я называю это использованием запрещающих селекторов, поскольку селектор li:last-child запрещает применение правила для предыдущего селектора.

Но мы можем создать точно такое же поведение, используя разрешающие селекторы.

li:not(:last-child) {
  margin-bottom: 1em;
}

Селектор li:not(:last-child) включает margin-bottom для всех элементов, кроме последнего. Нет нужды что-то отключать. И, как по мне, такой код и читать легче, и поддерживать проще.

Еще один вариант разрешающего селектора для того же примера:

li + li {
  margin-top: 1em;
}

Здесь мы добавляем margin-top для всех элементов, перед которыми идут их сиблинги. То есть для всех элементов кроме самого первого, перед которым нет другого элемента того же уровня.

Разрешающие селекторы справляются с задачами лучше, к тому же при таком подходе вы пишете меньше кода. Вот демо:

See the Pen You want a single enabling selector, not the one that disables the rule of the previous one by Silvestar Bistrović (@CiTA) on CodePen.

Перевод статьи «You want enabling CSS selectors, not disabling ones».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]