Правильно ли я составила начальную разметку страницы?

HelgaZhizhka commented 9 years ago

Доброго времени суток! Начала писать первый проект по БЭМ, использую методологию (соглашение по наименованию и структуру фауйлов). Прошу помогите пожалуйста проверить, правильно ли я начинаю использование блоков и элементов по методологии. Задача такая, что навигационная панель будет на главной странице будет сначала отличаться по стилю чем на остальных страницах()без фона). При скроле меню фиксируется и будет приобретать такой вид как на других страницах(с фоном)

<body class="b-page b-main-page">   
    <div class="l-wrapper">
        <header class="l-page-header j-page-header">
            <nav class="l-navigation l-navigation--main">
                <ul class="b-menu b-menu-main">
                    <li>
                        <button class="b-button-toggle" type="button" data-toggle="toggle">
                            <span class="b-button-toggle__sr-only">navigation</span>
                            <span class="b-button-toggle__icon-bar"></span>
                            <span class="b-button-toggle__icon-bar"></span>
                            <span class="b-button-toggle__icon-bar"></span>
                        </button>
                        <ul class="b-dropdown-menu b-dropdown-menu-main">
                            <li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">О компании</a></li>
                            <li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">Блог</a></li>
                            <li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">Полезные статьи</a></li>
                            <li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">Помощь</a></li>
                        </ul>
                    </li>
                    <li class="b-menu__item b-menu-main-item"><a class="b-menu__link b-menu__link--active b-link" href="">Рекламодателям</a></li>
                    <li class="b-menu__item  b-menu-main-item"><a href="">Владельцам сайтов</a></li>
                    <li class="b-menu__item  b-menu-main-item"><a href="">Обмен трафиком</a></li>
                    <li class="b-menu__item  b-menu-main-item"><a href="">Агентам</a></li>
                </ul>
                <ul class="b-login">
                      <li class="b-login__item">
                        <a class="b-login__signin" href="#">Вход</a>
                        <a class="b-login__signup" href="#">Регистрация</a>
                    </li>
                    <li class="b-login__item i-hide">
                        <a class="b-login__accaunt-user" href="#">alexander.starodumov@gmail.com</a>
                        <a class="b-login__signout" href="#">Регистрация</a>
                    </li>
                </ul>
            </nav>
        </header>
         <div class="b-promo-header">
            <div class="l-container">
                <div class="l-promo-logo b-promo__logo">
                    <a class="b-promo-header-link">
                        <img class="b-siteLogo__icon" src="http://net-craft.com/wp-content/themes/netcraft/img/siteLogo__icon.png" alt="Net-Craft.com" title="Net-Craft.com" itemprop="logo" />
                    </a>
                    <h3 class="b-promo-header-text b-promo-header--text-middle">logo text</h3>
                    <h1 class="b-promo-header-text b-promo-header-text--big">logo text</h1>
                </div>
            </div>
        </div>
        <div class="b-page__section">
            <div class="l-container">
                <div class="l-row">
                    <div class="l-row__col_6">
                        <div class="b-page__text-block">
                        </div>
                    </div>
                    <div class="l-row__col_6">
                        <div class="b-page__image-block">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="l-footer-push"></div>
    </div>
    <footer class="l-footer ">
        <div class="b-page-footer">
            <div class="l-container">
                 <ul class="b-menu b-footer-menu">
                            <li class="b-footer-menu__item b-menu-item__item"><a class="b-footer-menu__link b-menu__link b-link" href="">О компании</a></li>
                            <li class="b-footer-menu__item b-menu-item__itemn"><a class="b-footer-menu__link b-menu__link  b-link" href="">Блог</a></li>
                            <li class="b-footer-menu__item b-menu-item__item"><a class="b-footer-menu__link b-menu__link  b-link" href="">Помощь</a></li>
                   </ul>
            </div>
        </div>
    </footer>

Спасибо большое заранее за помощь.

tadatuta commented 9 years ago

Я бы сделал приблизительно так:

diff --git a/1.html b/1.html
index a4c1b50..0529f6b 100644
--- a/1.html
+++ b/1.html
@@ -1,74 +1,76 @@
-<body class="b-page b-main-page">   
-    <div class="l-wrapper">
-        <header class="l-page-header j-page-header">
-            <nav class="l-navigation l-navigation--main">
-                <ul class="b-menu b-menu-main">
+<body class="page page_main">
+    <div class="page__inner">
+        <header class="page__header j-page-header">
+            <nav class="navigation navigation_main">
+                <ul class="menu menu_main">
                     <li>
