2

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

Цель: ко мне пришел свежий проект на доверстку. У меня есть потенциально 2 варианта:

  1. доверстывать свои стили
  2. сопровождать стили предыдущего верстальщика

Я хочу пойти по пути 2.

При этом, так как я хочу делать модификации в возможно используемых CSS классах, я бы хотел понимать, на каких страницах сайта отразится мое изменение.

6
  • 1
    Какую реальную задачу вы решаете?
    – etki
    7 апр 2015 в 12:08
  • Странный запрос, но... Доступ к стилям у JS есть и через document.styleSheets. Там можно что-нибудь придумать.
    – user31688
    7 апр 2015 в 12:16
  • Хороший вопрос. У человека есть кучу css кода, в какой-то момент он хочет подправить конкретное правило, приминяемое на исследуемой странице. НО он не знает как его правки повлияют на другие страницы (коих может быть тысячи), где данное правило тоже используется. Причём может частично. И так каждую правку сомневаешься - убъёт она остальную вёрстку или нет.
    – disfated
    7 апр 2015 в 12:54
  • @disfated или просто покалечит :-) 7 апр 2015 в 13:14
  • Наверное придется тупо скачивать сайт телепортом и дальше искать каждый класс руками через поиск по файлам. 7 апр 2015 в 13:15

4 ответа 4

1

Нашёл такое поделие https://github.com/darul75/grunt-css-usage

Задуман как решение поставленного вопроса.

Принимает HTML файлы сайта (придётся предварительно сграббить весь сайт) и список CSS файлов.

Проект сырой, не показывает где именно правила использовались (хотя это легко исправить), очевидно будут проблемы со всякими :nth-of-type, :before и пр., ну и на больших сайтах страшно представить сколько он будет отрабатывать...

Хотя, если переписать, чтобы он искал не все правила всех стилей, а только одно правило, интересное верстальщику, вполне годно может выйти...

0

А не хотите просто свои стили дописывать как модификаторы к имеющимся? Например, есть класс myCustomClass и чтобы его модифицировать, вы смело можете применить модификатор типа: myCustomClass_size-small

4
  • Самое интересное начнётся когда следующий верстальщик решит поступить также :)
    – disfated
    7 апр 2015 в 13:32
  • :) Если проект на БЭМ - то норм, иначе, конечно, винегрет будет, в каком то итоге.
    – Special
    7 апр 2015 в 13:35
  • Если проект на БЭМ то такого вопроса бы не возникало
    – disfated
    7 апр 2015 в 13:40
  • +100500 к твоему комменту :)
    – Special
    7 апр 2015 в 13:47
0

Для Firebug на Firefox есть расширение "css usage". Оно показывает неиспользуемые селекторы. Можно просмотреть несколько страниц и там покажет какие селекторы были хоть раз задействованы, а какие нет.

-1

Ctrl+U на странице в Google chrome, смотрите в head ссылку на css.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.