Какие есть новые теги HTML5, оптимизации CSS правил, списки?

Question

[daMage]

Добрый день. Интересует несколько вопросов про верстку страниц.

1. Начну, пожалуй, с 5 версии html. Нужно ли использовать новые теги? Ведь некоторые теги могут повторяться. Тот же header может быть как для документа в целом, так и для статьи. Всё равно нужно выделять тег классом, ибо писать body > header или article header не комильфо, не по БЭМу это.
2. Где-то видел, что выборка элементов для css правила происходит прямо-таки по арабски. Выходит, что использование .class * не желательно?
3. Для чего постоянно ссылки верстают как список? В большинстве случаев достаточно обычного div a. Зачем усложнять разметку? Ну и если нужно скажем ссылки выводить одну на строчку, при этом еще нужно задать отступы соответствующие, почему просто не добавить еще один div? div div a. Зачем опять таки писать div ul li a? Всё равно на один тег больше.

Comments

[daMage]

И в случае, когда на странице несколько header. Нормально ли будет писать
header.header
header.article-header
?

Answer 1

[Иван Беленков]

1. Новые теги HTML5 созданы не для удобства написания css-селекторов, а для семантики. div.page_header не несёт семантической нагрузки, в то же время header.page_header - явно говорит о том, что это именно шапка. С БЭМ это никак не конфликтует: класс .page_header__userblock вы можете засунуть хоть в div, хоть в header, на разметку это никак не повлияет.
2. Селекторы не дураки придумывали, использование классов оправдано там, где это задумано разработчиками. Если у вас встречается несколько схожих блоков на странице - задайте им класс. Если только один(например футер) - задайте ему id.
3. Ссылки верстают списком исторически. Потому что список имеет больший семантический вес, нежели просто набор элементов. В новой редакции HTML(элемент nav) ссылки меню задаются именно так, как вы предлагаете.

По дополнительному вопросу: да, это совершенно нормально, но если вы приверженец БЭМ, то вы будете писать иначе, т.к. задача БЭМ - избежать каскадной верстки.

Comments

[daMage]

@IoannGrozny Спасибо, дружище, развеял все сомнения) А по поводу header.header это просто сокращенная запись html разметки