Бытует мнение, что CSS сложный. Существует много костылей, магии. Легко выстрелить себе в колено. Меня это печалит, потому что я так не считаю. Немного подумав, что можно сделать, я собрал 5 привычек разработчиков, которые мне не нравятся, и показал, как их избежать.

Устанавливать отступы, а потом сбрасывать их

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

Используйте один из следующих вариантов: nth-child/nth-of-type селекторы, псевдо-класс :not(), или комбинатор следующего соседнего элемента, более известный как +, и ваш CSS будет более простым и кратким.

Не делайте так

.item {
  margin-right: 1rem;
}

.item:last-child {
  margin-right: 0;
}

Вы можете использовать

.item:not(:last-child) {
  margin-right: 1rem;
}
/*или*/
.item:nth-child(n+2) {
  margin-left: 1rem;
}
/*или*/
.item + .item {
  margin-left: 1rem;
}

Добавлять display: block для элементов с position: absolute или position: fixed

А знаете ли вы, что вам не нужно добавлять display: block для элементов c position: absolute или position: fixed, потому что это происходит по умолчанию?

Кроме того, если вы будете использовать inline-* значения, то они будут изменены следующим образом: inline или inline-block изменятся на block, inline-flex -> flex, inline-grid -> grid, и inline-table -> table.

Поэтому просто пишите position: absolute или position: fixed, и добавляйте display, только тогда, когда вам нужны значения flex или grid.

Не делайте так

.button::before {
  content: "";
  display: block;
  position: absolute;
}
/*или*/
.button::before {
  content: "";
  display: block;
  position: fixed;
}

Вы можете использовать

.button::before {
  content: "";
  position: absolute;
}
/*или*/
.button::before {
  content: "";
  position: fixed;
}

Использовать transform: translate(-50%, -50%) для центрирования

Cуществует популярная задача, которая попила немало крови. Особенно до 2015 года, когда все ее решения приводили к каким-то проблемам. Я говорю о центрировании элемента с произвольной высотой по двум осям.

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

Но после появления flexbox этот прием, по моему мнению, не актуален. Мало того, что проблема размытия текста еще не решена, так еще нужно использовать 5 свойств. Поэтому я хочу поделиться приемом, который сократит код до 2 свойств.

Мы можем использовать margin: auto внутри flex-контейнера, и браузер расположит элемент по центру. Просто 2 свойства и все.

Не делайте так

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Вы можете использовать

.parent {
  display: flex;
}

.child {
  margin: auto;
}

Можно использовать justify-content и align-items для этой задачи, но я не люблю этот прием, потому что существуют проблемы, к которым он приводит. О них я расскажу в отдельной статье.

Использовать width: 100% для блочных элементов

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

И чтобы преобразовать сетку в одну колонку разработчики использую width: 100%. Я не понимаю, зачем они это делают. Ведь элементы сетки являются блочными элементами, которые делают это по умолчанию без дополнительных свойств.

Соответственно нам не нужно использовать width: 100%, а следует написать медиа-запрос так, чтобы flexbox использовался только для создания многоколоночной сетки.

Не делайте так

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100%;
}

@media (min-width: 1024px) {

  .child {
    width: 25%;
  }
}

Вы можете использовать

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

@media (min-width: 1024px) {

  .parent {
    display: flex;
    flex-wrap: wrap;
  }

  .child {
    width: 25%;
  }
}

Если вы знаете, почему нужно добавлять width:100% и мой способ не решает проблему, то напишите об этом в комментариях. Возможно, я что-то не учел. Спасибо

Задавать display: block для flex-элементов

При использовании flexbox важно помнить, что при создании flex-контейнера (добавляем display: flex), все дочерние элементы (flex-элементы) становятся blockified.

Это означает, что у элементов устанавливается свойство display, и у него могут быть только блочные значения. Соответственно, если установить inline или inline-block, то оно изменится на block, inline-flex -> flex, inline-grid -> grid и inline-table -> table.

Поэтому не добавляйте display: block к flex-элементам. Браузер сделает это сам.

Не делайте так

.parent {
  display: flex;
}

.child {
  display: block;
}

Вы можете использовать

.parent {
  display: flex;
}

Заключение

Надеюсь мне удалось показать, как можно избежать простых ошибок, и вы воспользуйтесь моими советами. Если нет, то это будет на вашей совести!

P.S: Если у вас есть вопросы по CSS/HTML, то, не стесняйтесь, пишите мне на мою почту. Она указана в моем профиле на Хабре.