Большой CSS против большого HTML

Question

Лучше ли ограничивать HTML несколькими классами и идентификаторами и поддерживать размер HTML-кода с низким значением ИЛИ, лучше использовать много вложенных CSS.

Это те преимущества, которые я могу придумать для обоих.

Преимущества использования нескольких вложенных правил CSS:

• Меньшие CSS файл
• Эффективное адресности элементов внутри CSS
• Возможно быстрее рендеринга раз в CSS (не уверен в этом)

Преимущества использования множества вложенных правил CSS:

• Малый размер HTML по всему сайту
• CSS получает кэшируются
• Лучше организации кода (я использую меньше)

Спасибо.

Answer 1

Я бы поспорил с большим CSS по большому HTML в любой день. Ваш CSS будет кэшироваться, поэтому ваши страницы будут загружаться намного быстрее с меньшим HTML. Больше классов означает большую гибкость, но вы будете удивлены, сколько вы можете выполнить с помощью селекторов CSS. Единственный раз, когда я просматриваю HTML-код как что-то полезное для SEO; см. microformats для примера того, что я имею в виду.

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

Answer 2

Определенно согласен с Wex кэширования повторно CSS (больше CSS, меньше HTML)

Что касается Вашего вопроса о

ли лучше ограничить мой HTML как несколько классов и идентификаторов, как это возможно и сохраните размер HTML маленького ИЛИ, лучше использовать множество правил вложенных CSS .

С точки зрения производительности рендеринга это на самом деле выгоднее использовать плоские (одноуровневые) селекторы из-браузеров двигателей, соответствующих их справа налево т.е. предпочитают .list-item-first к ul li:first-child - это менее управляемым с Maintanance точки зрения, но приводит к незначительно лучшей производительности. В то же время вы редко видите разницу в таблицах с разумным размером, поэтому это скорее вопрос предпочтения.

More on css rendering performance

Answer 3

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

«редко использую местоположение в зависимости от стиля». Объект должен выглядеть одинаково независимо от того, где вы его положили. Таким образом, вместо укладки конкретного <h2> с .myObject h2 {...}, создать и применить класс, который описывает <h2> в вопросе, как <h2 class="category">.*

Чтобы увидеть более подробное обсуждение того, почему с помощью CSS селекторов может быть ограничение .. видеть мой ответ here.