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

должны ли мои определения таблиц стилей отражать иерархию 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.

7
css stylesheet

5 ответов

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

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

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

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

8

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

2

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

  1. я отслеживаю свой код и где вещи находятся в heirarchy

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

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

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

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

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

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

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

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

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

2

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

.property { color: red; }

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

<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; }
1

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

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

IDs (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/

0