Техники рефакторинга CSS

Дизайн — это не только то, как он выглядит и как ощущается. Дизайн — это то, как это работает.

— Стив Джобс, соучредитель компании Apple, Inc.

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

Готовы поднять свои навыки CSS на новый уровень? Давайте окунёмся в мир освоения техник рефакторинга CSS и раскроем весь потенциал ваших таблиц стилей!

Что такое рефакторинг CSS

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

Рефакторинг CSS помогает решить несколько проблем в веб-разработке и предлагает ряд преимуществ. Некоторые из этих преимуществ включают:

1. Удобство сопровождения кода: Рефакторинг CSS играет важную роль в создании сопровождаемого кода путём организации кодовой базы, облегчения навигации по коду, выявления и удаления ненужного кода.
2. Возможность повторного использования кода и модульность: С помощью CSS-рефакторинга мы можем легко применять согласованные стили в различных частях веб-сайта и повторно использовать определённые стили, если в будущем в наше приложение будут добавлены новые функции.
3. Улучшенная совместная работа: CSS с хорошим рефакторингом улучшает сотрудничество между разработчиками благодаря использованию этих соглашений, что облегчает совместную работу членов команды.
4. Оптимизация производительности: Это одно из основных преимуществ рефакторинга CSS; с помощью рефакторинга можно оптимизировать CSS для повышения производительности, что приводит к ускорению загрузки страниц, улучшению пользовательского опыта и повышению рейтинга в поисковых системах.
5. Масштабируемость и перспективность: Рефакторинг CSS помогает создать гибкую и адаптируемую кодовую базу. Рефакторинг CSS также облегчает добавление новых тенденций и технологий дизайна в будущем.

Принципы рефакторинга CSS

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

1. Принцип единой ответственности (SRP)
2. Принцип разделения ответственности
3. Принцип DRY (Не повторяйся)

Принцип единой ответственности (SRP)

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

В качестве примера возьмём этот код CSS:

  .container {
      width: 500px;
      height: 500px;
      background-color: #333;
      padding: 20px;
      margin: 0;
    }

Как было показано выше, этот селектор отвечает за установку свойств width, height, background-color, padding и margin элемента .container. Это слишком большая ответственность для одного селектора, что затрудняет сопровождение и повторное использование кода.

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

    .container {
      width: 500px;
      height: 500px;
    }
    .container__background {
      background-color: #333;
    }
    .container__padding {
      padding: 20px;
    }
    .container__margin {
      margin: 0;
    }

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

Очевидно, что есть случаи, когда добавление различных свойств к одному селектору — это нормально. Тем не менее, для чего-то вроде селектора контейнера, который, скорее всего, будет использоваться в нескольких элементах, принцип SPR — это то, что нужно.

Принцип разделения ответственности

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

Используя этот принцип, мы повышаем удобство работы с кодом, потому что нам не придётся искать стили, влияющие на код, так как мы будем точно знать, где их искать.

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

Принцип DRY (Не повторяйся)

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

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

Лучшие практики рефакторинга CSS:

То, что стоит делать, стоит делать хорошо. Давайте рассмотрим некоторые лучшие практики рефакторинга CSS.

Упорядочение таблиц стилей

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

Используйте согласованное соглашение об именовании

То, что стоит делать, стоит делать хорошо. Давайте рассмотрим некоторые лучшие практики рефакторинга CSS.

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

1. БЭМ (Блок Элемент Модификатор)
2. SMACSS (Масштабируемая и модульная архитектура для CSS)
3. OOCSS (Объектно-ориентированный CSS)
4. Atomic CSS
5. SuitCSS

Приведённый выше список кажется странным, не так ли? Вас может шокировать тот факт, что вы, возможно, уже бессознательно использовали эти соглашения об именовании, вероятно, потому что они использовались в учебном курсе, который вы проходили, изучая код. Обычный пример названия селектора — btn, bg-dark, cta и is-hidden.

Соглашения об именовании очень полезны для облегчения совместной работы. Вы можете узнать больше о них здесь.

Снижение специфичности

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

<!DOCTYPE html>
<html>
  <style>
    div.container > ul.menu li:nth-child(3) a {
      color: green;
      font-weight: bold;
    }
  </style>

  <body>
    <div class="container">
      <ul class="menu">
        <li><a href="#">Home</a></li>

        <li><a href="#">About</a></li>

        <li><a href="#" class="highlight">Contact</a></li>
      </ul>
    </div>
  </body>
</html>

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

Вот как выглядит обновлённый стиль.

  <style>
    .container .menu li .highlight {
      color: green;
      font-weight: bold;
    }
  </style>

Оба стиля имеют одну и ту же функцию: сделать тег a с содержимым (контакт) последнего элемента списка жирным и зелёного цвета. Но второй способ — это как раз то, что нужно.

Удаление избыточного кода

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

Техники рефакторинга CSS

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

Извлечение повторно используемых CSS-шаблонов

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

Чтобы проиллюстрировать, как это работает, рассмотрим следующий код:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <style>
    .btn {
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 5px;
    }

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

    .button-secondary {
      background-color: #eee;
      color: #333;
      border: 1px solid #ccc;
    }
  </style>
  <body>
    <button class="btn button-primary">Click me</button>
    <button class="btn button-secondary">Cancel</button>
  </body>
</html>

