Как отрефакторить 17 тысяч строк CSS

[frizzyH]

А не пробовали использовать анализаторы CSS для поиска копипасты и неиспользуемых стилей? Как-то печально все это делать вручную.

[yarosf1]

Не пробовали, но там не совсем копипаста. Точнее не стопроцентная. Т.е. селекторы разные, но как-то подозрительно похожи (скопипастили, затем оба варианта отредактировали). Либо другой случай — визуальный эффект один, а селекторы совсем разные. Скажем, было много стилей синих ссылок, но где-то они были светлее, где-то темнее

[Alexufo]

Я бы начал с этого:
1) анализатор цветов с сайта www.colorfyit.com
2) Ну и дохлые стили почистить addons.mozilla.org/en-us/firefox/addon/dust-me-selectors

[yarosf1]

Неиспользуемых стилей-то было очень немного. Может, штук 30-40. Тысячу строк кода мы выиграли засчёт замены части специфичных классов на вспомогательные (это где только margins, paddings, и т.д.).
Наш дизайнер вначале пробовал другой подход. Сначала удалить весь CSS, затем по частям возвращать. В итоге вышло так, что 10% стилей используются на 90% страницах, оставшиеся 90% стилей на 10% страницах. А около трети так и вовсе используются всего лишь 1 раз.
Пробегаться плагином по полутора тысячам страниц весьма сложно. Да и что значит пробежаться? До части страниц вообще невозможно добраться нормальному человеку (могут быть отключены в настройках, которые сразу не найдёшь). Да и факт посещения страницы ничего не гарантирует — на ней может быть скрытый контент со специфичным CSS, который появляется не всегда, а при определённых обстоятельствах.
Наша главная проблема в том, что всего много. Страниц, стилей, настроек. А про редко используемые вещи уже мало кто помнит (как они работают).

С цветами тоже непросто. Могут почти совпасть семантически разные вещи. Либо слишком не совпасть похожие. Проще уж по коду — найти 15 гридов, посмотреть на их стили и подвести под одну гребёнку. Главное, что в качестве переходного периода можно хотя бы объявлять переменные и миксины в LESS, чтобы стили затем не разошлись.

[artemmalko]

Вам бы очень помогла БЭМ(BEViS)-нотация для названий классов. Инструменты использовать специализированные не обязательно, просто именование уже сильно поможет.

[yarosf1]

Мысли об этом были после того, как всё закончили. Но по факту мы лишь снабдили классы префиксами, точнее лишь малую часть классов. Я бы был куда больше счастлив, если бы люди хотя бы не забывали использовать префиксы в новых стилях. До БЭМ нам, видимо, ещё далеко.

[Chaptykov]

Кажется, что используя БЭМ, у вас получилось бы комфортнее вести сам рефакторинг. Заменять отдельные компоненты проекта без ущерба для работоспособности проекта. И так по блокам постепенно победить весь проект.

[aratak]

Сколько человеко-часов занял рефакторинг и какие изначально были оценки по времени? Сколько раз переносились сроки?

[yarosf1]

Это сильно зависит от проекта. Если серверный код неплох, то возможно. А вот если у вас даже базовая разметка (всё, что вокруг тэга body плюс заголовок) генерируется в 15-ти различных местах (по исторически сложившимся причинам), то быстро переписать это с нуля проблематично.
Хотя самая главная проблема — большое количество кода. Это сложно осознать, пока не достанется такой проект. Для вёрстки с нуля надо менять кучу страниц, стиль написания которых весьма сильно различен. На бытовом уровне бывает даже сложно понять, как через UI добраться до той или иной страницы. Их более полутора тысяч, но далеко не все из них ходовые.

[yarosf1]

Точно уже не помню, прошло много времени. Если совсем грубо, то несколько сотен часов. К тому же всё делалось постепенно. Рефакторинг с разбиением параллельно с изменением веб-морды (ну и с задачами, не имеющими отношения к UI в принципе). На LESS мы тоже перешли не сразу — где-то почти через год после начала рефакторинга.

[tamtakoe]

Хорошая статья для 2010 года, когда ни БЭМа не было ни Бутстрапа и на LESS начинали переходить.

[Mirantus]

Респект вашему дяде!

[Yavanosta]

Всегда используйте название селектора в коде полностью.

А ниже

@className: ~".ct-button-@{name}";

Как будто сами свои советы не читали.

[yarosf1]

То LESS, в CSS сгенерируется нормальное имя. Опять же ищут обычно не в CSS/LESS, а в коде, генерирующем разметку. Но вы правы, никто не мешает передавать в миксин имя целиком.