Сколько классов, добавленных в элемент html, слишком много?

Question

Мне очень нравится новый интерфейс Metro, поэтому я делаю демонстрационный сайт, использующий плитки и сетки на основе Metro UI.

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

Я начинаю с размера и цвета плитки. Я хочу иметь десятки разных размеров, и я хочу, чтобы они были созданы легко. Сейчас я создаю классы по ширине и высоте отдельно, а также классы для каждого цвета, а затем у меня есть граница для зависаний и фокусов для всех селекторов цветов.

Это то, что мой HTML выглядит так далеко:

<div id="tile-wrap"> 
    <div class="std red"></div> 
    <div class="wide x-long green"></div> 
    <div class="x-wide xx-long blue"></div> 
    <div class="xx-wide xxx-long purple"></div> 
    <div class="x-wide long gray"></div> 
    <div class="wide x-long black"></div> 
    <div class="x-wide xx-long white"></div> 
</div> 

Так что с этой установкой я уже есть в общей сложности 17 различных размеров.

Теперь, я полагаю, я также сделаю селекторами для различных значков, а также для текста размером и стилем. Я думаю, что я буду делать любую анимацию, которую я хочу в jQuery вместо CSS3, чтобы обеспечить лучшую совместимость.

Когда все это будет сказано, я буду иметь как 6 или 7 классов для каждого div, так что так много, и мой подход довольно ужасен? Я больше разработчик, чем разработчик, поэтому были бы очень благодарны за советы и рекомендации.

Кроме того, чтобы оставить плитки разнесенными друг от друга, следует ли просто добавить некоторые поля к каждому из селекторов размера или есть более элегантное решение?

Спасибо, ребята, я просто пытаюсь обострить свои навыки дизайна и немного повеселиться в этом процессе.

Answer 1

Самый большой риск добавления (слишком) многих занятий состоит в том, что вы будете делать больше ошибок. Браузеры отлично справляются с занятиями. Если вы хотите оптимизировать производительность, эта тема может представлять интерес: CSS Optimization: Element ID vs. Class

Answer 2

Я бы попытался сгруппировать некоторые из этих атрибутов в клады, которые описывают ящики определенных размеров (то есть определенную ширину, длину, отступ, маржу, размер шрифта и т.д).

Одним из лучших советов, которые я видел недавно, является создание только небольших классов повторного использования, которые должны выглядеть одинаково независимо от того, где они отображаются на странице. то есть класс .blue-box должен выглядеть одинаково независимо от того, где он появляется, поэтому не делайте #content .blue-box как отличающийся от #footer .blue-box

В следующем видео описывается хорошая практика для остановить CSS получение «из-под контроля»:

Velocity 2010: Nicole Sullivan, "The Top 5 Mistakes of Massive CSS"