Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта


Содержание материала:

Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта

Каждый из нас участвовал в больших web-проектах, в которых было задействовано много людей. В результате, проект содержал множество стилевых файлов. В таких случаях запросто может получиться ситуация, при которой часть селекторов и классов создавалась во время разработки и тестирования, но к основным задачам проекта отношения не имеет. И к окончанию проекта становится непонятно, какие стили нужны, а какие — нет. Что же делать в таком случае?

Решение

Существует несколько решений проблемы. Я опишу здесь наиболее популярные:

  • Dust-Me Selectors : Dust-Me Selectors — это расширение для FireFox (версии 1.5 и выше), которое определяет неиспользуемые селекторы CSS, которое работает по следующему принципу. Извлекаются все селекторы из всех стилевых файлов просматриваемой страницы, затем анализируется какие из них не используются. Затем данные сохраняются и при тестировании (просмотре) дочерних страниц дополняются.
  • CSS Redundancy Checker : Бесплатный он-лайн сервис. С его помощью вы можете найти все селекторы, которые не используются вашей страницей.
  • Unused CSS Cleaner : Этот инструмент поможет вам найти неиспользуемые стили CSS (селекторы и классы), которые присутствуют в файле стилей, но не используются на страницах.
  • IntelliJ IDEA — HTML/XHTML/CSS Editor : Валидация CSS «на лету».
  • Style Studio CSS Editor : Платный редактор CSS. Подсвечивает неиспользуемые стили.
  • Expression Web’s CSS Reports : Есть возможность вывести в качестве отчёта неиспользуемые стили.

Как найти и удалить неиспользуемые стили CSS

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

Так как я начал замечать что css код растёт и понимал что как минимум ⅓ стилей уже не используется, начался поиск программы которая бы автоматически удалила неиспользуемые стили css, но безрезультатно. Как оказалось такого не существует, разве что различные расширения типа Dust-Me Selectors или платные сервисы.

Расширение Dust-Me для FF сначала показалось идеальным решением моей проблемы, но есть недостаток в том, что эта «метла» ищет неиспользуемые css классы только на той странице на которой я её активирую.

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

Ручное удаление неиспользуемых стилей css с помощью Notepad++

Итак, Notepad++ я думаю у вас имеется, начнём с резервного копирования css файла и шаблона (темы) где будет происходить чистка (файл нужен для подстраховки). Скопировать можно например с помощью FileZilla.

Теперь когда на рабочем столе есть папка с шаблоном (темой) найдите в ней тот css файл который нужно почистить. Откройте его текстовым редактором Notepad++, скопируйте класс или >Ctrl + Shift + F и введите в первое поле поиска это слово, с помощью поля « папка » отыщите папку с шаблоном или введите путь до него и нажмите «найти всё».

После этого редактор выдаст результат поиска где встречалось данное слово.

Как видите, этот класс нигде не подключён, редактор его нашёл только в том файле который мы редактируем. Смело удаляем неиспользуемый стиль!

А вот пример если класс подключен.

Как видите данный класс подключён в искомом шаблоне, поэтому мы его не удаляем, а двигаемся дальше не спеша шаг за шагом удаляем неиспользуемые стили css.

Горячие клавиши для быстрой оптимизации CSS

Для более быстрого поиска и удаления используйте горячие клавиши. Двойным щелчком мыши выделите класс или >Ctrl + Shift + F переходите на поиск (выделенное слово уже будет скопировано) и жмите Enter. Таким образом очистка CSS будет происходить значительно быстрее.

Таким же образом можно работать и с такими редакторами как Sublime или Atom, сочетание клавиш одинаковое. Я и сам предпочитаю Sublime сейчас начал переходить на Atom, но именно удаление неиспользуемых css стилей удобней производить на Notepad.

Как удалить неиспользуемый CSS, чтобы уменьшить CSS-файлы

14.12.2020 Комментарии к записи Как удалить неиспользуемый CSS, чтобы уменьшить CSS-файлы отключены 869 Просмотров

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

Что такое неиспользуемый CSS?

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

Почему нужно удалить неиспользуемый CSS?

Поскольку CSS определяет, как отображается содержимое в HTML-документе, браузер пользователя должен загружать и анализировать все внешние файлы CSS, прежде чем он сможет начать рендеринг контента. Следовательно, чем больше CSS содержит веб-страница, тем дольше пользователи должны ждать, пока увидят что-либо на своих экранах. Встраивание небольшого CSS в HTML-файл и минимизация внешних таблиц стилей может помочь оптимизировать рендеринг контента, но сокращение неиспользуемого CSS — гораздо более эффективная стратегия для улучшения общей производительности. Объединение всех этих методов гарантирует, что пользователи будут видеть контент так быстро, как это позволит их интернет-соединение. Помимо замедления общей производительности сайта, избыточный CSS может стать причиной головной боли для разработчиков. Чистые и упорядоченные таблицы стилей легче поддерживать. Сделайте своим пользователям и себе одолжение, удалив неиспользуемый CSS.

Как удалить неиспользуемый CSS вручную

Если вы используете Chrome, на вкладке DevTools есть удобный инструмент, который позволяет видеть, какой код выполняется на странице, а какой нет. Чтобы получить доступ к этому инструменту, выполните следующие действия:

Откройте Chrome DevTools

Откройте командное меню с помощью: cmd + shift + p

Введите «Охват» и выберите опцию «Показать охват»

Выберите файл CSS с вкладки «Охват», на вкладке «Источники» откроется файл

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

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

Инструменты для удаления неиспользуемого CSS

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

1. UnusedCSS

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

2. PurifyCSS

PurifyCSS — это бесплатный инструмент, который удаляет неиспользуемый CSS из HTML, PHP, JavaScript и CSS-файлов, прежде чем вы запустите сайт. Кроме того, вам нужно вручную указать, какие файлы сканировать, что делает процесс несколько утомительным. Вместо того, чтобы изменять исходные файлы, PurifyCSS выводит новый файл с оптимизированным CSS. Поскольку PurifyCSS не работает с запущенными веб-сайтами, вам необходимо использовать его на этапе разработки. Возможно, вы захотите использовать PurifyCSS во время разработки и обновления до UnusedCSS позже.

3. PurgeCSS

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

4. UnCSS

UnCSS отличается от PurgeCSS тем, что рассматривает фактические веб-страницы, а не отдельные файлы, но он медленнее и требует больше ручной настройки. UnCSS является наиболее полезным при использовании с другими инструментами. Например, вы можете комбинировать UnCSS с Grunt и Node.js для автоматизации удаления неиспользуемых CSS.

Альтернативные методы удаления CSS

Многие инструменты веб-аудита предлагают оптимизацию CSS как часть процесса. Также постоянно появляются новые инструменты для удаления неиспользуемого CSS, поэтому не бойтесь экспериментировать. Более старые версии Opera и Firefox поддерживают надстройку под названием Dust Me, которая обнаруживает неиспользуемый CSS, но с 2015 года она не поддерживается. К счастью, Mozilla в настоящее время работает над новым инструментом под названием CSS Coverage, который поможет разработчикам оптимизировать свой CSS.

Предостережения относительно удаления неиспользуемого CSS

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

Как автоматизировать удаление неиспользуемых CSS с помощью UnCSS

Теперь давайте рассмотрим, как мы можем использовать один из перечисленных выше инструментов, чтобы очистить таблицы стилей. В этом руководстве Дина Хьюма, объясняется, как настроить Node.js, Grunt, UnCSS и еще один плагин под названием CSSmin на машине под Windows, чтобы автоматически удалять неиспользованный CSS.

1. Установите Node.js

Загрузите последнюю версию с сайта Node.js и следуйте инструкциям по установке.

2. Установите Grunt

Откройте Node.js и введите в командной строке следующее:

Grunt будет загружен и установлен автоматически.

3. Откройте папку проекта.

Используя командную строку Node.js, перейдите в папку, содержащую файлы, которые вы хотите просканировать с помощью UnCSS. Вы можете сделать это, введя путь к файлу. Например:

4. Установите UnCSS и CSSMin

Введите в командной строке Node.js следующее:

