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

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

Пример, который мне нравится: http://getbootstrap.com/components/ (добавлено в 2015 г.)

Еще одно преимущество этого метода - возможность многократного использования: вы знаете, что у вас есть, и знаете, что хотите, чтобы руководство по стилю было как можно меньше - поэтому: повторное использование.

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

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

Используйте руководство по стилю в качестве модульного теста. Как только вы получите в нем важные части: сокращение, рефакторинг и комбинирование (вы, скорее всего, найдете некоторые коллизии между .campaign_1 span и вашими обычными правилами, наследование может быть вашим другом).

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

В ответ на комментарий Адриано Вароли Пьяцца и приведенную выше цитату: Я не помню, что это проблема, полностью относящаяся к CSS, но больше к разметке HTML. Что бы вы ни делали, это будет тяжелая работа. Решите, какое правило вы хотите сохранить, и примите меры по удалению менее используемых; например: через наследование: #news a .header { ... } или переименование HTML-класса a .stand_out_header { ... }.

О следующей идее

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

Вместо этого используйте содержащий элемент, который будет намного проще поддерживать:

<div id="widget_email">
  <h2>One type of h2</h2>
</div>
<div id="widget_twitter">
  <h2>Another h2</h2>
</div>

Я обнаружил, что метод «размещения имен» и ограничения конфликтов в CSS разделен на разные, включая то, что вы хотите применить, поэтому каждая страница вызывает только то, что ей нужно. Затем конфликтующие правила можно сделать более конкретными, просто определив их более конкретно, включая:

• general css for all pages
  • css for pages in section A
  • css для страниц в разделе B

Поэтому, если вы обнаружите, что модификация .header, которую вы добавили в общий CSS, работает в A, но не работает в B, вы просто перемещаете ее в нижний файл CSS.

Да, это означает, что нужно загрузить больше файлов. Есть способы обойти это с помощью серверных языков, например, прочитать все файлы с помощью php и отправить только один блок контента.