Лучшая практика для ссылки на классы в CSS

Question

Если у вас есть HTML-страница с классом в элементе, например <div class="myClass">, лучше ли ссылаться на нее в CSS как .myClass или div.myClass?

Answer 1

div.myClass делает объявление стиля более конкретным. Другими словами, это занимает более высокий приоритет. Поэтому иногда полезно указать это, чтобы избежать конфликтов CSS, когда у вас в проекте много разработчиков и люди добавляют классы, как будто завтра не наступит. Другими словами, если вы добавили Боба:

.myClass {
  color: red;
}

и Сара добавляет:

div.myClass {
  color: blue;
}

Класс Сары превзойдет класс Боба, когда вы получите:

<div class="myClass">Sarah FTW</div>

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

Answer 2

Если вы не собираетесь давать что-то (не div) классу "myClass" и стилизовать его по-другому, вы должны просто пойти с .myClass.

Например, если все .error равны color:red, но div.error также равны background:red, вы можете настроить файл так, чтобы он включал стили как для .error, так и div.error.

Answer 3

Я считаю, что лучше никогда не расширять область действия за пределы ваших намерений - используйте div.myClass, если вы собираетесь применять этот класс только для div. Это имеет как минимум 2 преимущества:

• Если вы используете .myClass, а затем случайно создаете .myClass, ваши стили .myClass будут применены ко всем ссылкам класса myClass, что приведет к ненужным головным болям отладки.
• Ваш CSS будет намного более читабельным. Вы или кто-то еще, просматривая его, сможете увидеть, что myClass применяется к div-элементам, и вам не придется тщательно искать каждый HTML-документ, чтобы увидеть, для чего он используется.

Answer 4

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

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