-                        <button class="b-button-toggle" type="button" data-toggle="toggle">
-                            <span class="b-button-toggle__sr-only">navigation</span>
-                            <span class="b-button-toggle__icon-bar"></span>
-                            <span class="b-button-toggle__icon-bar"></span>
-                            <span class="b-button-toggle__icon-bar"></span>
+                        <button class="button button_toggle" type="button" data-toggle="toggle">
+                            <span class="button__sr-only">navigation</span>
+                            <span class="button__icon-bar"></span>
+                            <span class="button__icon-bar"></span>
+                            <span class="button__icon-bar"></span>
                         </button>
-                        <ul class="b-dropdown-menu b-dropdown-menu-main">
-                            <li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">О компании</a></li>
-                            <li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">Блог</a></li>
-                            <li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">Полезные статьи</a></li>
-                            <li class="b-dropdown-menu__item b-dropdown-menu__item-main"><a class="b-dropdown-menu__link b-dropdown-menu__link-main b-link" href="">Помощь</a></li>
+                        <ul class="dropdown-menu dropdown-menu_main">
+                            <li class="dropdown-menu__item"><a class="dropdown-menu__link dropdown-menu__link_main link" href="">О компании</a></li>
+                            <li class="dropdown-menu__item"><a class="dropdown-menu__link link" href="">Блог</a></li>
+                            <li class="dropdown-menu__item"><a class="dropdown-menu__link link" href="">Полезные статьи</a></li>
+                            <li class="dropdown-menu__item"><a class="dropdown-menu__link link" href="">Помощь</a></li>
                         </ul>
                     </li>
-                    <li class="b-menu__item b-menu-main-item"><a class="b-menu__link b-menu__link--active b-link" href="">Рекламодателям</a></li>
-                    <li class="b-menu__item  b-menu-main-item"><a href="">Владельцам сайтов</a></li>
-                    <li class="b-menu__item  b-menu-main-item"><a href="">Обмен трафиком</a></li>
-                    <li class="b-menu__item  b-menu-main-item"><a href="">Агентам</a></li>
+                    <li class="menu__item menu__item_active"><a class="menu__link link" href="">Рекламодателям</a></li>
+                    <li class="menu__item"><a href="">Владельцам сайтов</a></li>
+                    <li class="menu__item"><a href="">Обмен трафиком</a></li>
+                    <li class="menu__item"><a href="">Агентам</a></li>
                 </ul>
-                <ul class="b-login">
-                      <li class="b-login__item">
-                        <a class="b-login__signin" href="#">Вход</a>
-                        <a class="b-login__signup" href="#">Регистрация</a>
+                <ul class="login">
+                      <li class="login__item">
+                        <a class="login__signin" href="#">Вход</a>
+                        <a class="login__signup" href="#">Регистрация</a>
                     </li>
-                    <li class="b-login__item i-hide">
-                        <a class="b-login__accaunt-user" href="#">alexander.starodumov@gmail.com</a>
-                        <a class="b-login__signout" href="#">Регистрация</a>
+                    <li class="login__item login__item_hidden">
+                        <a class="login__accaunt-user" href="#">alexander.starodumov@gmail.com</a>
+                        <a class="login__signout" href="#">Регистрация</a>
                     </li>
                 </ul>
             </nav>
         </header>
-         <div class="b-promo-header">
-            <div class="l-container">
-                <div class="l-promo-logo b-promo__logo">
-                    <a class="b-promo-header-link">
-                        <img class="b-siteLogo__icon" src="http://net-craft.com/wp-content/themes/netcraft/img/siteLogo__icon.png" alt="Net-Craft.com" title="Net-Craft.com" itemprop="logo" />
+         <div class="promo-header">
+            <div class="container">
+                <div class="promo-logo promo__logo">
+                    <a class="promo-header-link">
+                        <img class="site-logo__icon" src="http://net-craft.com/wp-content/themes/netcraft/img/siteLogo__icon.png" alt="Net-Craft.com" title="Net-Craft.com" itemprop="logo">
                     </a>
-                    <h3 class="b-promo-header-text b-promo-header--text-middle">logo text</h3>
-                    <h1 class="b-promo-header-text b-promo-header-text--big">logo text</h1>
+                    <h3 class="promo-header-text promo-header-text_middle">logo text</h3>
+                    <h1 class="promo-header-text promo-header-text_big">logo text</h1>
                 </div>
             </div>
         </div>
-        <div class="b-page__section">
-            <div class="l-container">
-                <div class="l-row i-text-center">
-                    <div class="l-row__col_6">
-                        <div class="b-page__text-block">
+        <div class="page__section">
+            <div class="container">
+                <div class="row i-text-center">
+                    <div class="row__col_6">
+                        <div class="page__text-block">
                         </div>
                     </div>
-                    <div class="l-row__col_5 l-row-offset-1">
-                        <div class="b-page__image-block">
+                    <div class="row__col_5 row_offset-1">
+                        <div class="page__image-block">
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="l-footer-push"></div>
+        <div class="footer-push"></div>
     </div>
