Когда следует избегать селекторов потомков

​

Те из нас, кто начал использовать модульный или объектно-ориентированный CSS принцип научились избегать, насколько это возможно, использования селекторов потомков (или, точнее, комбинацию с селекторами потомков).

Комбинация с использованием селектора потомка выглядит так:

	.sidebar p  {  
	    color: hotpink;  
	    font-size: 3em;  
	}  

Всё что находится до открывающей скобки является селектором. Комбинатором в этом случае служит пробел между sidebar и p. Существуют и другие комбинаторы, но в этом случае селектор использует комбинатор потомка.

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

Почему следует ограничивать использование селектора потомка?

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

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

Этот нюанс рассмотрен OOCSS wiki, при обсуждении разделения контейнера и содержимого.

Препятсвует ли OOCSS использованию селекторов потомков?

Этот вопрос рассматривается в OOCSS FAQ. Там говорится:

Нет, селекторы потомков использовать разрешено, но следует избегать их использования ”высоко в дереве DOM”.

Таким образом, идея здесь в том, что вы избегаете селекторов потомков, в тех местах, где это может вызвать ограничения на дочерние элементы, в частности ”высоко в дереве DOM”. Но избегать их использования совсем вовсе не стоит.

Хорошим примером служит модуль OOCSS от Николя Салливана, в котором повсеместно используются селекторы потомков, но при этом нет ограничений на внутренние элементы.

Итак, использовать селекторы потомков всё же можно, но осторожно. Следует избегать ситуаций приведённых ниже:

	.header p { }  
    .container div { }  
    .sidebar h2 { }  

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

Всё это лишь советы

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

Если это обстоятельство побуждает вас использовать модульный CSS,дерзайте! Даже, если вы не будете следовать этому правилу, всё же стоит иметь его ввиду. В будущем этот принцип позволит вам создавать более профессиональный CSS код.