Как вычистить css — неиспользуемые классы?

Question

[Константин]

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

Answer 1

[Игорь Воротнёв]

https://github.com/addyosmani/grunt-uncss
https://github.com/giakki/uncss

Comments

[Иван]

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

[Игорь Воротнёв]

c64: например? "многие сложные селекторы" - слишком абстрактно как-то. К тому же, если много слишком сложных селекторов - это тревожный звоночек. Архитектуру пересматривать надо.

[Андрей Соколов]

uncss удалит все классы, что добавляются динамически на странице с помощью js например, классы - active, disabled etc. Он посчитает их не нужными, хотя они могут быть использованы для указания разных состояний элементов.

[Иван]

Андрей Соколов: непонятно, зачем ему тогда PhantomJS

[Иван]

Игорь Воротнёв: к сожалению, не могу ссылку найти - где-то указывалось, какие селекторы движок не умеет

[Андрей Соколов]

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

[Игорь Воротнёв]

Андрей Соколов: Вы документацию читали? Есть параметр 'ignore', куда прописываете те селекторы, которые нельзя вырезать (поддерживает как конкретно селекторы, так и регулярки). Можно также перед селектором в CSS добавить коммент /* uncss:ignore */

[Игорь Воротнёв]

Андрей Соколов: регулярки в 'ignore' решают данную проблему очень просто. Для классов-модификаторов, которые используются скриптами, добавляйте префикс js- и его же игнорируйте регуляркой. Вот и все.

[Андрей Соколов]

Игорь Воротнёв: Воу воу, полегче :) Почитаю про игнор, спасибо за инфу.

[Игорь Воротнёв]

Андрей Соколов: ну а чё, RTFM же :)

Answer 2

[terabait]

Дополнение Dust-Me Selectors для FireFox - анализирует 10 страниц сайта и выдает все неиспользуемые селекторы в CSS, после чего можно скачать готовый CSS файл.

https://addons.mozilla.org/ru/firefox/addon/dust-m...

Answer 3

[Stac]

Расширение для Chrome: CSS remove and combine создает новый css удаляя неиспользуемые правила.

Comments

[Andre Bodre]

It doesn't work with @ import, it just ignores it. Also, @ media rules are also ignored.

[Stac]

So, ignore those @s too. Clear your css, then you opt to add some junk to it. Again. :)

Answer 4

[lnked]

Добавьте в код вот такой span и uncss будет работать как надо

<span class="disabled active any-class" style="display: none"></span>

Comments

[Андрей Соколов]

Он не будет работать если будет так - .someClass .active { etc... } в CSS

Answer 5

[edu30151]

А как быть с теми классами которые добавляет js? Ведь эти же классы будут считаться неиспользуемыми... Есть какие нибудь соображения на этот счет?