SMACSS: почему бы не использовать селекторы элементов в определении макета на странице HTML5

Question

Я изучаю smacss.com. Джонатан Снук утверждает в своей книге (стр. 14)

Нет необходимости использовать селекторы элементов со стилем макета.

Я не могу найти его заявление в Интернете: http://smacss.com/book/type-layout

Сегодня в HTML5 я использую <header> <nav> <article> <footer>, ..... вместо #header #nav #article #footer.....

Теперь я в замешательстве. Почему я не должен использовать селекторы элементов со стилем макета? Или эта информация устарела?

Answer 1

Здесь нет жестких и быстрых правил. Однако, если вы используете article в качестве селектора ваш CSS будет тесно связан с вашим HTML, что может стать проблемой позже.

Например, используя .article тогда вы могли бы иметь <div class="article"> или же <article class="article"> и это будет работать так же хорошо.

Допустим, вы размечаете продукты в системе электронной коммерции с помощью <article> теги, а затем <product> тег добавлен в HTML5, возможно, вы захотите переключить весь ваш HTML на использование нового тега. Однако, если ваш CSS использует селектор элементов, вам нужно будет также изменить все в вашем CSS. Если вы добавите product класс к элементу и использовать .product Селектор, у вас не будет этой проблемы позже.

Есть и обратная проблема: когда вы добавляете чужой код в свой, есть большая вероятность, что он использует <article> теги, и если вы используете селекторы элементов, ваш CSS теперь будет применяться к этим элементам. Используя классы (особенно классы пространства имен), вы можете держать вещи отдельно.

Тем не менее, это скорее общее руководство, чем абсолют. Пока вы используете их только для определенных селекторов, таких как <section> а также <article>, все должно быть в порядке. Если вы используете их для таких вещей, как <span> а также <div> это более вероятно, будет проблемой.