Как удалить CSS-спагетти в устаревшем веб-приложении?

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

Как перейти от устаревшего беспорядочного CSS к очищенным, красиво каскадным, СУХИМ таблицам стилей?

В приложении, над которым я сейчас работаю, есть 12000 строк CSS. Это' выросли до этого размера органически, так как на раннем этапе не было стандартов или пересмотра CSS, единственным правилом было заставить приложение соответствовать дизайну. Некоторые из проблем, с которыми мы постоянно сталкиваемся:

• Конфликт стилей: один разработчик добавляет .header {font-weight: bold;}, но .header уже использовался в других модулях и не должен выделяться в них жирным шрифтом.

• Каскадирование проблемы: у виджета Foo есть .header, но он также содержит список виджетов Bar с классами .header.

  • Если мы определим .foo .header {...} и .bar .header {...} что-нибудь неявно перезаписанный в foo, будет отображаться в строке.
  • Если мы определим .foo> .header и .bar> .header, но позже потребуется изменить foo, чтобы обернуть заголовок в div, наши стили сломаются.

• Проблемы с наследованием, мы постоянно переопределяйте шрифты виджета на 11 пикселей / нормальный, потому что некоторые верхние контейнеры используют высоту строки 12 пикселей / 18 пикселей.

• Борьба с библиотеками виджетов с использованием таких библиотек, как dojo / dijit или jquery ui, которые добавляют массу стилей для обеспечения работоспособности, означает, что наш код завален местами, в которых мы должны переопределить стили библиотеки, чтобы все выглядело правильно. Существует ~ 2000 строк CSS только для настройки встроенных стилей dijit

Мы находимся на этапе, когда мы думаем о реализации следующих правил:

Пространство имен все новые классы виджетов - если у вас есть widget foo все имена подклассов будут .foo_, поэтому мы получим: .foo, .foo_header, .foo_content, .foo_footer. Это делает наш css по существу ПЛОСКИМ, но мы не видим другого способа организовать наш код в будущем без столкновения с устаревшими стилями или каскадными проблемами, о которых я упоминал выше.

Универсальные стили Police - имеют небольшое количество общих классов, которые могут применяться только в очень специфических ситуациях. например .editable - применяется к частям предложения, которые должны вызывать редактор - должны содержать только текстовые узлы.

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

Как еще мы можем перейти от беспорядка css, который постоянно приводит к регрессам, к чему-то поддерживаемому в будущем.