/ DEV

Советы новичкам по написанию CSS

Даже если вы разрабатываете веб-страницы уже какое-то время, вы не застрахованы от ряда плохих практик написания CSS, от которых лучше избавиться.

  • Используйте сброс стандартных стилей браузера или нормализацию, которая приводит стандартные стили к общему для всех браузеров знаменателю. Обычно, в своих проектах я использую Normalize.css

  • Присваивайте ID только одному элементу в HTML. Для нескольких элементов используйте атрибут класса. Проще говоря ID должен быть уникальным.

<!-- вместо -->
<p id="wow">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p id="wow">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<!-- используйте -->
<p class="wow">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="wow">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  • Старайтесь стилизовать элементы максимально автономно, сокращайте цепочку каскада до одного блока, чтобы было меньше зависимостей от родительских элементов. Это необходимо для максимально эффективного повторного использования блоков на странице и их модификации в других местах верстки. Используя селекторы помните, что чем длиннее он будет, тем выше его специфичность.

  • Не стоит задавать отдельные классы каждому тегу в блоке, если не предполагается его автономное использование. В этом вам поможет использование какой-либо методологии именования классов.

  • Комбинируйте элементы. Многие используют одно и то же правило для каждого элемента. Если у вас есть необходимость создать одинаковое правило для нескольких элементов — поместите его в отдельный класс.

h1, h2, h3 {
  color: #3eb0ef;
}
  • Старайтесь называть классы тегов в зависимости от того, какую функцию выполняет блок, а не от того, какое в нем будет содержание.

  • Используйте правило !important только тогда, когда вы переписывает код сторонних библиотек или инлайновые стили.

  • Используйте краткие записи свойств. Шорткаты позволяют одновременно установить значения для несколько свойств CSS и увеличивают читабельность.

/* вместо */
.wow {
  margin-top: 1rem;
  margin-right: 2rem;
  margin-bottom: 1rem;
  margint-left: 2rem;
}
/* используйте */
.wow {
  margin: 1rem 2rem;
}
  • Считается хорошей привычкой держать ваши CSS и HTML отдельно друг от друга. Добавление встроенных стилей усложнит вам жизнь при изменении дизайна сайта, а так же затруднит поддержку вашего кода. Помните, что встроенные стили находятся в самом низу каскада, они будут перекрывать все другие стили.

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

  • Настоятельно рекомендуется добавлять вендорные префиксы для нестандартных CSS свойств. Для автоматической расстановки префиксов можно использовать специальные плагины или сервисы.

.wow {
  -webkit-transition: all 6s ease;
  -moz-transition: all 6s ease;
  -ms-transition: all 6s ease;
  -o-transition: all 6s ease;
  transition: all 6s ease;
}
  • Используйте инструменты для уменьшение размера файла с использованием инструментов для минификации CSS. Эти инструменты удалят пробелы, переносы строк, а так же повторяющиеся стили.