Рекомендации по разметке / стилю: как эффективно распределить правила стиля по классам CSS?

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

Мне приходит в голову, что есть три крайности, где это касается «кто, что, когда, где, почему и как» распределения правил CSS по разметке по классам, идентификаторам и иерархии.

Крайний край №1: Каждое правило стиля основано на идентификатор.

Крайний №2: Каждое правило стиля основано на классе.

Крайний этап №3: Каждое правило стиля основано на иерархии DOM.

Ясно, что дзен из Внешняя веб-разработка будет включать в себя здоровый баланс повторного использования классов, уникальных правил и иерархии, потому что любая из трех крайностей нанесет ущерб производительности браузера, удобству обслуживания и размеру кода. Я думаю. Или я не прав? Как узнать, когда необходим новый .class , или правила стиля, которые вы хотите применить, можно безопасно вписать в существующее определение? Когда два #id правила будут настолько похожи, что вам следует вынести общий код в класс? Когда вы «разветвляете» класс (иногда вы сохраняете оригинал и добавляете производные для всех отклоняющихся ситуаций («перколакат» в терминах ООП), а в других случаях вводите общие правила в каждое из нескольких несвязанных отклонений - очевидно, это зависит от характер (т.е. количество вовлеченных правил) самого отклонения). Существуют ли просто обстоятельства для использования чисто иерархических правил?

Вопрос: Существуют ли какие-то практические правила, регулирующие такого рода дебаты? Какой у вас опыт и / или совет? Есть ли там хорошие статьи, ресурсы, книги, лекции (бонусные баллы за видео в стиле «tech talk»), или другой доступный контент по теме? Я хотел бы, чтобы обсуждение было основано на нескольких ключевых моментах (хотя любые комментарии приветствуются), в произвольном порядке:

• Ремонтопригодность (простота чтения, изменения и добавления кода)
• DRY (Не Повторите себя)
• Эффективность использования времени (время загрузки; прогрессивный рендеринг)
• Эффективность использования пространства (объединенный размер разметки и связанные стили)