2008-11-12 3 views
23

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

Я бы очень хотел очистить все это, прежде чем двигаться дальше. Существует ли какой-либо инструмент, открытый исходный код или что-то еще, что может взять кучу html и css-файлов и перекрестно ссылаться на них, чтобы выделить крут в css?

ответ

21

Пробуйте Dust me Selectors подключаемый модуль для Firefox.

+0

Я построил маленький кусочек кода Java, который принимает выходную Csv от пыли меня, и удаляет эти стили из указанных таблиц стилей, и выводит чистый файл CSS , здесь: https://github.com/willwarren/cssclean – Will 2013-02-27 03:38:42

9

Когда у вас есть css, организованный в отдельные таблицы стилей, вы можете запустить код через онлайн-инструмент, чтобы убрать макет. Попробуйте один из них:

+4

Летающий. Я запрограммировал первое сообщение, указанное выше. – 2010-02-26 02:36:22

2

пылевые меня селекторы имеет почти такую ​​же функциональность, что мой jquery css cleaner имеет.

и это выглядит здорово

вы можете использовать свой плагин, если вы не имеете Firefox.

2

Я считаю, что есть! И я использую его все время. На самом деле, есть 2, и я собираюсь поделиться ими обоими с вами.

  1. Если вы хотите сгенерировать CSS автоматически из разметки онлайн бесплатно, то вам нужно это: http://beecss.theextremewebdesigns.com/

  2. Если у вас уже есть (грязный) CSS & вы хотите очистить/Минимизировать его онлайн бесплатно, то вам нужно это: http://beecss.theextremewebdesigns.com/css_clean_css_minify/

Я предпочитаю вышеуказанные инструменты, потому что я уже оценили другие очистители там & Я обнаружил, что другим не хватает функциональности в некоторых аспектах. Например, некоторые очистители полностью игнорируют несколько классов или просто захватывают первый класс. Они забывают, что следующий класс переопределит стили первого класса, и, следовательно, очень важно, чтобы все селекторы, созданные &, генерировали классы &. Я нашел только BeeCSS - CSS Generator, чтобы делать УДИВИТЕЛЬНУЮ работу! С тех пор я добавил в закладки как BeeCSS CSS Generator & BeeCSS Cleaner Minifier & использовать их во всех моих проектах. Я очень рекомендую их обоих.

Из моего опыта у меня есть это решение для вас.

  1. Просто скопируйте HTML в новую HTML страницу & сохранить его. Затем загрузите эту страницу HTML по адресу http://beecss.theextremewebdesigns.com/.Это даст вам только классы выбора &, которые были фактически использованы в документе. Поэтому, если у них есть избыточные стили в файлах CSS, вы можете легко избавиться от них таким образом.

  2. Затем просто выполните поиск классов & селекторов, которые BeeCSS, сгенерированные в вашем исходном файле CSS &, скопируйте эти стили в новый CSS, созданный BeeCSS. Таким образом, вы убедитесь, что ваш CSS теперь будет иметь только стили, используемые HTML-документом.

  3. В конце всей копии &, которую вы сделали на вышеуказанном шаге, вы обнаружите, что внешний вид стилей в CSS может быть беспорядочным. DONT начнет вручную их очищать. Я имею в виду, не пытайтесь исправить вкладки, пробелы и т. Д. Просто скопируйте все стили, как они есть, в BeeCSS - Cleaner Minifier на http://beecss.theextremewebdesigns.com/css_clean_css_minify/ &, затем нажмите кнопку «Очистить CSS». Это должно дать вам окончательный результат. Он будет содержать только классы выбора &, которые фактически использовались в документе HTML. Если вы хотите уменьшить размер CSS, просто сгенерируйте мини-версию вашего «нового» css, скопировав стили в BeeCSS Cleaner Miniifer &, нажмите кнопку «Минимизировать CSS».

выше шаги, которые я следую, когда я работаю над своими проектами & они работают абсолютно отлично подходит для меня. Удивительность BeeCSS заключается в том, что и CSS-генератор & Cleaner Minifier совершенно бесплатно & Простой в использовании & вы можете создавать/очищать CSS онлайн в течение нескольких секунд. Вам не нужно устанавливать какие-либо расширения, приложения и т. Д. Таким образом, вы не будете загружать свой браузер неуклюжими расширениями, и вам не нужно ждать часов, чтобы завершить процесс. Вы будете выполняться в секундах, если будете следовать моим инструкциям (за исключением части, копирующей стили).

Надеюсь, что это поможет.

0

На Sourceforge появился новый сканер CSS. Он ищет коды css, html, aspx, php, javascript и jquery для используемых и неиспользуемых селекторов и классов css/stylesheet. Это может быть именно то, что вы хотите. Он работает под Windows (так как это код .net). Это это URL, если вы хотите иметь вид: http://sourceforge.net/projects/cssscanner/

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