Приемы, помогающие упростить CSS

Поддержка CSS может стать настоящей болью при развитии проекта. На моем опыте я выделил для себя несколько приемов, которые помогали мне держать под контролем сложность CSS и не стать хейтером. Надеюсь, они будут полезны и вам.

Mobile First без переопределений

Достаточно давно существует классный подход Mobile First, который диктует нам разрабатывать интерфейсы от простых экранов (такие как часы, смартфоны, итд) до более сложных (десктопы, телевизоры, итп).

Многие разработчики при его реализации используют медиа-запросы на основе min-width. Как результат они получают большое количество переопределений. Для примера я добавил padding к элементу с переопределением.

Я думаю, что на проектах, где CSS состоит из множество блоком на одном HTML-элементе, это приводит к тому, что в devTools вы увидите множество перечеркнутых свойств. В моем примере 2 переопределения.

Я стараюсь избегать таких ситуаций, поэтому использую подход, согласно которому я сохраняю идею mobile first, но также использую диапазоны экранов с помощью min-width и max-width. Они помогают добавлять CSS по мере необходимости.

Например, я переписал код с добавлением padding без переопределений.

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

.example {
  padding: 1rem 1.5rem;
}

@media (min-width: 481px) {
  .example {
    padding: 2rem 2.5rem;
  }
}

@media (min-width: 961px) {
  .example {
    padding: 3rem 3.5rem;
  }
}

Можно сделать так

@media (max-width: 480px) {
  .example {
    padding: 1rem 1.5rem;
  }
}

@media (min-width: 481px) and (max-width: 960px) {
  .example {
    padding: 2rem 2.5rem;
  }
}

@media (min-width: 961px) {
  .example {
    padding: 3rem 3.5rem;
  }
}

Использование краткого синтаксиса по мере необходимости

Обычно разработчики не парятся и используют краткий синтаксис везде. Да, на первый взгляд это работает, но если задуматься, с помощью краткого синтаксиса мы устанавливаем значения для группы свойств. Например, background задает значение для 10 свойств сразу!

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

Например, вместо background лучше использовать background-color , если требуется поменять только цвет фона.

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

.example {
  background: tomato;
}

Можно сделать так

.example {
  background-color: tomato;
}

margin и padding без 0 значений

Нам постоянно приходится использовать margin и padding, и часто я вижу, что разработчики добавляют 0 в качестве значения, которого нет. Например, если нужно задать padding с верху, снизу и слева, то они напишут padding: 1rem 0 1rem 1rem .

В будущем, когда потребуется добавить padding справа, то нужно будет переопределить 0. И так каждый раз до бесконечности. В результате мы получаем кучу зачеркиваний в devTools, которые мешают отлаживать код.

Я лично предпочитаю задавать margin и padding с помощью полного синтаксиса только там, где они требуются. Например, для предыдущего примера я буду использовать padding-top, padding-bottom и padding-left.

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

.example {
  padding: 1rem 0 1rem 1rem;
}

Можно сделать так

.example {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
}

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