Как определить неиспользуемые определения CSS из нескольких файлов CSS в проекте
Была загружена куча файлов CSS, и теперь я пытаюсь немного поправить ситуацию.
Как я могу эффективно идентифицировать неиспользуемые определения CSS во всем проекте?
Этот вопрос обсуждается на Мета.
Ответы 3
Инструменты разработчика Chrome имеет вкладку Аудит, которая может отображать неиспользуемые селекторы CSS.
Проведите аудит, затем под Производительность веб-страницы см. Удалите неиспользуемые правила CSS
это круто, но жаль, что вы не можете запустить его на группе страниц (в противном случае неиспользованные правила CSS могут быть неизбежны)
Я запускаю инструмент аудита, и он показывает мне неиспользуемый CSS, но как тогда его использовать? Нужно ли мне вручную искать каждый элемент и удалять его?
будет ли аудит происходить с текущей страницей или со всеми страницами сайта?
Это только текущая страница. В нем говорится: «2445 правил (83%) CSS не используются на текущей странице», так что это не очень полезно.
Когда вы расширяете элемент, вы получаете список фактически неиспользуемых правил. Хотя это бесполезно на сайтах, где вы меняете DOM на лету.
Похоже, эта функция удалена теперь, когда Google-Chrome заменил аудит на Google Lighthouse.
это больше невозможно. Chrome теперь использует lighthouse и не показывает, какие правила CSS на самом деле больше не используются.
На самом деле это только что переместили в охват - перейдите в аудиты -> рядом с Консолью внизу есть меню (меню типа с тремя вертикальными точками), и вы можете выбрать там покрытие. Просто нажмите запись и переходите.
Голосование против, потому что на сегодняшний день это неточно.
Также вы должны быть осторожны с этим. Некоторые элементы, такие как: hover, отображаются как неиспользуемые до того, как вы действительно наведете курсор на элемент. Также существует вероятность того, что элементы HTML загружаются динамически -> Audit считает, что они не используются.
Я только что нашел этот сайт - http://unused-css.com/
Выглядит неплохо, но мне нужно будет тщательно проверить полученный «чистый» CSS, прежде чем загружать его на любой из моих сайтов.
Также как и все эти инструменты Мне нужно было бы проверить, что он не удаляет идентификаторы и классы без стиля, но используются в качестве селекторов JavaScript.
Приведенный ниже контент взят из http://unused-css.com/, поэтому имейте в виду, что они рекомендуют другие решения:
Latish Sehgal has written a windows application to find and remove unused CSS classes. I haven't tested it but from the description, you have to provide the path of your html files and one CSS file. The program will then list the unused CSS selectors. From the screenshot, it looks like there is no way to export this list or download a new clean CSS file. It also looks like the service is limited to one CSS file. If you have multiple files you want to clean, you have to clean them one by one.
Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered. This tool is supposed to be able to spider a whole website but I unfortunately could make it work. Also, I don't believe you can configure and download the CSS file with the styles removed.
Topstyle is a windows application including a bunch of tools to edit CSS. I haven't tested it much but it looks like it has the ability to removed unused CSS selectors. This software costs 80 USD.
Liquidcity CSS cleaner is a php script that uses regular expressions to check the styles of one page. It will tell you the classes that aren't available in the HTML code. I haven't tested this solution.
Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and lists which can be "safely" deleted. This tool is a ruby module and will only work with rails website. The unused selectors have to be manually removed from the CSS file.
Helium CSS is a javascript tool for discovering unused CSS across many pages on a web site. You first have to install the javascript file to the page you want to test. Then, you have to call a helium function to start the cleaning.
UnusedCSS.com is web application with an easy to use interface. Type the url of a site and you will get a list of CSS selectors. For each selector, a number indicates how many times a selector is used. This service has a few limitations. The @import statement is not supported. You can't configure and download the new clean CSS file.
CSSESS is a bookmarklet that helps you find unused CSS selectors on any site. This tool is pretty easy to use but it won't let you configure and download clean CSS files. It will only list unused CSS files.
просто обратите внимание, что unused-css.com не позволяет вам загружать CSS, если вы не являетесь платным участником, а самый дешевый план начинается с 29 долларов в месяц! мне кажется немного дороже за услугу
Я бы добавил в смесь purifycss github.com/purifycss/purifycss. Он бесплатный, довольно популярный (по оценкам звезд в github) и работает с одностраничными приложениями.
Инструменты разработчика Google Chrome имеют (в настоящее время экспериментальную) функцию под названием Обзор CSS, которая позволит вам находить неиспользуемые правила CSS.
Чтобы включить его, выполните следующие действия:
- Откройте DevTools (Command + Option + I на Mac; Control + Shift + I в Windows)
- Перейдите в настройки DevTool (функция + F1 на Mac; F1 в Windows)
- Нажмите, чтобы открыть раздел "Эксперименты".
- Включите опцию Обзор CSS
возможный дубликат Как найти на веб-сайте неиспользуемые изображения и стили CSS?