UnCSS и пакет CSSMin будут установлены в указанной папке проекта.

5. Создайте файл Grunt.js

Создайте в корневой директории проекта файл JavaScript. gruntfile.js действует как файл конфигурации для таких плагинов, как UnCSS. Введите этот код в командную строку Node.js:

В приведенных выше инструкциях указывается, чтобы UnCSS просканировал файл index.html на предмет неиспользуемого CSS и создал обрезанный файл CSS внутри папки с именем cleancss. Плагин CSSmin минимизирует новый файл CSS, который по умолчанию будет называться tidy.css. Последние несколько строк особенно важны, поскольку они загружают и регистрируют оба плагина.

6. Запустите Grunt

Наконец, вам нужно вернуться в папку исходного файла и запустить Grunt следующим образом:

В результате UnCSS и CSSmin начнут работать. Если вы все сделали правильно, вы должны получить чистый и минимизированный файл CSS. Некоторые разработчики заявляют, что с помощью этого метода уменьшили размер своих CSS-файлов более чем на 95 процентов! Это большая экономия при минимальных усилиях. Вам нужно выполнить процесс установки только один раз. В будущем вы можете просто запустить Grunt, чтобы автоматически удалять из проекта неиспользуемый CSS.

Заключение

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

Автор: Cody Arsenault

Редакция: Команда webformyself.

Как удалить неиспользуемые стили из CSS?

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

1 ответ 1

Используйте uncss:

А для сборки, нужно скачать и установить node.js, в проекте создать файлы: package.json, gulpfile.js.

Минимальное содержимое package.json:

В командной строке (лучше бы coneEmu консоль) выполнить установку gulp npm install -g gulp npm install —save-dev gulp

Установить gulp-uncss: npm install —save-dev gulp-uncss

Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта

2 часа с утра потратил на гугление запроса «Удалить неиспользуемые стили css онлайн» и ничего нужного не нашел.
В лучшем случае сервис предлагает по ссылки очистить ксс, ну так страниц то несколько типов.

Есть стандартный шаблон Джумлы protostar и в нем ксс весит 170 кб . Я же сделал минималистичный сайт и уверен что там отситлы ксс на 10 кб.

У меня три типа страниц — как на автомате собрать неиспользуемые классы на этих страницах и удалить их?

Удаляем неиспользуемые правила CSS на всем сайте

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

Короче попотел, и нашел такие решения:

  • платный сервис unused-css.com
  • DustMe Selectors — расширение FireBug для Mozilla
  • CSS Usage — расширение FireBug для Mozilla

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

Итак начнем с того какое программное обеспечение нам понадобится. Первым делом нам понадобится Mozilla Firefox. После того как Firefox установлен, внедряем в него дополнение FireBug.

Начальные подготовления сделаны, дальше более подробно о дополнениях для сканирования CSS.

Dust Me Selectors

Дополнения Dust Me Selectors в официальном каталоге дополнений к браузеру нет, установить его можно перейдя по ссылке и нажав кнопку Install Now (естественно открывать ссылку нужно FireFox’ом). Дополнение установили, перезагрузили браузер и в правом нижнем углу у нас появится розовый значок метлы.

После того как расширение просканирует страницу откроется окошко с тремя вкладками Unused selectors (неиспользуемые правила), Used selectors (правила которые используюся) и Spider log (паук — сканирование сайта). Внизу две кнопки: сохранить документ и очистить результат сканирования.

Теперь немного подробнее о Spider log. Требуется ввести адрес сайта или адрес карты сайта и нажать кнопочку GO! По идее все понятно и все должно работать, но как ни хотел я результата, результата не получилось, точнее получалось просканировать пару страниц и дополнение висло, что очень печалило, одним словом неудача какая-то. Автор утверждает, что для работы дополнения нужна Mozilla версии 1.5 и выше (это тоже развод [хихи] я ее устанавливал, да все работает, но все равно не так как нужно). В принципе это единственный минус и самый значительный, потому что нужно было весь сайт проверить, а проверяется достаточно долго (пол дня убил в этот хлам). Самое положительное это то, что если ввести название сайта, то дополнение построит карту сайта, а она нам пригодится для следующего дополнения CSS Usage, так что обязательно сохраните карту сайта.

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

CSS Usage

Дополнение CSS Usage в официальном каталоге можно найти по ссылке. До недавнего времени, чтобы расширение работало, приходилось устанавливать версию Firefox 3.6.25, а на момент написания статьи Автор, как бы проснулся или очухался и обновил дополнение, поэтому можно ставить на последнюю версию Mozill’ы. После того как Вы установите это дополнение и перезагрузите браузер, смело заходите на сайт который хотите проверить и как только страничка загрузится, смело нажимайте кнопочку F12 (откроется окошко FireBug’а) и там Вы увидите вкладку CSS Usage:

Чтобы проверить страницу на наличие неиспользуемых правил нужно нажать кнопочку Scan (сканирование занимает секунд 30, а то и меньше). На первый взгляд кажется что это расширение сканирует только одну страницу, что же делать с остальными страницами спросите Вы. А помните мы сохраняли карту сайта с помощью расширения Dust Me Selectors, правда если на проверяемом сайте есть html карта сайта, то использовать лучше ее, если же ее нет то создайте новую страничку сайта и вставьте карту сайта с расширения Dust Me Selectors (если нет возможности создать новую страницу то об этом ниже).

Сейчас я опишу последовательность действий для сканирования:

  1. открываем html карту сайта
  2. нажимаем F12 — открывается FireBug
  3. переходим на вкладку CSS Usage
  4. нажимаем кнопку AutoScan
  5. обновляем страницу (нажимаем F5)

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

В самом начале просканированной страницы указываются следующие обозначения:

  • Line — строка правила
  • CSS Selector — CSS правило
  • Seen — используемое CSS правило (светло-зеленым цветом)
  • Seen before — правила CSS которые использовались ранее (темно-зеленым цветом)
  • Unseen — неиспользуемые CSS правила (красным цветом)
  • :hover — CSS правила для элементов, которые получили фокус (серым цветом)
  • (2 scans) — показывается количество сканирований (если Вы просканировали тока одну страницу то соответственно будет цифра 1)
  • export cleaned css — сохранить результат сканирования

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

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

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

Когда все страницы будут просканированы кликните на ссылку export cleaned css , результат откроется в новой вкладке, выделите все и сохраните в файл с раширением .css , перед каждым неиспользуемым правилом будет указан тег UNUSED:

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

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

Я его применял для оптимизации двух файлов стилей общим весом в 360Кб — 18000 строк, я был в шоке когда это увидел. После всех махинаций с помощью этого метода получился один файл стилей — 90Кб и 1100 строк, результатом остались все довольны, и я тоже. Правда решение искалось долго, в следующий раз все будет на много быстрее, что очень радует.

Чуть не забыл. Что делать если создать страницу с картой сайта не представляется возможным? В этом случае в адрессную строку Вам придется вставлять каждую ссылу с карты сайта ручками и все будет отлично срабатывать.

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

Еще отмечу, что платный сервис присылает результат сканирования в течение 24 часов, а если на Вашем сайте (ресурсе) 10 или 20 шаблонов страниц, то Ваша проверка займет на много меньше времени, чем Вы потратите чтобы дождаться от них результата. Но, если на сайте огромное количество страниц и для них используются разные шаблоны, конечно целесообразно заплатить какието 25$ за такую услугу.

Надеюсь Вам окажется полезным такой метод проверки Вашего файла стилей.

Как отрефакторить 17 тысяч строк CSS

Многие из нас работают над большими проектами. Тот, о котором расскажу я, живет вот уже 15 лет и имеет в своём составе пару десятков веб-приложений на ASP.NET WebForms, главное из которых содержит в себе около полутора тысяч aspx-страниц.

Зачем так много? Желание подстроиться под заказчиков с различными требованиями даёт о себе знать. Каждый хочет какую-нибудь свою особенную функциональность и в итоге получает её. Но речь не об этом. В довесок к большому числу страниц у нас было много стилей CSS. Очень много.

