2010-11-03 2 views
7

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

Есть ли какие-либо инструменты, которые позволили бы мне сравнить CSS с целым сайтом, чтобы определить, какие селекторы необходимы, а какие нет?

На сайте есть компоненты AJAX, поэтому запись скрипта curl/wget для перемещения по сайту, а затем цикл через каждый селектор и grep для соответствия также не представляется возможным (хотя это было бы любопытно ...)

Все предложения приветствуются.

Спасибо, JD

+0

Я бы рекомендовал использовать «CSS компилятор», такие как SASS или LESS или любой другой. Хотя они не «оптимизируются», я нахожу, что древовидная структура, которую они позволяют, часто позволяет * мне писать лучшие CSS-селектора *, поскольку они помогают организовать и разбить CSS на лучшие логические единицы. – 2010-11-03 04:40:52

+0

спасибо @pst, я проверю это. вероятно, это не поможет в случае наследования унаследованного CSS, верно? –

+0

Часто я предпочитаю потратить несколько часов (или дней) на то, чтобы получить базу кода, которую можно использовать, чем месяцы, в то время как ее путают :-) SASS [в режиме SCSS] и LESS оба принимают правильную грамматику CSS, поэтому вы можете постепенно менять CSS. – 2010-11-03 05:37:13

ответ

2

Существует плагин Firefox под названием «Селекторы пыли».

https://addons.mozilla.org/en-US/firefox/addon/5392/

«Он извлекает все селекторы из всех таблиц стилей на странице, которую вы просматриваете, затем анализирует эту страницу, чтобы увидеть, какие из этих селекторов не используются. Затем эти данные хранятся таким образом, что при тестировании последующие страницы, селектора могут быть перечеркнуты из списка, как они встречаются ».

Это довольно ручной процесс, но может быть тем, что вы ищете.

+0

звучит многообещающе, я проверю это. Благодарю. –

+0

кажется немного багги, но лучший вариант доступен. Благодарю. –

1

Вы можете попробовать один из многих онлайн оптимизаторов, как этот:

http://www.cleancss.com/

Robson компрессор, видимо, делает лучшую работу объединения и удаления лишних селекторов.

http://iceyboard.no-ip.org/projects/css_compressor

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

+0

Спасибо @robert, похоже, что он удалит селектора, которые являются избыточными, потому что другой селектор в таблице стилей уже соответствует этому элементу, но я хочу, чтобы он сравнивал мою таблицу стилей с отображаемым (X) HTML и сказал мне, какие селекторы не имеют соответствия в HTML ... –

0

проверка CSS покрытия (расширение для Firebug) http://perishablepress.com/press/2010/06/21/how-to-micro-optimize-your-css/

На мой взгляд, лучше, чем пыль, мне selectcor

+0

Я не вижу расширение по этой ссылке, я что-то упускаю? –

+0

это где-то в этой статье, но здесь ссылка для вас https://addons.mozilla.org/en-US/firefox/addon/10704/ помните, что это расширение для firebug, поэтому, пожалуйста, установите firebug, если вы У меня есть –

+0

Привет, это сработало для вас? –

 Смежные вопросы

  • Нет связанных вопросов^_^