Как осуществить рефакторинг CSS?

Question

[zxmd]

Здравствуйте.

Хотел бы описать ситуацию и спросить какие есть идеи по этому поводу.

Ситуация такая: в проекте более 100 css и более 40 js файлов, при этом есть некоторые т.н. common.css и common.js файлы в которых более 5000 строк. При этом большая часть css строк не используется нигде, это так сказать историческое наследие, которое лежит "чтобы не сломать авось ничего". Стили из разных файлов пересекаются и дополняют/перегружают друг друга. Все держится на соплях и изменение какого-либо стиля может повлечь цепь изменений в отображении в разных местах сайта. Короче - АД фронтендщиков, в который они сами себя и загнали.

Я не frontend технолог, сугубо сервер сайд, но есть задача - как-то распределить и спрогнозировать работы по оптимизации и общему рефакторингу морды. Посему - хотел поинтересоваться, как сейчас модно делать, чтобы в будущем проблем было поменьше. Честно говоря, я даже ничего не могу придумать сам, кроме радикального "берем grunt и переделываем с нуля". Скорее всего, есть какие-то инструменты, которые пройдутся по всему сайту и скажут, какие стили юзаются, какие нет. Хотя бы от исторического наследия избавиться.

Answer 1

[Константин Величко]

Попробуйте прогнать через CSSO

Слияние блоков с одинаковыми селекторами
Слияние блоков с одинаковыми свойствами
Удаление перекрываемых свойств
Удаление перекрываемых shorthand-свойств
Удаление повторяющихся селекторов
Частичное слияние блоков
Частичное разделение блоков
Удаление пустых ruleset и at-rule

Comments

[sumanai]

И как это потом поддерживать?

[Константин Величко]

@sumanai Об этом надо было думать раньше

Answer 2

[Иван Доброславин]

Я думаю, что если даже объединить, как посоветовал Константин, всё равно где-то что-то поедет, причём сразу не заметишь. Переверстать с нуля - идеальный и, пожалуй, оптимальный вариант.