Источник: Ursus Wehrli. The Art Of Clean Up

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

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

Топ-пост этого месяца:  Как реализовать получение большого массива данных из внешнего апи

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

Проблема

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

  • 12 различных гридов, выглядящих не то, чтобы похоже, но и не то, чтобы совсем по-разному.
  • 4 варианта тулбаров над гридами с тремя вариантами кнопок и выпадающих списков (тоже разных, но подозрительно похожих по стилю).
  • Даже информационных сообщений, которые представляют собой всего-то текст с иконкой на красном, жёлтом или синем фоне, и то было 2 варианта.

Тут надо сказать ещё об одной вещи. У нас не один веб-проект, а несколько. Контролы и стили к каждому из них развивались параллельно довольно продолжительное время, когда, наконец, кому-то в голову не пришла светлая идея объединить это всё и вынести в библиотеку общих контролов с частью общих стилей (которые можно затем перекрывать в каждом из проектов). Написание этой библиотеки не ознаменовало унификации всего и вся и удаления дубликатов. Вместо этого контролов и стилей стало ещё больше. Общий грид в общей библиотеке – вещь полезная, но удалить 12 имеющихся из трёхсот мест по всему проекту вы не сможете – ни одна нормальная команда под это не подпишется. Вообще в какой-то момент народ перестал понимать, какой из наших многочисленных контролов стоит использовать в том или ином случае. Каждый из них может реализовать какое-нибудь специфическое поведение, пришедшее в голову дизайнеру в момент дизайна конкретной функциональности.

И еще мы наткнулись на известную проблему в браузере Internet Explorer 9, который почему-то отказывался воспринимать более чем 4095 селекторов в нашем славном файле.

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

Начинаем

Итак, мы все договорились и получили свободу действий – начинаем разгребать завалы. Что же у нас в наличии?

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

Первое, с чего мы начали, это удаление неиспользуемых стилей. С кодом на C# всё просто, включил анализатор солюшена, он и показал, какие из публичных методов можно удалить. Со стилями единственный путь – это текстовый поиск по солюшену. Если вас когда-нибудь попросят вычистить таким способом 17 тысяч строк в CSS файле, лежащего в солюшене из двухсот пятидесяти проектов, попросите себе SSD диск. Процесс пойдёт чуть быстрее.

А вот если вы только планируете написать такой гигантский проект с нуля, то вот вам несколько советов:

Всегда используйте название селектора в коде полностью.

Никогда не разбивайте его на части, например:

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

Также не умничайте с конструкциями такого вида:

Во-первых, для наследников класса всё равно не работает ( GetType() надо поменять на typeof(Feedback) ), во-вторых искать невозможно.

Просто храните текст. Поиск по тексту в солюшене с preserve case и whole word. Не усложняйте себе жизнь.

Используйте префиксы.

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

Использования CSS классов со следующими именами искать невозможно:

Куда приятней с префиксами. Первые два можно условно отнести к помощникам – helpers. Наделим их префиксами: .h-hidden и .h-visible . Уже можно искать! Если классы специфические, то можно использовать название проекта. MyProject ? Пусть будет .mp- . Скажем, .mp-login-page . Контролы общие? – .ct-

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

Не используйте одни и те же названия селекторов для разных нужд

Скажем .error и .text из предыдущего примера — это совсем запущенный случай. Селекторы не всегда уникальны и могут использоваться совершенно по-разному в разных случаях.

Я бы заменил это на следующие селекторы:

Громоздко? Несомненно. Зато хорошо ищется и удаляется.

Сделайте себе список стилей

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

Действуем

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

Думаете, у вас проект маленький, и вам не придётся? Мы тоже не думали, и проект превратился в монстра очень большой. В общем, удаление неиспользуемых стилей — вполне себе нормальная ситуация. Неиспользуемых классов было много, частенько можно было удалить несколько экранов текста подряд. В результате в нашем файле из 17 тысяч строк осталось всего… 16 тысяч. Правда ли, что мы это всё используем? Да! Это наше всё годами нажитое. Всё нужно!

Что дальше? Выяснилось, что селекторов у нас осталось всё равно очень много, причём после чистки все 100% из них используются. Когда мы удаляли неиспользуемые стили, то обратили внимание на такие вот селекторы, в которых название класса встречалось лишь единожды

Получалось как-то совсем глупо. Куча похожих стилей в классах, использующихся один раз. Идея была заимствована у Bootstrap – использовать вспомогательные классы. Скажем, для margin-top: 10px можно использовать имя .h-mt10 , для padding-left: 15px; – .h-pdl15 . Это помогло вычистить ещё множество мест.

Затем принялись искать повторяющиеся по смыслу куски. Самым популярным было иметь гиперссылку или обычный текст с картинкой слева ():

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

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

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

В какой-то момент мы поняли, что хорошо бы вынести некое подобие CSS Reset в эту библиотеку. До этого CSS Reset был представлен только в двух приложениях, причём в каждом свой. В результате решено было использовать Normalize.css, который мы и включили в самое начало. Туда же мы добавили базовые стили для нашего приложения – размер и гарнитуру шрифта (тоже везде отличались) и многие другие вещи.

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

Несмотря на большой объём кода всё оказалось не сильно изменённой впоследствии копипастой. В конце у нас получилась для всех одинаковая общая часть, шаблон на 1,5 экрана и 50 less-файлов с 15-ю переменными для индивидуальной настройки скина.

Общий кусок вынесли в конец нашего гигантского файла. Поскольку при равенстве весов CSS-селекторов приоритет будет за тем, что находится ниже по тексту, это важно. На дальнейшей ступени рефакторинга нам сильно помог add-on к Visual Studio – Web Essentials. Штука очень полезная, если вкратце, то своеобразный решарпер для CSS. Помимо нахождения синтаксических ошибок и советов добавить недостающий вендорный префикс, Web Essentials помогает искать одинаковые классы внутри файла. И оказалось, что в нашем коде часто возникала такая вот ситуация.

Определён селектор скажем на 6255-й строке:

Затем где-нибудь на 13467-й:

Я немного утрирую, но было примерно так. Причём случай носил не единичный, а массовый характер. Доходило и до четырёх перекрытий. Web Essentials нещадно ругается на такие вещи, так что все они были найдены и удалены. Как я говорил, при равенстве весов селекторов приоритет за тем, что ниже, так что удаляем селекторы сверху и объединяем. Процесс немного рисковый. При большом количестве разных стилей, навешенных на один и тот же элемент и разбросе селекторов по файлу перемещение чревато сменой приоритета. Но тут уж ничего не поделаешь. В ходе всей работы наши QA периодически гуляли по всем страницам системы и сравнивали вид с продакшеном.

В какой-то момент мы созрели до того, чтобы разбить наш огромный CSS на части по сегментам. Получилось 120. При билде файл собирался обратно в один. А через некоторое время мы перешли на LESS.

Как оно сейчас

Посмотрим, как это всё выглядит на примере.

Немного упростим задачу и представим, что у нас есть библиотека общих контролов ( CommonControls ) и проект для статического контента (CDN), использующегося в основном веб-проекте.

В библиотеке с контролами имем LESS-файлы, которые при билде собираются в один ( common-controls.less ) и затем транслируются в CSS ( common-controls.css ).

Рассмотрим чуть подробнее, что где хранится.

  • 01-essentials.less хранит в себе только переменные и миксины. Они используются LESS файлами библиотеки контролов, так и файлами остальных проектов.
  • 02-normalize.less . Про него я уже немного рассказывал. Он хранит слегка изменённый под нужды проекта код нормализации CSS.
  • 03-default-styles.less хранит общие стили оформления (например, цвет фона элемента body , гарнитуру используемого шрифта, и т.д.)
  • 04-helpers.less хранит вспомогательные классы, вроде уже описанных отступов margins, paddings.
  • Далее идут собственно стили контролов.

Настраиваем Build Events для проекта CommonControls. Я выношу всё в отдельный файл, чтобы не редактировать и не мержить файл проекта каждый раз, когда меняется содержимое скрипта.

