Специфичность CSS - определение классов и идентификаторов

Question

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

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

1. Во-первых, когда в связи с CSS специфичностью, я заметил, что one source включает псевдо элементы расчета, в то время как another говорит вам, чтобы оставить их из расчета. Это просто необязательная вещь, или я должен включить их?

2. Во-вторых, есть ли какая-либо конкретная причина, почему я должен объявлять классы выше идентификаторов? Например, я уже секционировал свой файл CSS разработки, а в разделе «нижний колонтитул» у меня есть #footer, #footer-container, .grid и .one-third, объявленные в этом порядке. Это прекрасно, или я должен переключать их? Определенные правила ниже, чтобы показать, что оба класса не содержат противоречивые свойства:

   #footer { 
       background: #e4e4e4; 
       border-top: 1px solid #eeeeee; 
       border-bottom: 1px solid #666666; 
       overflow: hidden; 
       padding-bottom: 1em; 
       width: 100%; 
   } 
   #footer-container { 
       margin: 0 auto; 
       width: 100%; 
       min-width: 1000px; 
   } 
   .grid { 
       margin-right: 2.1%; 
       float: left; 
       display: inline; 
       position: relative; 
   } 
   .one-third { 
       width: 31.9%; 
   } 
   

3. Наконец, просто быстрый вопрос о листинге свойства CSS в алфавитном порядке. Я полностью понимаю, что это необязательно, но используя мое заявление для #footer выше в качестве примера, есть ли предпочтение border, margin или padding, как в алфавитном порядке (bottom; left; right; top), или указано как написано в стенографии (top; right; bottom; left)?

спасибо!

Answer 1

1. Во-первых, когда в связи с CSS специфичностью, я заметил, что one source включает псевдо элементы расчета, в то время как another говорит вам, чтобы оставить их из расчета. Это просто необязательная вещь, или я должен включить их?

   Это новость для меня; похоже, что псевдо-элементы pre-CSS2.1 изначально предполагались игнорировать при расчете специфичности селектора. Статья, в которой говорится о том, чтобы оставить их вне расчета, была опубликована почти десять лет назад, прямо в середине рефакторинга CSS уровня 2. Вот что 1998 CSS2 recommendation говорит (что, для справки, также цитируется в этой статье, но URL, что ссылки на перенаправляет к последней ревизии спецификации, где она изменилась): специфика

   селектора рассчитывается как следующим образом:

   • подсчитать количество атрибутов идентификаторов в селекторе (= а)
   • подсчитать число других атрибутов и псевдо-классов в селекторе (= б)
   • подсчитать количество имен элементов в селекторе (= c)
   • игнорировать псевдоэлементы.

   В CSS2.1, а также последний Selectors standard, псевдо-элементы должны учитываться как обычные селекторы типа при расчете специфичности.

   Возможно, что еще более любопытно, что CSS1 имел такое же правило для псевдо-элементов с точки зрения специфики как текущий стандарт:

   Псевдо-элементы и псевдо-классы засчитываются как нормальные элементы и классы, соответственно.

   Это приводит меня к мысли, что изменение CSS2.0 было в конечном счете отменено в CSS2.1 поэтому он не будет нарушать существующих (унаследованных) таблицы стилей, которые случились полагаться на поведение, и/или потому, что он просто не имеет смысла не включать псевдоэлементы, поскольку вы применяете к ним стили, как вы делаете с фактическими элементами.

2. Во-вторых, существует ли какая-либо конкретная причина, по которой я должен объявлять классы выше идентификаторов? Например, я уже секционировал свой файл CSS разработки, а в разделе «нижний колонтитул» у меня есть #footer, #footer-container, .grid и .one-third, объявленные в этом порядке. Это прекрасно, или я должен переключать их?

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

3. Наконец, просто быстрый вопрос о перечислении свойств CSS в алфавитном порядке. Я полностью понимаю, что это необязательно, но используя мое заявление для #footer выше в качестве примера, есть ли предпочтение border, margin или padding, как в алфавитном порядке (bottom; left; right; top), или указано как написано в стенографии (top; right; bottom; left)?

   Если вы объявляете свойства longhand отдельно, то это полностью зависит от вас, как вы хотите заказать их. Я бы, конечно, следовал за порядком, уже изложенным сокращенными буквами ради простоты.

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

Answer 2

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

div[id='yourID'] { 

} 

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