CSS - Какой метод лучше?

Question

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

.font_small{ font-size:10px; }
.font_blue{ color:blue; }
.font_red{ color:red; }

<span class="font_small font_blue">Hello World!</span><br />
<span class="font_small font_red">Today's the day!</span>

OR

.font_blue_small{ color:blue; }
.font_red_small{ color:red; }

.font_blue_small .font_red_small { font-size:10px; }

<span class="font_blue_small">Hello World!</span><br />
<span class="font_red_small">Today's the day!</span>

OR

.font_blue_small{ color:blue; font-size:10px; }
.font_red_small{ color:red; font-size:10px; }

<span class="font_blue_small">Hello World!</span><br />
<span class="font_red_small">Today's the day!</span>

OR

Еще один вариант, которого у меня еще нет ...?

Answer 1

Ни один из них:)

Уберите реализацию из вашего имени класса CSS. Что если вы смените синий цвет на зеленый? Что если вы хотите изменить цвет чего-то, что не является шрифтом?

Answer 2

Для вашего примера я бы выбрал первый.

Я предполагаю, что это только пример - при реальном использовании вы должны использовать описательные имена классов:

<span class="greeting">Hello world!</span>
<span class="motd">Today's the day!</span>

Используя такие классы, менее вероятно, что вам нужно будет объединить имена классов, и, следовательно, эта проблема редко появляется. Теперь, учитывая тот HTML, я бы выбрал второй или третий варианты, в зависимости от того, сколько правил разделяют два класса.

Answer 3

.small { font-size:10px; }
.blue  { color:blue; }
.red   { color:red; }

<span class="small blue">Hello World!</span><br />
<span class="small red">Today's the day!</span>

Но попробуйте использовать более подходящие имена для ваших классов, такие как "maintitle", "teaser", "info", "header" и т. Д. Синий не годится Что делать, если клиент хочет зеленый или красный на следующей неделе?

Лучше использовать «мета-наименование», поэтому называйте вещи после того, что должно быть показано.

Answer 4

Если на вашей странице нет десятков тысяч DOM-узлов, вложенных в сотни уровней, различия в приведенных выше правилах CSS вряд ли повлияют на время рендеринга. Если вас беспокоит размер байта во время загрузки, возможно, лучше использовать компрессор, такой как CSSMin , чем пытаться объединять классы вместе, как во втором и третьем примерах.

Короче говоря, перейдите к первому, потому что он чище для реализации, и вряд ли будут различия в производительности. Но используйте описательные имена классов, как сказал Римиан и Никф.

Answer 5

Первый обеспечивает большую гибкость и возможность повторного использования кода.