Код скрипта очень простой. Собираем вместе все файлы LESS в папке Stylesheets и переносим результат в папку CombinedStylesheets . Затем запускаем препроцессор и получаем готовый CSS.

Теперь посмотрим на стили проекта Cdn. В папке _cssparts лежат стили проекта, которые затем собираются в файл combined.less . В реальном проекте файлов очень много. На скриншоте всё чуточку упрощено.

Последовательность файлов особого значения не имеет, кроме самого первого и самого последнего.

001-imports.less содержит в себе следующий код:

В первой директиве импортируется содержимое файла LESS, в данном случае 01-essentials.less . Это равносильно тому, как если бы мы конкатенировали этот файл вместе с остальными при комбинировании. Импорт позволяет использовать все переменные и миксины, которые мы определили в библиотеке CommonControls . Вторая директива – классический импорт – в результирующем CSS генерируется как есть. Вообще импорты CSS использовать не рекомендуется, и единственная причина, почему он здесь, это IE9.

z-ie9-special.less содержит в себе один единственный селектор, который в комбинированном файле идёт самым последним и используется на специальной странице, чтобы понять, применяется он или нет. Если общее число селекторов превысило 4095, то стиль не применится. Значит надо разбивать файл на части. Фактически нам пришлось не комбинировать результирующий CSS библиотеки контролов и собственно CSS для веб-проекта.

При билде происходят следующие вещи:

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

Посмотрим теперь на генерацию кастомных скинов.

В папке _custom-parts лежит шаблон для генерации custom-template.less . Предположим, что нам пока что достаточно кастомизировать цвета заголовков H1 и H2 (в реальности, конечно, намного больше вещей). custom-template.less будет выглядеть так:

Default-values.less будет содержать в себе значения переменных по умолчанию (чтобы иметь возможность перекрывать в скине не всё подряд, а только некоторые из значений):

В каждом из скинов ( skin.less ) будет примерно такой код:

Импортируем значения по умолчанию, перекрываем их своими значениями и импортируем шаблон.

Чтобы всё это сгенерировать, пишем такой код в pre build event:

На выходе рядом с каждым skin.less получаем skin.css для примера выше такого вида:

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

Не уверен, что хак для IE выглядит именно так, но бог с ним. В LESS можно экранировать строку, используя символы

Всё остальное перешло без проблем. Вскоре начали появляться простенькие переменные:

Затем миксины посложнее:

Смысл этого миксина в том, что помимо использования во вспомогательном классе он используется ещё и в некоторых других. В нашем случае стало ещё более интересным. Когда в какой-то момент мы поняли, что не то, что переписать, а даже «загримировать» по стилям 12 гридов не представляется возможным, то хорошей идеей стало выносить общие цвета и стили в переменные и миксины. Выходит так, что для старых проектов LESS даже больше интересен, чем для новых. Вообще есть где разгуляться. Например, генерация background-image для кнопок различных типов при наличии спрайта:

Вызываем как-то так:

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

Как удалить неиспользуемый CSS, чтобы уменьшить CSS-файлы

14.12.2020 Комментарии к записи Как удалить неиспользуемый CSS, чтобы уменьшить CSS-файлы отключены 870 Просмотров

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

Что такое неиспользуемый CSS?

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

Почему нужно удалить неиспользуемый CSS?

Поскольку CSS определяет, как отображается содержимое в HTML-документе, браузер пользователя должен загружать и анализировать все внешние файлы CSS, прежде чем он сможет начать рендеринг контента. Следовательно, чем больше CSS содержит веб-страница, тем дольше пользователи должны ждать, пока увидят что-либо на своих экранах. Встраивание небольшого CSS в HTML-файл и минимизация внешних таблиц стилей может помочь оптимизировать рендеринг контента, но сокращение неиспользуемого CSS — гораздо более эффективная стратегия для улучшения общей производительности. Объединение всех этих методов гарантирует, что пользователи будут видеть контент так быстро, как это позволит их интернет-соединение. Помимо замедления общей производительности сайта, избыточный CSS может стать причиной головной боли для разработчиков. Чистые и упорядоченные таблицы стилей легче поддерживать. Сделайте своим пользователям и себе одолжение, удалив неиспользуемый CSS.

Как удалить неиспользуемый CSS вручную

Если вы используете Chrome, на вкладке DevTools есть удобный инструмент, который позволяет видеть, какой код выполняется на странице, а какой нет. Чтобы получить доступ к этому инструменту, выполните следующие действия:

Откройте Chrome DevTools

Откройте командное меню с помощью: cmd + shift + p

Введите «Охват» и выберите опцию «Показать охват»

Выберите файл CSS с вкладки «Охват», на вкладке «Источники» откроется файл

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

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

Инструменты для удаления неиспользуемого CSS

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

1. UnusedCSS

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

2. PurifyCSS

PurifyCSS — это бесплатный инструмент, который удаляет неиспользуемый CSS из HTML, PHP, JavaScript и CSS-файлов, прежде чем вы запустите сайт. Кроме того, вам нужно вручную указать, какие файлы сканировать, что делает процесс несколько утомительным. Вместо того, чтобы изменять исходные файлы, PurifyCSS выводит новый файл с оптимизированным CSS. Поскольку PurifyCSS не работает с запущенными веб-сайтами, вам необходимо использовать его на этапе разработки. Возможно, вы захотите использовать PurifyCSS во время разработки и обновления до UnusedCSS позже.

3. PurgeCSS

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

4. UnCSS

UnCSS отличается от PurgeCSS тем, что рассматривает фактические веб-страницы, а не отдельные файлы, но он медленнее и требует больше ручной настройки. UnCSS является наиболее полезным при использовании с другими инструментами. Например, вы можете комбинировать UnCSS с Grunt и Node.js для автоматизации удаления неиспользуемых CSS.

Альтернативные методы удаления CSS

Многие инструменты веб-аудита предлагают оптимизацию CSS как часть процесса. Также постоянно появляются новые инструменты для удаления неиспользуемого CSS, поэтому не бойтесь экспериментировать. Более старые версии Opera и Firefox поддерживают надстройку под названием Dust Me, которая обнаруживает неиспользуемый CSS, но с 2015 года она не поддерживается. К счастью, Mozilla в настоящее время работает над новым инструментом под названием CSS Coverage, который поможет разработчикам оптимизировать свой CSS.

Предостережения относительно удаления неиспользуемого CSS

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

Как автоматизировать удаление неиспользуемых CSS с помощью UnCSS

Теперь давайте рассмотрим, как мы можем использовать один из перечисленных выше инструментов, чтобы очистить таблицы стилей. В этом руководстве Дина Хьюма, объясняется, как настроить Node.js, Grunt, UnCSS и еще один плагин под названием CSSmin на машине под Windows, чтобы автоматически удалять неиспользованный CSS.

1. Установите Node.js

Загрузите последнюю версию с сайта Node.js и следуйте инструкциям по установке.

2. Установите Grunt

Откройте Node.js и введите в командной строке следующее:

Grunt будет загружен и установлен автоматически.

3. Откройте папку проекта.

Используя командную строку Node.js, перейдите в папку, содержащую файлы, которые вы хотите просканировать с помощью UnCSS. Вы можете сделать это, введя путь к файлу. Например:

4. Установите UnCSS и CSSMin

Введите в командной строке Node.js следующее:

UnCSS и пакет CSSMin будут установлены в указанной папке проекта.

5. Создайте файл Grunt.js

Создайте в корневой директории проекта файл JavaScript. gruntfile.js действует как файл конфигурации для таких плагинов, как UnCSS. Введите этот код в командную строку Node.js:

В приведенных выше инструкциях указывается, чтобы UnCSS просканировал файл index.html на предмет неиспользуемого CSS и создал обрезанный файл CSS внутри папки с именем cleancss. Плагин CSSmin минимизирует новый файл CSS, который по умолчанию будет называться tidy.css. Последние несколько строк особенно важны, поскольку они загружают и регистрируют оба плагина.

6. Запустите Grunt

Наконец, вам нужно вернуться в папку исходного файла и запустить Grunt следующим образом:

