Рекомендации по CSS, которые вы должны знать

Каскадные таблицы стилей (CSS) являются основой веб-дизайна, и каждый разработчик интерфейсов должен ознакомиться с ними. Понимание того, как эффективно использовать их возможности, имеет решающее значение для создания красивых, отзывчивых и удобных в обслуживании веб-приложений.

В этом руководстве мы рассмотрим некоторые рекомендации по использованию CSS, которые следует учитывать при создании приложений!

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

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

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

2. Организация кода

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

• Используйте значимые имена классов и идентификаторов: выберите описательные имена классов и идентификаторов, которые отражают содержание или назначение элемента. Например, определения классов в li navbar-link admin-link четко отражают, что это ссылка на панели навигации и что эту ссылку в пользовательском интерфейсе могут видеть только пользователи с правами администратора.
• Используйте согласованные соглашения об именовании: придерживайтесь соглашения об именовании для ваших классов CSS и определений идентификаторов. Это позволит командам разработчиков поддерживать согласованность и улучшать разборчивость в своих проектах. BEM, OOCSS и SMACSS являются популярными и хорошо документированными соглашениями об именовании. Кроме того, вы всегда можете использовать индивидуальное соглашение об именовании, соответствующее вашим потребностям, при условии, что вы его придерживаетесь.

3. Оптимизируйте свои определения селекторов

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

В общем, вы хотите избежать использования слишком специфичных селекторов, которые слишком тесно связаны со структурой HTML. Это может затруднить поддержку вашего CSS. Например:

div#container > ul.navigation li.active a.btn-primary span.icon {
  /* CSS правила */
}

Хотя этот селектор может работать для конкретного элемента, который вы имеете в виду, он слишком специфичен. Если в структуру HTML будут внесены какие-либо изменения, такие как добавление новых элементов или изменение их порядка, этот селектор, скорее всего, сломается. Вместо этого отдавайте предпочтение более гибким селекторам, например:

.nav-link {
  /* CSS правила для ссылок навигации */
}

В этом примере мы используем селектор на основе классов, который нацелен на все навигационные ссылки. Он более удобен в обслуживании и менее подвержен поломкам при изменении структуры HTML.

4. Разберитесь в правилах специфики CSS

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

Понимание специфики CSS позволяет нам оптимизировать селекторы и определения наиболее сжатым и понятным способом. Рассмотрим следующий пример:

.container p {
  color: blue;
}

.text {
  color: red;
}

В первом правиле, .container p, цвет текста устанавливается синим, а во втором правиле .text красным.

Правило .container p имеет значение 0-1-1-0 (один селектор класса и один селектор типа). А правило .text имеет значение 0-0-1-0 (один селектор класса).

Правило с более высокой специфичностью, которым является .container p, имеет приоритет. Поэтому текст внутри элемента p будет синим.

5. Избегайте использования свойства !important

В дополнение к двум последним рекомендациям, приведенным выше, рекомендуется использовать свойство !important. С его помощью вы можете переопределить все предыдущие правила оформления для этого конкретного свойства. Например:

.myParagraph {
  color: gray;
}

p {
  color: red !important;
}

В этом случае тег p будет иметь красный цвет.

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

Свойство !important обладает высокой степенью деструктивности в том смысле, что оно переопределяет все предыдущие стили для определенного свойства. По мере роста сложности и размера проекта его становится все труднее поддерживать. Такое деструктивное определение, как это, может быть легко пропущено и его трудно обнаружить при отладке, в дополнение к потенциальным побочным эффектам в определениях стилей. Будьте осторожны при его использовании!

6. Сведите к минимуму вложенность

Не следует слишком сильно привязывать ваши CSS-селекторы к одному родительскому элементу или к отношению родитель - потомок. Возьмем следующий пример:

.wrapper {
  // wrapper styles here
  .container {
    // container стиль здесь
    .card {
      // card styles стиль здесь
      .content {
        // content styles стиль здесь
        .paragraph {
          // paragraph styles here
          .paragraph-inner-text {
            // paragraph-inner-text стиль здесь
          }
        }
      }
    }
  }
}

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

Ограничьте вложенность до разумного уровня. Старайтесь избегать вложенности селекторов глубиной более 3 уровней.

7. Разбейте на модули свой CSS код

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

К примеру:

/* Модуль кнопок */
.button {
  /* Стили кнопок */
}

/* Модуль навигации */
.navbar {
  /* Стили навигации */
}

/* Модуль карточки */
.card {
  /* Стиль карточки */
}

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

В более крупных и надежных архитектурах будет еще эффективнее разделить ваш CSS на отдельные файлы и каталоги. Популярным шаблоном для рассмотрения является паттерн 7-1, который основан на Sass.

8. Адаптивный дизайн

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

9. Тестирование в разных браузерах

Убедитесь, что ваши стили работают согласованно в разных браузерах, путем тестирования и устранения проблем совместимости. В качестве ориентира вы можете использовать сайт Can I Use, чтобы проверить, совместимо ли определение CSS во всех или, по крайней мере, в большинстве браузеров.

10. Документация

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

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

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

Например:

# Документация CSS

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

## Структура

Наш CSS состоит из следующих элементов:

1. **Components**: Стили, относящиеся к повторно используемым компонентам, таким как формы и кнопки.
2. **Layouts**: Стили для макетов главной страницы и элементов, связанных с макетами, таких как контейнеры, сетки, верхние и нижние колонтитулы.

## Соглашения о наименовании

Мы следуем соглашению об именовании BEM (модификатор блочного элемента) для наших классов. Например:
- `.block` для компонентов уровня блок.
- `.block__element` для элементов внутри блока.
- `.block--modifier` для модификаторов, изменяющих внешний вид блока.

## Рекомендации по техническому обслуживанию

- Избегайте чрезмерной вложенности, чтобы наши стили были удобны в обслуживании. Рассмотрите глубину не более 3 уровней.