-    <footer class="l-footer ">
-        <div class="b-page-footer">
-            <div class="l-container">
-                 <ul class="b-menu b-footer-menu">
-                            <li class="b-footer-menu__item b-menu-item__item"><a class="b-footer-menu__link b-menu__link b-link" href="">О компании</a></li>
-                            <li class="b-footer-menu__item b-menu-item__itemn"><a class="b-footer-menu__link b-menu__link  b-link" href="">Блог</a></li>
-                            <li class="b-footer-menu__item b-menu-item__item"><a class="b-footer-menu__link b-menu__link  b-link" href="">Помощь</a></li>
-                   </ul>
+    <footer class="footer">
+        <div class="page__footer">
+            <div class="container">
+                 <ul class="menu footer-menu">
+                    <li class="footer-menu__item menu__item"><a class="footer-menu__link menu__link link" href="">О компании</a></li>
+                    <li class="footer-menu__item menu__item"><a class="footer-menu__link menu__link  link" href="">Блог</a></li>
+                    <li class="footer-menu__item menu__item"><a class="footer-menu__link menu__link  link" href="">Полезные статьи</a></li>
+                    <li class="footer-menu__item menu__item"><a class="footer-menu__link menu__link link" href="">Помощь</a></li>
+                </ul>
             </div>
         </div>
     </footer>
+</body>

HelgaZhizhka commented 9 years ago

Спасибо большое за ответ, я ваши правки учту, вижу Вы советуете отказать от префиксов, да? И еще такой вопрос у меня в коде было - <div class="l-row__col_5 l-row-offset-1"> Получается что по сетке, это элемент со сдвигом, а по БЭм - это элемент блока l-row и также блок l-row-offset-1, насколько я поняла, это моя ошибка, а как тогда же по БЭМ задавать на одном элементе row и ширину и сдвиг одновременно? Скажите, может ли быть у элемента два модификатора (например что это ссылка для главного меню, и активная ссылка)? Спасибо большое за помощь!

tadatuta commented 9 years ago

вижу Вы советуете отказать от префиксов?

Да, в них нет особого смысла, если на проекте не стоит задача явно разделять два принципиально разных способа верстки (например, было много легаси-разметки до БЭМ, теперь новые части пишутся по БЭМ, возникает необходимость отличать новое от старого).

И еще такой вопрос у меня в коде было - <div class="l-row__col_5 l-row-offset-1"> [...]

Это я невнимательно посмотрел. Конечно, у элемента может быть любое количество модификаторов одновременно и в данном случае два модификатора вполне уместны.

HelgaZhizhka commented 9 years ago

Ясно, по поводу модификаторов, спасибо что пояснили, если можно буду обращаться за помощью по ходу написания, тяжеловатоу научиться мыслить по БЭМ, сразу хочется применить каскад)

tadatuta commented 9 years ago

Главное — это не впадать в крайности и не отказываться от каскада полностью ;)

См. FAQ.

vithar commented 9 years ago

@tadatuta почему page--main, а не page_main ?

tadatuta commented 9 years ago

@vithar такой стиль для модификаторов был использован в исходном варианте, я решил его не менять.

vithar commented 9 years ago

@tadatuta одновременно с этим там есть l-row__col_6

tadatuta commented 9 years ago

@vithar и то правда. отредактировал свой коммент, заиспользовал везде _ для модификаторов.

HelgaZhizhka commented 9 years ago

всем доброго дня! просто тут в коде используется Стиль Гарри Робертса, в котором модификаторы именно так отделяются https://ru.bem.info/method/naming-convention/ Помогите пожалуйста , вот такой момент, у меня все css склеивают на выходе в один, и получается что стили по алфавиту, и в этом случае случается перекрытие стилей если я задаю одинаковые свойства с разными значениями например drop-down-link и link есть свойство color, но link идет ниже и перекрывает, как можно решить эту проблему, спасибо!

tadatuta commented 9 years ago

Как обычно есть несколько вариантов: простой и хороший ;)

Простой заключается в том, чтобы повысить специфичность тем селекторам, которым должны «победить». Например, есть <div class="a b">. В CSS было .a { color: red; }, стало .a.a { color: red; }. Теперь даже если .b { color: green; } окажется ниже, все равно останется красный.

Сложный вариант в том, чтобы научить сборку учитывать порядок. И тут снова есть несколько вариантов: — учитывать порядок появления классов в DOM-дереве и в рамках каждого узла (делается легко, но не покрывает всю вариативность использования) — перейти на сборщик ENB, который изначально задумывался для решения этой задачи.

HelgaZhizhka commented 9 years ago

Еще раз благодарю за пояснение, в моем случае пока пойду по простому пути, поскольку не использую еще сборщик, но поняла уже, что это будет мой следующий этап) - использовать сборщик БЭМа

bem-site / bem-forum-content-ru

Правильно ли я составила начальную разметку страницы? #657