#css #css-selectors
#css #css-селекторы
Вопрос:
В css я видел, как div.selector и selector используются для определения правил оформления для конкретного селектора.
В чем разница между этими двумя и какие причины я должен учитывать при использовании одного вместо другого при написании моих собственных css-файлов?
Ответ №1:
div.selectorнацелен только наdivэлементы с классомselector..selectorнацелен на ВСЕ элементы с классом.selector, а не толькоDIVs
Поэтому добавляйте к элементу префикс с именем тега, если вы знаете, что именно к нему вы будете применять css. Более поздний подход является более общим и нацелен на все элементы с указанным классом. Тем не менее, вы должны быть конкретны всякий раз, когда можете.
Если вы знаете, что только div элементы будут иметь .selector класс, с точки зрения производительности лучше использовать specific, например, div.selector вместо .selector того, который будет искать все элементы на странице, но в конечном итоге применит только к DIVs этим стилям.
Комментарии:
1. Насколько я понимаю, переход на specific не лучше с точки зрения производительности, потому что механизм рендеринга браузера должен проверять, является ли элемент, к которому применен класс, в данном случае элементом ‘div’. В этой статье Mozilla подчеркивается это: developer.mozilla.org/en/Writing_Efficient_CSS
Ответ №2:
div.selector является более конкретным селектором, чем .selector .
Например, у вас есть этот HTML:
<a href="" class="selector">Link</a>
<div class="selector"></div>
Селектор div.selector соответствует только div, в котором .selector выбираются оба элемента.
Ответ №3:
Как упоминалось до сих пор, добавление к вашему классу префикса с именем его элемента (т. Е. div.selector) выделит только элементы, которые являются divs, но исключит все остальное. Имея это в виду, вы можете создавать классы, которые могут применяться к нескольким элементам и / или предназначаться для одного элемента.
С точки зрения удобства чтения, добавление префиксов к вашим классам может помочь вам и вашей команде определить, каким элементом является элемент из css. Однако с точки зрения общей наилучшей практики и производительности обычно рекомендуется воздерживаться от добавления префиксов в объявления вашего класса и идентификатора, поскольку это приводит к дополнительной работе для движка браузера ваших пользователей.
Добавляя префиксы к вашим классам (например: div#selector или div.selector), ваш браузер должен найти класс, а затем определить, относится ли он к типу div). Хотя время, необходимое для этого, может быть незначительным, я чувствую, что об этом все же стоит упомянуть.
Ниже приведены несколько полезных ссылок по вопросу производительности и практики:
https://developer.mozilla.org/en/Writing_Efficient_CSS и http://css-tricks.com/efficiently-rendering-css/