В результате UnCSS и CSSmin начнут работать. Если вы все сделали правильно, вы должны получить чистый и минимизированный файл CSS. Некоторые разработчики заявляют, что с помощью этого метода уменьшили размер своих CSS-файлов более чем на 95 процентов! Это большая экономия при минимальных усилиях. Вам нужно выполнить процесс установки только один раз. В будущем вы можете просто запустить Grunt, чтобы автоматически удалять из проекта неиспользуемый CSS.

Заключение

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

Автор: Cody Arsenault

Редакция: Команда webformyself.

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

Многие разработчики сталкиваются с тем, что после какого-то времени работы над проектом, в файлах CSS появляются стили, про которые нельзя точно сказать, используются они или нет. Такое часто случается, когда вы работаете в команде, и над стилями работает не один человек. Или, например, до вас было несколько разработчиков, а вы решили что-то поменять или дизайнер задумал небольшой редизайн. В общем, вариантов много, а результат один — браузеру отдаются «мертвые» селекторы.

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

Расширения для Firefox

Учитывает стили, включенные в страницу через
, @import и . Может анализировать как отдельную страницу, так и весь сайт. В конце вы получите список селекторов, которые не используются на сайте.

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

Веб-сервисы

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

Десктопные редакторы

Перечень редакторов кода, которые так или иначе умеют находить неиспользуемые CSS стили.

Топ-пост этого месяца:  Юзабилити — как сделать свой сайт удобным для посетителей и попытаться их удержать как можно дольше
TopStyle (Win)

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

IntelliJ IDEA (Win, Mac, Linux)

Кросс-платформенный редактор, предназначенный в первую очередь для работы с Java.

Заключение

На мой взгляд, самый удачный инструмент из перечисленных — Dust Me. Анализ всего сайта занимает меньше минуты, после чего нужно просто найти и удалить указанные селекторы.

Кстати, если у кто-то из вас пользуется редактором или сервисом, которого нет в этом списке, то пишите в комментариях, добавлю. Всем спасибо за внимание;-)

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

Вы знаете, что очистка кода CSS это объемная задача. Нужно сделать многое за ограниченное время — особенно, когда клиенты/начальники/коллеги настойчиво советуют не трогать то, что работает. Вы даже не знаете с чего начать.

Линтинг это наше все

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

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

В Sass есть написанный на Ruby линтер, называемый SCSS-lint . Вы можете настроить его самостоятельно или скачать конфигурацию, рекомендованную Sass-Guidelines , чтобы начать прямо сейчас. Также в Node.js есть sass-lint , они не на 100% совместимы и могут работать по-разному.

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

Исправление найденных ошибок

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

Предположим, вы хотите добавить отсутствующий ноль во всех числах с плавающей запятой (то есть от 0 до 1), ошибки такого типа выявляются с помощью правила LeadingZero в SCSS-lint. Для этого надо использовать для поиска регулярное выражение \s+\.(\d+) (все цифры, следующие за пробелом с точкой), а для замены \ 0.$1 (пробел, ноль, точка и найденное число). А если вы озаботились правилом линтера BorderZero , то вы можете заменить в вашем редакторе с помощью поиска/ замены все правила border: none на border: 0 . Проще простого!

Я недавно создал на GitHub репозиторий scss-lint-regex , чтобы собрать все регулярные выражения для линтинга в одном месте. Обязательно взгляните на него, если у вас проблемы с линтингом в большом проекте. И будьте аккуратны с поиском/заменой, временами он приводит к неожиданным побочным эффектам. После каждой замены выполняйте git diff , чтобы выявить, что изменилось, это гарантирует, что вы не добавите багов в свой код.

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

Примечание переводчика

Некоторые из этих вещей можно сделать с помощью плагинов SassBeautify в текстовых редакторах, например, sublime или atom .

Пересмотр структуры проекта

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

Не столь значим выбор методологии проекта, главное, чтобы она у вас была и не вызывала у вас дискомфорт. Это может быть SMACSS , 7-1 или ITCSS — выбор за вами. Попытайтесь реструктурировать свой код в соответствии с выбранной методикой. Я, как правило, использую паттерн 7-1, который мы разработали в Sass Guidelines, поэтому я дам вам несколько советов, которые помогут, если вы выбрали этот путь.

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

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

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

В качестве примера правильного и небольшого компонента могу привести следующий:

Quote < padding: 10px; >.quote__attribution < font-size: 80%; >.quote > :first-child < margin-top: 0; >.quote > :last-child

Старайтесь мыслить модулями. Меньше. Проще. Независимее.

Удаление лишнего

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

Прошло уже 3 года, но этот твит Николаса Галахера остается моим любимым вопросом о CSS:

Устаревание это настоящая чума CSS. При написании стилей мы часто ходим туда и обратно, пробуя новые правила — в итоге мы, как правило, оставляем несколько совершенно ненужных деклараций. Например, overflow: hidden , потерявший необходимость или font-size , не изменяющий размер шрифта. Оставляя их, мы увеличиваем технический долг . В этом нет ничего хорошего.

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

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

Очевидным способом оптимизации является перемещение декларации color: red в родительский селектор, после чего каскадирование сделает за нас остальное. Конечно, реальные примеры обычно более сложны, но и этот пример показывает о том, что не стоит забывать возможности „C“ в аббревиатуре CSS .

CSS умный и вы должны быть не хуже

Также очень часто встречается нехватка понимания значений inherit , initial и currentcolor . Предположим, вы хотите, чтобы ссылки были того же цвета, что и основной текст (они уже достаточно выделены подчеркиванием). Вот как не надо это делать:

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

В CSS есть встроенный способ решения этой проблемы, это значение inherit:

Точно также при возвращении свойству дефолтного значения будет плохой идеей задание фиксированного значения. В CSS для таких случаев есть значение initial . Обычно оно не имеет отличий от задания фиксированных значений, но есть случаи, когда действительно играет свою роль, например, при определении направления текста в свойстве text-align . При сбросе text-align , значение left может испортить текст на RTL-языках (направленных справа налево), выходом будет именно initial (еще лучше start , но это значение не поддерживается в IE9)/.

Последнее в списке, но не последнее по важности значение это currentcolor , очень многие разработчики о нем не знают. Если вы относитесь к их числу, не переживайте, просто спросите у себя: “Если вы не задавали цвет границы элементы, то почему он автоматически совпадает с цветом шрифта элемента?”. Да, это происходит потому, что по умолчанию свойству border-color задано значение currentcolor (спецификация). Согласитесь, все очевидно из названия.

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

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

Ваш Git должен быть в порядке

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

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

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

Заключение

Итак, кратко сформулирую основные тезисы статьи для тех кому лень читать весь текст:

Очистка проекта CSS/Sass сложна потому, что трудно сразу оценить все последствия изменения или удаления строки CSS. Это все в основном из-за плохой тестируемости CSS. Поэтому вам надо быть внимательными.

Начните с линтинга и ваш код станет симпатичнее. Сделайте это потому, что это облегчит вашу жизнь в будущем. Это также хороший способ обзора состояния вашего кода без особого риска (исправление синтаксической грязи не должно стать причиной каких-то проблем).

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

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

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

Последнее, но не менее важное — не забудьте отпраздновать, когда все закончится. Удачи!

Здравствуйте, уважаемые читатели блога сайт. Это небольшая заметка из серии «самому себе на память». Возникла идея убрать лишние строки из файла стилей. За семь лет существования блога много чего поменялось, но строки в файлике STYLE.CSS оставались (на всякий случай или просто забывал их убирать). Сейчас мне показалось, что он стал слишком много весить, а посему возникла идея его почистить.

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

Варианты поиска ненужных для работы сайта CSS стилей

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

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на

Вам может быть интересно

Как увеличить скорость загрузки сайта по максимуму и оптимизация нагрузки на сервер
CSS — что это такое, как таблицы каскадных стилей подключаются к Html коду с помощью Style и Link
Оптимизация и сжатие CSS в Page Speed — как отключить внешние файлы стилей и объединить их в один для ускорения загрузки Как настроить чередование фонового цвета строк таблиц, списков и прочих Html элементов на сайте с помощью псевдокласса nth-child
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
List style (type, image, position) — Css правила для настройки внешнего вида списков в Html коде
Как получить быстрый сайт — оптимизация (сжатие) изображений и скриптов, а так же уменьшение числа Http запросов

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

