Есть ли способ найти неиспользованный CSS на веб-сайте?

Ответ 1

Dust-me Selectors - это плагин Firefox, который находит неиспользуемые селекторы.

Ответ 2

Я просто столкнулся с этим и вспомнил ваш вопрос: http://github.com/geuis/helium-css

Ответ 3

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

Используйте CSS reset.

Попробуйте удалить действительно общие инструкции CSS, такие как h1 {} и #container em {}. Вам гораздо лучше использовать h1.section-title и #container em.important {}, потому что таким образом, если вы решите использовать h1 или em по-другому в своем документе, вам не нужно беспокоиться о переопределении любого существующего кода.

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

Ищите общие черты в вашем CSS и посмотрите, можете ли вы создавать классы повторного использования. Если у вас есть аналогичные блоки class="favorites" и class="popular", переведите его в class="block block-favorites" и class="block block-popular" и поместите общие черты в .block.

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

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

Вы были бы удивлены, насколько сильно ваш код выглядит при реализации более мощных селекторов CSS. Большинство из них совместимы с несколькими браузерами (Internet Explorer 7 и более поздние версии).
Некоторые ценные ресурсы: Когда я могу использовать... - Режим Quirks в CSS-селекторах - w3 в CSS-селекторах

Ответ перешел из:
Рекомендации по очистке существующих CSS/неиспользуемых стилей

Ответ 4

Chrome 59 имеет встроенный экран покрытия для CSS и JavaScript с 2017-04: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Вы можете включить его, открыв инструменты dev, затем меню команд (Cmd+Shift+P на Mac или Ctrl+Shift+P в Windows и Linux), а затем введите "show coverage".