Предположим, у меня есть какая-то HTML-страница и соответствующий CSS-файл. Я хотел бы добавить закругленные углы к некоторым элементам. Я хочу чередовать цвета фона на каждом другом разделе. Я хочу добавить состояние наведения для каждого заголовка раздела. И так далее - я продолжаю укладывать, укладывать и укладывать.
Мне приходит в голову, что существует три крайности, когда речь идет о том, «кто, что, когда, где, почему и каким образом» распространять правила CSS по разметке по классу, идентификатору и иерархии.
Extreme # 1: Каждое правило стиля основано на идентификаторе.
Extreme # 2: Каждое правило стиля основано на классе.
Extreme # 3: Каждое правило стиля основано на иерархии DOM.
Очевидно, что дзен интерфейсной веб-разработки будет включать в себя разумный баланс повторного использования классов в сравнении с уникальными правилами и иерархией, поскольку любая из трех крайностей может нанести ущерб производительности браузера, удобству обслуживания и размеру кода. Я думаю. Или я не прав? Как определить, когда необходим новый .class или правила, которые вы хотите применить, могут быть безопасно вписаны в существующее определение? Когда два #id правила достаточно похожи, чтобы вы могли вытянуть общий код в класс? Когда вы «разветвляете» класс (иногда вы сохраняете оригинал и добавляете производные для всех отклоняющихся ситуаций («percolate» в терминах ООП), а в других случаях подталкиваете общие правила к каждому из нескольких непересекающихся отклонений - очевидно, это зависит характер (т. е. количество задействованных правил) в самом отклонении). Есть ли просто обстоятельства для использования чисто иерархических правил?
Вопрос: Существуют ли какие-либо практические правила, регулирующие такого рода дебаты? Каков ваш опыт и / или совет? Существуют ли хорошие статьи, ресурсы, книги, лекции (бонусные баллы за видео в стиле «технические разговоры») или другой контент по этой теме? Я хотел бы, чтобы обсуждение было основано на нескольких ключевых моментах (хотя любые комментарии приветствуются), в произвольном порядке:
- Поддержка (простота чтения, изменения и добавления кода)
- СУХОЙ (не повторяйся)
- Эффективность времени (время загрузки; прогрессивный рендеринг)
- Эффективность использования пространства (общий размер разметки и связанных стилей)