Еще одна причина, по которой не так часто урезают правила – просто неудобно искать и удалять неиспользуемые стили в чем-либо, что больше маленького веб-проекта. Если контент не статичен, как понять, какие правила используются и где?

Инструмент разработчика Chrome

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

Что нужно сделать для проверки стилей на сайте:

Откройте интересующий сайт

Откройте панель разработчика

Перейдите на вкладку audits

Выберите опцию Web Page Performance и запустите

В части результатов будет «Remove unused CSS rules». Если этого нет, значит, у вас нет неиспользуемых стилей. Поздравляю! Результат разбит по стилям. Разбивка не просто по файлам, а по блокам style. Реально полезная функция, так как нам нужны только те стили, которые писали мы. По крайней мере, в рамках этой статьи.

Хорошо ли это?

Я не нашел супер простого способа экспортировать результат из Chrome. Можно копировать прямо из блока, но его сначала нужно развернуть. Это делает разбор результатов немного неудобным. Запуск теста в браузере еще дальше отталкивает нас от работы с кодом, что, возможно, приведет к тому, что мы будем забывать тестировать сайт.

Вывод: для начала полезно, но не долгосрочное решение.

UnCSS

Для поиска неиспользуемых стилей можно задействовать инструменты командной строки. UnCSS – интересный экземпляр. Он вытягивает страницу через phantomJS и ловит стили, вставленные через JS. Я очень хотел попробовать этот инструмент, так как он решал мою проблему, ведь панель разработчика Chrome совсем не связана с редактированием кода. С помощью UnCSS результат можно сохранить прямо в файл, идеально.

Установка

У меня не получилось выполнить npm install uncss на Ubuntu. Ничего серьезного, оказалось, я забыл пару зависимостей. Команды для установки недостающих библиотек, которые я запускал:

sudo apt-get update sudo apt-get install build-essential chrpath libssl-dev libxft-dev sudo apt-get install libfreetype6 libfreetype6-dev sudo apt-get install libfontconfig1 libfontconfig1-dev

sudo apt — get update

sudo apt — get install build — essential chrpath libssl — dev libxft — dev

sudo apt — get install libfreetype6 libfreetype6 — dev

sudo apt — get install libfontconfig1 libfontconfig1 — dev

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

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

Использование командной строки

uncss http://your-site.foo/ > unused-styles.css

uncss http : //your-site.foo/ > unused-styles.css

Результат разбивается на стили сайта your-site.com и браузер Chrome, но хранятся в одном файле. На моем сайте есть шрифт font-awesome, и все иконки, которые не используются на домашней странице, попали в вывод UnCSS. Сейчас мне это неважно. Их можно спрятать, если запустить команду еще раз и указать ignoreSheets.

Обратите внимание, что ignoreSheets может принимать строку (полный URL стиля, который нужно проигнорировать) или регулярное выражение. С регулярным выражением проще, так как там меньше символов, и оно покрывает возможные изменения в пути к файлу.

Вот такое сообщение об ошибке выскакивает при таймауте страницы. Таймаут можно увеличить с помощью -t N, где N – количество миллисекунд (не ставьте –t 360, чтобы потом удивляться, почему код не подождал 5 минут).

Вывод: UnCSS удобнее, так как ближе к месту, где я редактирую стили. Выходной файл полезен при исключении ненужных стилей. Я вижу ему применение из-за опции –includeSheets, которая автоматически игнорирует все, что попало под регулярное выражение. Удобно для, например, сайтов в WordPress, где различные плагины могут подтягивать свои стили, но разработчику нужны только стили темы style.css и т.д.

Какой инструмент использовать?

Сначала я выбор отдал UnCSS и удобной командной строке. Однако пока я писал эту статью, я попробовал их на еще паре сайтов и получил менее перспективные результаты. В частности, у меня есть несколько сайтов, созданных пару лет назад, на которых используется фреймворк, где задействованы постоянные комментарии /*!*…*/. Они плохо работают с PostCSS, поэтому и с UnCSS. Я еще не вникал в проблему, но, возможно, более новая версия PostCSS прощает такие комментарии. Тем не менее, прямо сейчас это стало еще одним барьером, и я не могу полностью использовать UnCSS в своей работе.

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

Короче попотел, и нашел такие решения:

  • платный сервис unused-css.com
  • DustMe Selectors — расширение FireBug для Mozilla
  • CSS Usage — расширение FireBug для Mozilla

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

Итак начнем с того какое программное обеспечение нам понадобится. Первым делом нам понадобится Mozilla Firefox. После того как Firefox установлен, внедряем в него дополнение FireBug .

Dust Me Selectors

Дополнения Dust Me Selectors в официальном каталоге дополнений к браузеру нет, установить его можно перейдя по ссылке и нажав кнопку Install Now (естественно открывать ссылку нужно FireFox’ом). Дополнение установили, перезагрузили браузер и в правом нижнем углу у нас появится розовый значок метлы.

После того как расширение просканирует страницу откроется окошко с тремя вкладками Unused selectors (неиспользуемые правила), Used selectors (правила которые используюся) и Spider log (паук — сканирование сайта). Внизу две кнопки: сохранить документ и очистить результат сканирования.

Теперь немного подробнее о Spider log. Требуется ввести адрес сайта или адрес карты сайта и нажать кнопочку GO! По идее все понятно и все должно работать, но как ни хотел я результата, результата не получилось, точнее получалось просканировать пару страниц и дополнение висло, что очень печалило, одним словом неудача какая-то. Автор утверждает, что для работы дополнения нужна Mozilla версии 1.5 и выше (это тоже развод [хихи] я ее устанавливал, да все работает, но все равно не так как нужно). В принципе это единственный минус и самый значительный, потому что нужно было весь сайт проверить, а проверяется достаточно долго (пол дня убил в этот хлам). Самое положительное это то, что если ввести название сайта, то дополнение построит карту сайта, а она нам пригодится для следующего дополнения CSS Usage , так что обязательно сохраните карту сайта.

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

CSS Usage

Дополнение CSS Usage в официальном каталоге можно найти по ссылке . До недавнего времени, чтобы расширение работало, приходилось устанавливать версию Firefox 3.6.25, а на момент написания статьи Автор, как бы проснулся или очухался и обновил дополнение, поэтому можно ставить на последнюю версию Mozill’ы. После того как Вы установите это дополнение и перезагрузите браузер, смело заходите на сайт который хотите проверить и как только страничка загрузится, смело нажимайте кнопочку F12 (откроется окошко FireBug’а) и там Вы увидите вкладку CSS Usage:

Чтобы проверить страницу на наличие неиспользуемых правил нужно нажать кнопочку Scan (сканирование занимает секунд 30, а то и меньше). На первый взгляд кажется что это расширение сканирует только одну страницу, что же делать с остальными страницами спросите Вы. А помните мы сохраняли карту сайта с помощью расширения Dust Me Selectors, правда если на проверяемом сайте есть html карта сайта, то использовать лучше ее, если же ее нет то создайте новую страничку сайта и вставьте карту сайта с расширения Dust Me Selectors (если нет возможности создать новую страницу то об этом ниже).

Сейчас я опишу последовательность действий для сканирования:

  1. открываем html карту сайта
  2. нажимаем F12 — открывается FireBug
  3. переходим на вкладку CSS Usage
  4. нажимаем кнопку AutoScan
  5. обновляем страницу (нажимаем F5)

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

В самом начале просканированной страницы указываются следующие обозначения:

  • Line — строка правила
  • CSS Selector — CSS правило
  • Seen — используемое CSS правило (светло-зеленым цветом)
  • Seen before — правила CSS которые использовались ранее (темно-зеленым цветом)
  • Unseen — неиспользуемые CSS правила (красным цветом)
  • :hover — CSS правила для элементов, которые получили фокус (серым цветом)
  • (2 scans) — показывается количество сканирований (если Вы просканировали тока одну страницу то соответственно будет цифра 1)
  • export cleaned css — сохранить результат сканирования
