Как часто я должен использовать селектор детей/сестер в CSS?

Question

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

<section> 
<div class="twocolumn"> 
    <div> 
     <p>Hello</p> 
     <a href="#">Press</a> 
    </div> 
    <div> 
     <p>Nice one!</p> 
     <a href="#">Click</a> 
    </div> 
</div> 
</section> 

Чтобы ориентировать внутренние элементы в этом коде, что лучше практика, чтобы использовать селекторы, которые начинаются от внешнего элемента (секции), так что другой разработчик будет понять «расположение» элементов, как, например:

section > div div:nth-child(1) p + a { 
    ... 
} 

или я должен использовать классы так:

.twocolumn a { 
    ... 
} 

как вы думаете, легче читать (для других разработчиков)? Каковы плюсы и минусы для каждого процесса? Можете ли вы привести другие примеры?

Answer 1

Прежде всего, ваши селекторы не совпадают. .twocolumn a сам по себе будет соответствовать как a элементам, так как вы не указали, что смотрите только в div:nth-child(1).

Это в сторону. Помните, что единственной целью комбинаторов в селекторах CSS является установление отношений между двумя или более элементами разметки. Таким образом, комбайнер из сестры говорит, что «этот элемент должен быть братом следующего за ним», компилятор-потомок говорит, что «этот элемент должен содержаться внутри этого», а дочерний комбинатор говорит, что «этот элемент является потомком этого». Если вам не нужно принудительно устанавливать определенную взаимосвязь между двумя элементами (обычно это происходит из предположений, которые вы делаете о структуре вашей страницы), то вам, вероятно, не нужно указывать, что многие элементы в вашем селекторе.

Берем фрагмент кода, например: если вы можете гарантировать, что каждый внутренний div в пределах этой структуры имеет p, за которым следует a, вы можете оставить из p +. Вам это нужно только в том случае, если a может появиться в другом месте, и вы хотите убедиться, что вы нацеливаете только a, если он непосредственно следует за p.

Далее, если вы можете как-то гарантировать, что каждый section > div будет иметь класс .twocolumn, то вы можете просто использовать селектор классов. Я считаю, что на самом деле вряд ли учитывая то, что имя класса должно описывать, но при условии, что это так, то, если вы хотите, чтобы выбрать первый a только вы будете нуждаться в div:nth-child(1) по крайней мере:

.twocolumn div:nth-child(1) a { 
    ... 
} 

Я могу» t предлагают гораздо более общие рекомендации, потому что это действительно зависит от ваших требований и того, с чем вы работаете. Но я скажу, что вы должны поддерживать баланс, т. Е. Не полностью полагаться на структуру вашей разметки, использовать классы и идентификаторы, чтобы указать на ключевые элементы, где это возможно. Как уже упоминалось в другом ответе, вы хотите избежать плотной связи вашего CSS и вашего HTML-кода, что приведет к изменению ваших селекторов, чтобы отразить любые потенциальные изменения в структуре HTML.

Но по-прежнему учитывайте небольшой набор возможных изменений в структуре, например, с приведенным выше примером p + a, поэтому вы не будете излишне использовать классы и раздувать вашу разметку без необходимости. В настоящее время веб-приложения настолько динамичны, и CSS предоставляет достаточно мощный синтаксис для использования, поэтому не бойтесь его использовать и воспитывать других о том, как это работает.

Answer 2

Короткий ответ: никогда.

Ну не всегда точно. Чем сложнее ваш селектор, тем более связанный ваш код CSS с вашим HTML. Измените HTML, а затем вы должны отразить изменения в коде селектора CSS. Вперед и вперед для каждого изменения означает более ручную работу, чтобы ваш дизайн не нарушался.

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

Это мое мнение, очевидно, но я развиваю веб-сайты уже более 10 лет. Хорошая философия следовать (где я узнал большую часть этого) от SMACSS.

Имейте в виду, что это не всегда касается разметки. Существует точка безубыточности между чистой разметкой и здравым кодом CSS. Я только что нашел, что, используя несколько классов CSS, у вас есть максимальная возможность повторного использования.

Answer 3

Как правило, лучше всего использовать более точные селекторы. В этом случае вы, вероятно, не захотите таргетинг КАЖДЫЙ <a> тег внутри вашего .twocolumn div. Более конкретный селектор, скорее всего, будет лучше, в зависимости от того, что вы на самом деле пытаетесь сделать. Если возможно, вы должны добавить класс в тег <a> и цель .twocolumn a.classname.

Answer 4

Более конкретный селектор быстрее будет обрабатываться.

В этом случае:

section > div {} 

стиль распознаватель будет выглядеть на элементе и его непосредственного родителя. То есть O(1) вычислительно сложная задача.

Но это один

section div {} 

в худшем случае будет иметь O(d) сложность, где d является глубина DOM дерева.