Как удалить лишние селекторы CSS?

Question

[Евгений Михайлов]

Есть html файл 1.хтмл к нему есть CSS файл 2.цсс. В 2.цсс много лишних селекторов которые не используются в документе 1.хтмл . Какой сервиса автоматически при закрузке этих двух документов удалит ненужные селекторы?

Answer 1

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

www.cleancss.com
https://github.com/peterbe/mincss
Лично я предпочитаю эту процедуру, как и многие другие в процессе работы, выполнять с помощью волшебного Grunt - https://github.com/addyosmani/grunt-uncss

Comments

[dobromin]

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

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

dobromin: Какие еще проблемы? Уже ж сто лет как все перешли на UTF-8 и проблемы кодировок остались в прошлом

[dobromin]

Игорь Воротнёв: C:\Windows\system32>mincss modx.local
TROUBLEMAKER
'*: before'
TROUBLEMAKER
'a[href^="javascript'
TOTAL TIME 1.1700634956359863
FOR ./main/css/style.css
Traceback (most recent call last):
File "c:\program files (x86)\python36-32\lib\runpy.py", line 193, in _run_modu
le_as_main
"__main__", mod_spec)
File "c:\program files (x86)\python36-32\lib\runpy.py", line 85, in _run_code
exec(code, run_globals)
File "C:\Program Files (x86)\Python36-32\Scripts\mincss.exe\__main__.py", line
9, in
File "c:\program files (x86)\python36-32\lib\site-packages\mincss\main.py", li
ne 69, in main
return run(args) or 0
File "c:\program files (x86)\python36-32\lib\site-packages\mincss\main.py", li
ne 41, in run
f.write(link.before)
File "c:\program files (x86)\python36-32\lib\encodings\cp1251.py", line 19, in
encode
return codecs.charmap_encode(input,self.errors,encoding_table)[0]
UnicodeEncodeError: 'charmap' codec can't encode character '\xd7' in position 26
2269: character maps to

C:\Windows\system32>

Win 8.1

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

dobromin: А что у вас математический символ умножение делает в CSS? Его там изначально быть не должно.

[dobromin]

Игорь Воротнёв: не мой css вот пытаюсь привести к виду. вторая проблемка
Игорь Воротнёв: другой шаблон
C:\Windows\system32>mincss modx.local
TOTAL TIME 0.20171165466308594
FOR ./main/css/style-blogs.css
Files written to ./output

(from 3950 to 1747 saves 2203)

Казалось бы с работал, но сработал только при первом запуске после удаление созданный файлов снова не появляются, запуск от админа!

[dobromin]

Игорь Воротнёв: Про математический как узнали? где найти?

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

dobromin: Учитесь читать ошибки. У вас там:

> codec can't encode character '\xd7'

Слеш отбрасываете, гуглите xd7. Получаете вот: www.codetable.net/hex/d7
Далее ищете где он у вас встречается и спрашиваете себя зачем.

Что касается второго случая - вопрос не совсем понятен. Вы выполнили команду, файлы создались. Все ок. Вы удалили файлы. Запустите команду заново, чтобы файлы снова создались.

Answer 2

[Егор Трубников-Панов]

intellij IDEA умеет хорошо это делать, а еще оптимизирует эти самые стили.
Нужно выбрать пункт Analyze -> inspect Code на анализируемом документе и тебе выдаст все косяки, где можно автоматически сделать БА-БАХ!!!! лишних селекторов.

Comments

[dobromin]

как сделать автоматически бабах?

Answer 3

[zvorygin]

Chrome DevTools, вроде, умеют такое делать.

Comments

[Амаль Алтыбаев]

А можете подробнее если знаете? :) спасибо

[dobromin]

автоматически нет, если 3 4 тысячи "г" в ручную сломаешься.

Answer 4

[Владислав Раду]

Если желаете посмотреть - используйте инструменты разработчика Google Chrome(Audits-Run). Был случай, когда потребовалось удалить большое количество селекторов и я воспользовался автоматической программой:
Dust-Me Selectors - дополнение для FireFox.
Лучшего решения не нашел, все сработало быстро и качественно.

Comments

[dobromin]

автоматически нет, если 3 4 тысячи "г" в ручную сломаешься.