Топ-пост этого месяца:  Как отключить jquery-migrate-0.5.9.js

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

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

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

Когда все страницы будут просканированы кликните на ссылку export cleaned css , результат откроется в новой вкладке, выделите все и сохраните в файл с раширением.css , перед каждым неиспользуемым правилом будет указан тег UNUSED:

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

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

Я его применял для оптимизации двух файлов стилей общим весом в 360Кб — 18000 строк, я был в шоке когда это увидел. После всех махинаций с помощью этого метода получился один файл стилей — 90Кб и 1100 строк, результатом остались все довольны, и я тоже. Правда решение искалось долго, в следующий раз все будет на много быстрее, что очень радует.

Чуть не забыл. Что делать если создать страницу с картой сайта не представляется возможным? В этом случае в адрессную строку Вам придется вставлять каждую ссылу с карты сайта ручками и все будет отлично срабатывать.

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

Еще отмечу, что платный сервис присылает результат сканирования в течение 24 часов, а если на Вашем сайте (ресурсе) 10 или 20 шаблонов страниц, то Ваша проверка займет на много меньше времени, чем Вы потратите чтобы дождаться от них результата. Но, если на сайте огромное количество страниц и для них используются разные шаблоны, конечно целесообразно заплатить какието 25$ за такую услугу.

Надеюсь Вам окажется полезным такой метод проверки Вашего файла стилей.

Удалить неиспользуемые стили css. Сброс стилей с помощью CSS Reset

Многие разработчики сталкиваются с тем, что после какого-то времени работы над проектом, в файлах CSS появляются стили, про которые нельзя точно сказать, используются они или нет. Такое часто случается, когда вы работаете в команде, и над стилями работает не один человек. Или, например, до вас было несколько разработчиков, а вы решили что-то поменять или дизайнер задумал небольшой редизайн. В общем, вариантов много, а результат один — браузеру отдаются «мертвые» селекторы.

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

Расширения для Firefox

Учитывает стили, включенные в страницу через
, @import и . Может анализировать как отдельную страницу, так и весь сайт. В конце вы получите список селекторов, которые не используются на сайте.

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

Веб-сервисы

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

Десктопные редакторы

Перечень редакторов кода, которые так или иначе умеют находить неиспользуемые CSS стили.

TopStyle (Win)

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

IntelliJ IDEA (Win, Mac, Linux)

Кросс-платформенный редактор, предназначенный в первую очередь для работы с Java.

Заключение

На мой взгляд, самый удачный инструмент из перечисленных — Dust Me. Анализ всего сайта занимает меньше минуты, после чего нужно просто найти и удалить указанные селекторы.

Кстати, если у кто-то из вас пользуется редактором или сервисом, которого нет в этом списке, то пишите в комментариях, добавлю. Всем спасибо за внимание;-)

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

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

1. Type-o-Matic

Type-o-matic представляет собой Firebug -плагин, который умеет анализировать шрифты, использованные на страницах сайта. Этот плагин выводит отчет в виде таблицы с информацией о свойствах используемых шрифтов ( семейство, размер, цвет и другое ).

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

2. CSSCSS

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

3. CSS Lint

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

4. CSS Colorguard

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

5. CSS Dig

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

6. Dust Me

Dust-Me – плагин для Firefox и Opera , который выводит неиспользуемые селекторы из таблицы стилей. Инструмент берет весь CSS вашего сайта, и показывает, какие именно селекторы используются, а какие лишние.

7. Devilo.us

Devilo.us – продвинутый движок для сжатия и оптимизации CSS -кода, который теперь поддерживает CSS3 .

8. PurifyCSS

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

9. Atomic CSS

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

10. Clean CSS

CleanCSS представляет собой многофункциональный CSS -оптимизатор. Инструмент берет ваш CSS -код и делает его чище и меньше в объеме. Вы можете оптимизировать код, написанный на разных языках: javascript , json , python , html и т. д.

11. PubCSS

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

12. CSSO

CSSO (CSS Optimizer) ¬– это инструмент, который производит структурную оптимизацию ваших CSS -файлов.

13. Helium

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

14. Strip Comments

Strip CSS Comments значительно облегчает следующие задачи: удаление комментариев из CSS -файлов, уменьшение размеров файлов. Он также доступен в виде плагина для gulp/grunt/broccoli .

15. CSS Shrinks

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

Возможно, у вас на примете есть еще какие-нибудь полезные CSS -инструменты? Пожалуйста, поделитесь ими в комментариях!

Перевод статьи “ 15 CSS Tools to Audit and Optimize Your CSS Code ” был подготовлен дружной командой проекта

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

Короче попотел, и нашел такие решения:

  • платный сервис unused-css.com
  • DustMe Selectors — расширение FireBug для Mozilla
  • CSS Usage — расширение FireBug для Mozilla

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

Итак начнем с того какое программное обеспечение нам понадобится. Первым делом нам понадобится Mozilla Firefox. После того как Firefox установлен, внедряем в него дополнение FireBug .

Dust Me Selectors

Дополнения Dust Me Selectors в официальном каталоге дополнений к браузеру нет, установить его можно перейдя по ссылке и нажав кнопку Install Now (естественно открывать ссылку нужно FireFox’ом). Дополнение установили, перезагрузили браузер и в правом нижнем углу у нас появится розовый значок метлы.

После того как расширение просканирует страницу откроется окошко с тремя вкладками Unused selectors (неиспользуемые правила), Used selectors (правила которые используюся) и Spider log (паук — сканирование сайта). Внизу две кнопки: сохранить документ и очистить результат сканирования.

Теперь немного подробнее о Spider log. Требуется ввести адрес сайта или адрес карты сайта и нажать кнопочку GO! По идее все понятно и все должно работать, но как ни хотел я результата, результата не получилось, точнее получалось просканировать пару страниц и дополнение висло, что очень печалило, одним словом неудача какая-то. Автор утверждает, что для работы дополнения нужна Mozilla версии 1.5 и выше (это тоже развод [хихи] я ее устанавливал, да все работает, но все равно не так как нужно). В принципе это единственный минус и самый значительный, потому что нужно было весь сайт проверить, а проверяется достаточно долго (пол дня убил в этот хлам). Самое положительное это то, что если ввести название сайта, то дополнение построит карту сайта, а она нам пригодится для следующего дополнения CSS Usage , так что обязательно сохраните карту сайта.

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

CSS Usage

Дополнение CSS Usage в официальном каталоге можно найти по ссылке . До недавнего времени, чтобы расширение работало, приходилось устанавливать версию Firefox 3.6.25, а на момент написания статьи Автор, как бы проснулся или очухался и обновил дополнение, поэтому можно ставить на последнюю версию Mozill’ы. После того как Вы установите это дополнение и перезагрузите браузер, смело заходите на сайт который хотите проверить и как только страничка загрузится, смело нажимайте кнопочку F12 (откроется окошко FireBug’а) и там Вы увидите вкладку CSS Usage:

Чтобы проверить страницу на наличие неиспользуемых правил нужно нажать кнопочку Scan (сканирование занимает секунд 30, а то и меньше). На первый взгляд кажется что это расширение сканирует только одну страницу, что же делать с остальными страницами спросите Вы. А помните мы сохраняли карту сайта с помощью расширения Dust Me Selectors, правда если на проверяемом сайте есть html карта сайта, то использовать лучше ее, если же ее нет то создайте новую страничку сайта и вставьте карту сайта с расширения Dust Me Selectors (если нет возможности создать новую страницу то об этом ниже).

Сейчас я опишу последовательность действий для сканирования:

  1. открываем html карту сайта
  2. нажимаем F12 — открывается FireBug
  3. переходим на вкладку CSS Usage
  4. нажимаем кнопку AutoScan
  5. обновляем страницу (нажимаем F5)

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