Приведённый выше код является простым примером многоразовых шаблонов кода CSS. У нас есть многократно используемый класс btn, который мы использовали во всех наших элементах кнопок. Класс содержит стили, которые должны присутствовать во всех наших кнопках; вместо того чтобы повторять стиль в каждой создаваемой кнопке, мы просто используем технику многоразового CSS-кода.

Как видите, две кнопки, имеющие класс btn, обладают стилем, назначенным классу (padding, font-size и border-radius), а также имеют свой собственный заданный стиль, который был назначен классами button-primary и button-secondary соответственно.

Эффективное использование CSS-переменных

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

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

Вот пример:

:root {
      --primary-color: #adc2ef;
      --body-color: #eeaaaa;
      --body-font: monospace;
    }

С помощью приведённого выше стиля вы можете использовать их повторно, просто ссылаясь на их пользовательское имя, вот так.

<html>
  <head> </head>
  <style>
    :root {
      --primary-color: #adc2ef;
      --body-color: #eeaaaa;
      --body-font: monospace;
    }
    button {
      background-color: var(--primary-color);
    }
    p {
      font-family: var(--body-font);
      color: var(--body-color);
      font-size: 20px;
    }
  </style>
  <body>
    <p>Click this button</p>
    <button>Cancel</button>
  </body>
</html>

Как видно из кода, мы использовали нашу переменную в качестве значений различных свойств (background-color, font-family, color) в нашем коде.

CSS-переменные очень распространены в современном мире; обычно они используются для задания таких вещей, как значения первичного и дополнительного цвета, хранения различных font-family, используемых в коде, и так далее. Таким образом, вы можете рефакторить свой код, поэтому если хотите изменить основной цвет сайта, вам не нужно просматривать все места, где использовался этот цвет. Вы можете просто изменить его в корневом компоненте, и он изменится в любой части нашей кодовой базы CSS, где мы использовали переменную.

Инструменты и ресурсы для рефакторинга

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

Инструменты для линтинга и форматирования CSS

Эти инструменты используются для поиска и устранения проблем в коде и поддержания единого стиля кода во всех проектах. Они анализируют код на основе определённых правил и конфигураций, задаваемых нами, а затем проводят рефакторинг. Популярным примером такого инструмента является Prettier, используемый большинством разработчиков для автоматического форматирования кода. Другой популярный пример — Stylelint и CSSLint.

Инструменты минификации и сжатия CSS

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

• UglifyCSS: Этот инструмент используется для минификации кода CSS; он оптимизирует код для уменьшения его размера, сохраняя при этом все его функциональные возможности. Другим инструментом минификации кода является CSSNano, выполняющий ту же функцию.
• Онлайн-компрессоры: Мы используем онлайн-инструменты для минификации кода, такие как CSS Minifier](https://www.toptal.com/developers/cssminifier), без дополнительных установок. В основном они предназначены для одноразового использования.

Использование инструментов DevTools браузера для отладки и профилирования CSS

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

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

Знакомство с популярными CSS-фреймворками и библиотеками для рефакторинга

Не всем нравятся фреймворки; я предпочитаю обычный ванильный CSS, но, говоря о рефакторинге, мы должны отдать должное CSS-фреймворкам.

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

Существует множество CSS-фреймворков, помогающих упростить процесс рефакторинга, но наиболее популярными являются Bootstrap, Tailwind CSS, Material UI и Semantic UI.

Стратегии крупномасштабного рефакторинга CSS

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

Планирование и приоритизация усилий по рефакторингу:

Первый шаг в реализации масштабного проекта по рефакторингу CSS — это планирование.

Вот несколько советов, которые необходимо сделать, пока вы находитесь на этапе планирования процесса рефакторинга:

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

Организация рабочего процесса рефакторинга:

Следующим шагом к оптимизации масштабного рефакторинга CSS является создание чётко определённого рабочего процесса. Вот как это можно сделать:

• Контроль версий: Этот замечательный инструмент позволяет отслеживать изменения, возвращать их при необходимости и эффективно сотрудничать с другими членами команды. Этого можно достичь, используя различные платформы, такие как Github, GitLab, Bitbucket и т.д.
• Стратегия ветвления: Эта стратегия изолирует разработку задач рефакторинга, не затрагивая основную кодовую базу. После завершения и тестирования используйте ветви для каждой задачи рефакторинга и объединяйте их обратно в основную ветвь. Это можно сделать с помощью нашего программного обеспечения для контроля версий.
• Документация: при выполнении масштабного процесса рефакторинга документирование процесса помогает вести учёт и служит справочником для будущего сопровождения.

Стратегии тестирования и регрессии во время рефакторинга:

Рефакторинг CSS в больших масштабах может привести к непредвиденным проблемам и регрессиям. Вот некоторые стратегии для предотвращения этого:

• Автоматизированные инструменты тестирования: В больших кодовых базах очень важно использовать автоматизированные инструменты тестирования CSS, анализирующие кодовую базу на предмет потенциальных проблем. Такие инструменты, как CSSLint и StyleLint, уже обсуждались в разделе "Инструменты и ресурсы", используются для автоматизированного тестирования.
• Единичные тесты: Они предназначены для проверки того, что каждая отдельная единица нашего CSS-кода ведёт себя так, как должна. Это способ проверить, что исправленный код ведёт себя так, как ожидается.
• Приёмное тестирование пользователей: Этот процесс тестирования включает в себя проведение пользователями или другими членами команды приёмочных испытаний обновлённого CSS. Это позволяет получить ценную информацию о любых проблемах, связанных с удобством использования, доступностью и функциональностью.

Заключение

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

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

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

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