Множество классов CSS на элементе против одного определенного класса?

Question

Мне любопытно узнать, какой путь является «лучшим» произведением, подумайте об этом простом общем примере, я хочу иметь элемент, который содержит текст, быть выделенным жирным и синим цветом.

я могу использовать этот способ:

<p class="bold underlined blue">Happy little clouds</p> 

или

<p class="bold-underlined-blue">Happy little trees</p> 

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

Answer 1

Бывший подход (с использованием нескольких классов) определенно лучше. Вы можете не только стилизовать элементы по отдельности с:

.bold { 
    font-weight: bold; 
} 

.underlined { 
    text-decoration: underline; 
} 

.blue { 
    color: blue; 
} 

Но вы также можете их стиль для конкретной комбинации с друг друга, такие как:

.bold.underlined.blue { 
    font-size: 18px; 
} 

В приведенном выше примере, font-size будет применяться только в том случае, если соответствующий элемент имеет все три класса, которые по существу будут такими же, как и последний метод сами по себе :)

Нет t только с использованием специализированных классов дает вам больше универсальности, но также и быстрее - поскольку вы, вероятно, будете многократно использовать стили, такие как font-weight: bold, по всему документу, выделенный класс означает, что вам нужно будет написать декларацию один раз, а не чтобы записать его в каждом отдельном селекторе.

Однако эти специализированные классы должны создаваться только для вещей, которые вы будете повторно использовать несколько раз - создание специализированного класса для того, что используется только один раз, будет избыточным.

Надеюсь, это поможет!