CSS не обязательно должна вызывать выпадение волос

Фон

Каскадные таблицы стилей (CSS) - это мощный инструмент, используемый для стилизации веб-страниц.

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

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

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

На личном уровне CSS вызвал у меня выпадение волос. Я избавлю вас от той участи, которая постигла меня. Просто прочитайте это! 😝

Используйте препроцессор CSS

Препроцессоры CSS, такие как Sass, Less и Stylus, - это инструменты, которые помогают вам писать более удобный и масштабируемый код CSS.

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

Миксины позволяют группировать CSS-декларации и повторно использовать их в разных частях кода.

Функции помогают выполнять вычисления и манипулировать значениями. Вложенность позволяет писать более конкретные и легко читаемые правила CSS.

Сделайте следующее ✅

$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: #fff;
}

Этот код определяет переменную $primary-color со значением #007bff. Класс .button использует эту переменную для установки цвета фона.

Не делайте этого ❌

.button {
  background-color: #007bff;
  color: #fff;
}

Этот код устанавливает цвет фона напрямую, без использования переменной.

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

Используйте методологию CSS

Методология CSS - это набор рекомендаций и соглашений, которые помогают структурировать и упорядочить код CSS.

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

Существует несколько методик CSS, включая BEM (Block-Element-Modifier), SMACSS (Scalable and Modular Architecture for CSS), OOCSS (Object-Oriented CSS) и другие.

BEM - это популярная методология, которая обеспечивает соглашение об именовании классов CSS. В соглашении об именовании BEM используется двойное подчеркивание (__) для разделения блока и элемента и двойной дефис (--) для разделения блока или элемента и модификатора.

Сделайте следующее ✅

<div class="button button--primary">
  Click Me
</div>

В этом коде класс button представляет блок, а класс button--primary представляет модификатор, изменяющий стиль блока.

Не делайте этого ❌

<div class="primary-button">
  Click Me
</div>

В этом коде класс primary-button не следует методологии CSS и не предоставляет никакой информации о назначении или структуре элемента.

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

Используйте сброс или нормализацию CSS

Различные веб-браузеры имеют разные стили по умолчанию для элементов HTML.

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

Нормализация - это набор правил CSS, которые нормализуют стили в разных браузерах.

Сделайте следующее ✅

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />

Используя сброс или нормализацию CSS, вы можете избежать несоответствия внешнего вида вашей веб-страницы в разных браузерах.

Не делайте этого ❌

body {
  margin: 0;
  padding

Резюме 👏

В этом сегменте мы рассмотрели эти три лучшие практики CSS, которые помогут вам писать более качественный CSS-код, включая:

1. Используйте препроцессор CSS
2. Использовать методологию CSS
3. Использовать сброс или нормализацию CSS

Вот несколько дополнительных советов:

1. Используйте осмысленные и описательные имена классов
2. Используйте сокращенные свойства и значения
3. Избегайте использования !important
4. Используйте flexbox или grid для макетов
5. Минимизируйте использование глобальных селекторов
6. Избегайте использования слишком большого количества вложенных селекторов
7. Сохраняйте код CSS организованным и удобным для обслуживания

Следуя этим лучшим практикам CSS, вы сможете написать код CSS, который будет более удобным в обслуживании, масштабируемым и производительным.