Должен ли я написать полный путь иерархии в моих определениях CSS для каждого элемента / класса? - PullRequest
Новая
       1

Должен ли я написать полный путь иерархии в моих определениях CSS для каждого элемента / класса?

7 голосов
/ 25 июля 2011

Должны ли мои определения таблицы стилей отражать иерархию DOM? Если у меня есть: 

<div id="container">
  <div class="item">
    <div class="property">
       <span id="1243"></span>
    </div>
  </div>
</div>

Когда я хочу стилизовать каждое свойство, я должен просто сказать: 

.property { color: red; }

Или я должен сделать 

#container .item .property { color: red;}

Я использовал оба. Мне нравится первое для краткости и потому, что мне не нужно обновлять его, если меняется иерархия, но второе помогает мне читать CSS.

Ответы [ 5 ]

8 голосов
/ 25 июля 2011

Как и в любом коде (или любом написании), вы должны написать его, чтобы выразить свое предполагаемое значение как можно более четко и точно.

Итак, если вам нужен какой-либо элемент с классом property, этопотомок элемента с классом item, который сам является потомком элемента с идентификатором container, чтобы иметь эти стили, тогда напишите #container .item .property.

Если вы хотите элемент скласс property, чтобы иметь эти стили независимо от того, от чего он является потомком, затем напишите .property.Это подходит для классов, которые вы хотите использовать в разных местах сайта;например, стили кнопок.

Я хотел бы отметить одну вещь: каждый CSS-селектор, который вы добавляете, увеличивает специфичность селектора, т.е. #container .item .property более специфичен, чем .property.Таким образом, стили, применяемые с #container .item .property, потребуют более специфичного селектора, чтобы переопределить их, если вы захотите позже, что заставит вас снова написать этот более длинный селектор.Но я думаю, что это второстепенная проблема по сравнению с написанием того, что вы имеете в виду.

2 голосов
/ 25 июля 2011

Это полностью ваше дело, вам не нужно использовать полный путь в css, но использование полного пути может быть полезным, если у вас есть 2 div с одним и тем же классом, но разными родителями, и вы хотите стилизовать их обоихпо-другому.

2 голосов
/ 25 июля 2011

Я всегда делаю второе.Это помогает

  1. мне следить за моим кодом и тем, что находится в иерархии

  2. другим легче читать и изменять мой код

  3. со спецификой, так как легче нацеливаться на проблемы.

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

На самом деле я бы даже пошел дальше, чем

#container .item .property { color: red;}

и добавил бы элементы тоже

div#container div.item div.property { color: red;}

В этом методе есть ясность ... поскольку я могу сказать, какие элементы получают какой класс или ID.

Кроме того, он позволяет использовать имена классов для других элементов.

1 голос
/ 25 июля 2011

Если вы используете те же стили в другом месте в другой иерархии, вы должны сказать просто 

.property { color: red; }

Но если вы пытаетесь указать стиль только для текущей иерархии, вы должны указать полный путь. например, у вас есть такой DOM: 

<div id="container1">
  <div class="item">
    <div class="property">
       <span id="1234"></span>
    </div>
  </div>
</div>
<div id="container2">
  <div class="item">
    <div class="property">
       <span id="5678"></span>
    </div>
  </div>
</div>

Тогда стиль может выглядеть так: 

.property { color: red; }
#container1 .property { float: left; }
#container2 .property { float: right; }
0 голосов
/ 16 мая 2013

Я согласен с выбранным ответом (который превосходен), но я хочу добавить, что вы должны быть настолько конкретны, насколько вам нужно.Это гарантирует, что вы можете переопределять с большей конкретностью по мере необходимости.Если вы всегда очень конкретны, у вас не останется способов переопределить стили.

Если вам интересно, порядок специфичности будет следующим:

идентификаторы (100 баллов), классы.* (10 баллов), элементы (1 балл).

*, включая псевдоклассы

Подсистема CSS подсчитывает баллы за каждый выбранный вами селектор в зависимости от уровня специфичности. 

ul.menu li a = ((1 + 10) + 1 + 1) = 13
#widget ul.menu  = (100 + (1 + 10)) = 111 points
#widget ul.menu li = 112 points
#widget ul.menu li#home = 212 points
#widget ul.menu li#home a = 213 points 
body #widget ul.menu li#home a#homeLink = 313 points (High-score FAIL!)

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

Все страницы имеют разныеСтруктуры DOM и некоторые проекты могут не иметь повторяющихся шаблонов (O_0), но если вы укажете каждый шаг по привычке (то есть селекторы с высокими показателями), у вас будет меньше способов превзойти предыдущие оценки;ваши первоначальные определения установят высокие записи и уменьшат количество способов их переопределения на более поздний срок (без добавления разметки или использования важного флага IE!).

Как правило, япопробуйте написать страницы с низким баллом.Они вставили «каскад» в CSS;в результате меньше кода, больше удобства сопровождения и, как мы надеемся, более быстрый рендеринг (?!).

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

...