Как сделать рефакторинг CSS - Руководство

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

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

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

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

1. Провести первоначальный аудит

Чтобы лучше понять, что нам нужно для рефакторинга, лучше всего начать с комплексного аудита, чтобы увидеть, что у нас есть в настоящее время.

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

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

Также важно тщательно проверять код во время первоначального аудита, так как многие проблемы на архитектурном уровне могут быть обнаружены только таким способом..

2. Установите управляемый план

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

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

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

3. Отслеживание прогресса

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

4. Придерживайтесь Руководства по стилю кодирования

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

Важные вещи, чтобы принять решение:

• соглашения об именах
• правила форматирования
• порядок декларирования
• единицы и значения, которые мы хотим использовать
• правила комментирования

Если мы не хотим создавать собственное руководство по стилю кодирования, мы также можем использовать чужие, такие как ThinkUp, которые можно найти на Github..

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

5. Установите согласованную файловую структуру

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

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

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

6. Избавьтесь от неиспользованных и дублирующих правил

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

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

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

Наряду с устаревшими правилами, дублирующие правила также приводят к избыточному раздуванию кода и снижению производительности. Мы можем удалить их с помощью модуля CSS Purge Node.js, но мы также можем работать с CSS линтеры для поиска дублирующих правил в наших файлах CSS.

7. Уменьшить Специфичность

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

Самая низкая специфичность (0001) принадлежит селекторам, которые нацелены только на один общий элемент HTML, такой как

или же

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

Определенные селекторы, такие как Я бы или селекторы, поступающие из встроенных стилей, имеют более высокие приоритеты, потому что они переопределяют стили, принадлежащие более общим селекторам. Например, специфика # id1 селектор 0100.

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

3 основных типа селекторов высокой специфичности:

1. Квалифицированные селекторы, такие как p.class1 (определяя п тег здесь не нужен, так как он делает невозможным использование того же класса с другими элементами HTML)
2. Глубоко вложенные селекторы, такие как .class1 .class2 .class3 .class4…
3. идентификаторы, такие как # id1

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

8. отсеять !важный правила

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

Когда нам нужно быстро написать CSS, мы можем начать полагаться на них, хотя из-за их простоты.

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

9. Уберите Волшебные Числа и Закодированные Значения

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

 .class1 позиция: абсолютная; верх: 28 пикселей; слева: 15,5%; 

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

То же правило применяется для жестко закодированные значения также. Вероятно, наиболее часто встречающиеся жестко закодированные значения можно найти в правилах высоты строки:

 / * плохо, нам нужно добавить дополнительные правила фиксированной высоты строки к дочерним элементам .class1 * / .class1 font-size: 20px; высота строки: 24px;  / * хорошо, гибкое правило высоты строки может безопасно использоваться и дочерними элементами * / .class1 font-size: 20px; высота линии: 1,2; 

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

10. Рефакторинг Единицы и Значения

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

Если мы использовали их непоследовательно в прошлом, нам нужно преобразовать их, чтобы они могли составить краткую систему

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