Мы используем руководство по стилю в виде простой HTML-страницы с примерами каждого правила CSS в таблице стилей.Очень просто сказать, добавляешь ли ты новое несовместимое правило, поскольку примеры выровнены друг над другом.
Пример, который мне нравится: http://getbootstrap.com/components/ (добавлено 2015)
Другим преимуществом этого метода является возможность многократного использования: вы знаете, что получили, и знаете, что хотите, чтобы руководство по стилю было как можно меньшим, поэтому: используйте повторно.
Когда вы вносите изменения в стили, уже внесенные вИспользование: проверьте руководство по стилю.Если оно не меняется, это, вероятно, хорошо (вам может понадобиться немного поискать, если вы только что что-то изменили, включая проблемы с блочной моделью или шириной, высотой, отступами, полями в целом).
Как перейти от устаревшего беспорядка CSS к очищенным, красиво каскадным таблицам стилей DRY?
Использовать руководство по стилю в качестве модульного теста .После того, как вы получили в нем важные части: уменьшите, измените рефакторинг и объедините (вы, скорее всего, найдете некоторые коллизии между .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 по сути FLAT, но мы не видим другого способа организовать наш код вперед, не сталкиваясь с устаревшими стилями или каскадными проблемами, о которых я упоминал выше.
Вместо этого используйте содержащий элемент, который будетгораздо проще в обслуживании:
<div id="widget_email">
<h2>One type of h2</h2>
</div>
<div id="widget_twitter">
<h2>Another h2</h2>
</div>