Всем шалом!
На днях читал, как ни странно, советы от гугл по оптимизации, там увидел БЭМ (чтобы не допускать каскадность), и дабы не терять время, я решил освоить его, я тут. И у меня вопрос:
Существуют повторяющиеся html5 теги, например header-ы, footer-ы, nav-ы, и вообще, я всё правильно разметил? :))
Пример:
<header class="header-main">
<nav class="nav-main">
<li class="nav-main__item">
<a class"nav-main__link" href="/">Я обычная ссылка</a>
</li>
<li class="nav-main__item">
<a class"nav-main__link nav-main__link_active" href="/">А я активная ссылка</a>
</li>
</nav>
<form class="form-header">
<input class="form-header__login" type="text">
<input class="form-header__email" type="email">
<button class="form-header__button form-header__button_red" type="reset"></button>
<button class="form-header__button form-header__button_blue" type="submit"></button>
</form>
</header>
<article class="any-class ">
<header class="header-post"> это же блок, не элемент?
<h3 class="header-post__title"></h3>
<a class="header-post__link"></a>
</header>
<footer class="footer-post">
<div class="footer-post__any-element "></div>
<a class"footer-post__link " href="/">сайт</a>
</footer>
<article>
<nav class="navigation-pages">
<ul class="navigation-pages__ul">
<li class="navigation-pages__item">
<a class="navigation-pages__link"></a>
<a class="navigation-pages__link_current">Текущая</a>
</li>
</ul>
</nav>
<footer class="footer" class="footer-bottom" или class"cellar">
<a class="footer-bottom__link">Ссылка подвала</a>
</footer>
Я могу разделять главный <header>
и для поста <header>
вот так:
<header class="header header_main"> с модификатором
<a class="header__link"></a>
</header>
<article>
<header class="header header_article"> другой модификатор
<a class="header__link "></a> могу я тут писать "header_article__link", чтобы различать с ссылкой в главной header (<header class="header header_main">) нельзя писать header c модификатором, а потом элемент - "header_article__link"?
</header>
</article>
Сей (2-й) подход с разными модификаторами ещё потребует каскад в CSS, в таком случае нужно в одинаковых html5 тегах и в тегах типо <form>
, писать разные классы, а не разные модификаторы?
Пытался с исходниках яндекс-проектов смотреть код, смотрел на DNS-yandex, punto-switcher, там только на дивах, меня интересовали html5 теги и nav > ul > li > a
, понимаю, что можно опустить html5 теги, которые повторяются, навигацию просто через <div> <a>
, опуская nav, ul и li, и т.д. но интересует c многими вложенностями и повторяющиеся.
И ещё на счёт каскадности, смотрел исходник DNS-yandex, там в классах "static-text" есть h2, h3, h4, без классов, соответственно - есть каскад, так каскад простителен? Его можно не всегда избегать?
На гугл в советах по оптимизации написано, используйте методологию БЭМ, дабы избежать каскадности, чтобы увеличить скорость, говорилось, что каскадность - плохо для оптимизации.
В связи с тем, что БЭМ на независимостях строится, чтобы не было конфликтов, а на яндекс-днс опустили классы в h2, h3, h4, ибо уверены, что конфликтов не будет, и опустили классы, сверстали на каскады - static-text h2.
Но в чём тогда профит, в независимости, в оптимизации (не допускать каскады, где это можно), от чего плясать?
И есть тут, кто может дать ссылки на свои работы, дабы посмотреть примеры вёрстки по БЭМ.
Пардон за много букв. Заранее благодарю.