В самом начале просканированной страницы указываются следующие обозначения:

  • Line — строка правила
  • CSS Selector — CSS правило
  • Seen — используемое CSS правило (светло-зеленым цветом)
  • Seen before — правила CSS которые использовались ранее (темно-зеленым цветом)
  • Unseen — неиспользуемые CSS правила (красным цветом)
  • :hover — CSS правила для элементов, которые получили фокус (серым цветом)
  • (2 scans) — показывается количество сканирований (если Вы просканировали тока одну страницу то соответственно будет цифра 1)
  • export cleaned css — сохранить результат сканирования

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

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

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

Когда все страницы будут просканированы кликните на ссылку export cleaned css , результат откроется в новой вкладке, выделите все и сохраните в файл с раширением.css , перед каждым неиспользуемым правилом будет указан тег UNUSED:

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

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

Я его применял для оптимизации двух файлов стилей общим весом в 360Кб — 18000 строк, я был в шоке когда это увидел. После всех махинаций с помощью этого метода получился один файл стилей — 90Кб и 1100 строк, результатом остались все довольны, и я тоже. Правда решение искалось долго, в следующий раз все будет на много быстрее, что очень радует.

Чуть не забыл. Что делать если создать страницу с картой сайта не представляется возможным? В этом случае в адрессную строку Вам придется вставлять каждую ссылу с карты сайта ручками и все будет отлично срабатывать.

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

Еще отмечу, что платный сервис присылает результат сканирования в течение 24 часов, а если на Вашем сайте (ресурсе) 10 или 20 шаблонов страниц, то Ваша проверка займет на много меньше времени, чем Вы потратите чтобы дождаться от них результата. Но, если на сайте огромное количество страниц и для них используются разные шаблоны, конечно целесообразно заплатить какието 25$ за такую услугу.

Надеюсь Вам окажется полезным такой метод проверки Вашего файла стилей.

Данная статья — первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset .

Зачем это нужно?

Например, вы используете элемент a в вашем документе. Большинство браузеров, как Internet Explorer и Firefox, добавляют ссылке синий цвет и подчёркивание . Однако представьте, что через пять лет кто-то решил создать новый браузер (назовём его UltraBrowser). Разработчикам браузера не нравился синий цвет и раздражало подчёркивание, поэтому они решили выделять ссылки красным цветом и полужирным шрифтом . Именно исходя из этого, если вы установите базовое значение стилей для элемента a , то он гарантированно будет таким, каким вы хотите его видеть, а не как предпочитают его отображать разработчики UltraBrowser.

Но теперь у нас вообще нет никаких отступов, в том числе между отдельными параграфами! Что делать? Не врать и не бояться: ниже нашего сброса мы опишем нужное нам правило. Сделать это можно разными способами: указать отступ снизу или сверху параграфа, указать его в процентах, пикселях или в em.

Самое главное, браузер теперь играет по нашим правилам, а не мы по его. Я решил сделать подобным образом:

В итоге у нас получилось то, что можно увидеть в третьем примере .

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

Чтобы помочь вам правильно сделать выбор, приведу ещё пару ссылок:

  1. Less is more — my choice of Reset CSS (Эд Эллиот).

2. Ваш CSS Reset — это первое, что должен увидеть браузер

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

Некоторые могут задать логичный вопрос: почему так происходит? Ответ прост: правила, записанные ниже по тексту CSS-файла (и даже ниже по их порядку подключения в документе), перезаписывают правила, объявленные ранее.

Давайте не будем сильно отходить от темы и продолжим. Применим стили Эрика Мейера к нашему примеру, но после описания наших свойств, как показано в 4 примере . Математики бы сказали следующее: «Что и требовалось доказать».

3. Используйте отдельный CSS-документ для CSS Reset

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

4. Старайтесь избегать использование универсального селектора

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

5. Избегайте избыточных описаний свойств при использовании CSS Reset

Вернёмся к CSS Reset от Эрика. Он устанавливает значения по умолчанию для line-height, color и background элемента body следующим образом:

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

Эрик Мейер по этому поводу сказал следующее: «это не тот случай, когда всем следует использовать CSS Reset без изменений».

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

Еще одна причина, по которой не так часто урезают правила – просто неудобно искать и удалять неиспользуемые стили в чем-либо, что больше маленького веб-проекта. Если контент не статичен, как понять, какие правила используются и где?

Инструмент разработчика Chrome

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

Что нужно сделать для проверки стилей на сайте:

Откройте интересующий сайт

Откройте панель разработчика

Перейдите на вкладку audits

Выберите опцию Web Page Performance и запустите

В части результатов будет «Remove unused CSS rules». Если этого нет, значит, у вас нет неиспользуемых стилей. Поздравляю! Результат разбит по стилям. Разбивка не просто по файлам, а по блокам style. Реально полезная функция, так как нам нужны только те стили, которые писали мы. По крайней мере, в рамках этой статьи.

Хорошо ли это?

Я не нашел супер простого способа экспортировать результат из Chrome. Можно копировать прямо из блока, но его сначала нужно развернуть. Это делает разбор результатов немного неудобным. Запуск теста в браузере еще дальше отталкивает нас от работы с кодом, что, возможно, приведет к тому, что мы будем забывать тестировать сайт.

Вывод: для начала полезно, но не долгосрочное решение.

UnCSS

Для поиска неиспользуемых стилей можно задействовать инструменты командной строки. UnCSS – интересный экземпляр. Он вытягивает страницу через phantomJS и ловит стили, вставленные через JS. Я очень хотел попробовать этот инструмент, так как он решал мою проблему, ведь панель разработчика Chrome совсем не связана с редактированием кода. С помощью UnCSS результат можно сохранить прямо в файл, идеально.

Установка

У меня не получилось выполнить npm install uncss на Ubuntu. Ничего серьезного, оказалось, я забыл пару зависимостей. Команды для установки недостающих библиотек, которые я запускал:

sudo apt-get update sudo apt-get install build-essential chrpath libssl-dev libxft-dev sudo apt-get install libfreetype6 libfreetype6-dev sudo apt-get install libfontconfig1 libfontconfig1-dev

sudo apt — get update

sudo apt — get install build — essential chrpath libssl — dev libxft — dev

sudo apt — get install libfreetype6 libfreetype6 — dev

sudo apt — get install libfontconfig1 libfontconfig1 — dev

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

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

Использование командной строки

uncss http://your-site.foo/ > unused-styles.css

uncss http : //your-site.foo/ > unused-styles.css

Результат разбивается на стили сайта your-site.com и браузер Chrome, но хранятся в одном файле. На моем сайте есть шрифт font-awesome, и все иконки, которые не используются на домашней странице, попали в вывод UnCSS. Сейчас мне это неважно. Их можно спрятать, если запустить команду еще раз и указать ignoreSheets.

Обратите внимание, что ignoreSheets может принимать строку (полный URL стиля, который нужно проигнорировать) или регулярное выражение. С регулярным выражением проще, так как там меньше символов, и оно покрывает возможные изменения в пути к файлу.

Вот такое сообщение об ошибке выскакивает при таймауте страницы. Таймаут можно увеличить с помощью -t N, где N – количество миллисекунд (не ставьте –t 360, чтобы потом удивляться, почему код не подождал 5 минут).

Вывод: UnCSS удобнее, так как ближе к месту, где я редактирую стили. Выходной файл полезен при исключении ненужных стилей. Я вижу ему применение из-за опции –includeSheets, которая автоматически игнорирует все, что попало под регулярное выражение. Удобно для, например, сайтов в WordPress, где различные плагины могут подтягивать свои стили, но разработчику нужны только стили темы style.css и т.д.

Какой инструмент использовать?

Сначала я выбор отдал UnCSS и удобной командной строке. Однако пока я писал эту статью, я попробовал их на еще паре сайтов и получил менее перспективные результаты. В частности, у меня есть несколько сайтов, созданных пару лет назад, на которых используется фреймворк, где задействованы постоянные комментарии /*!*…*/. Они плохо работают с PostCSS, поэтому и с UnCSS. Я еще не вникал в проблему, но, возможно, более новая версия PostCSS прощает такие комментарии. Тем не менее, прямо сейчас это стало еще одним барьером, и я не могу полностью использовать UnCSS в своей работе.

Добавить комментарий