Начал верстать по БЭМ-у но не уверен, что правильно понял БЭМ

Подскажите, пожалуйста, то что я верстаю это БЭМ? )) Уж как то классы жирные получаются ((

<!doctype html>

<html>

<head>
    <meta charset="utf-8">
    <title>Some title here</title>
    <meta name="description" content="">
    <meta name="viewport" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

</head>

<body class='body'>

<!--[if lte IE 8]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<div id='pagewrap' >

  <header class='header'>

  </header><!-- End of class header -->

  <div class='logo'>

     <div class='logo__block1' >

     </div>  <!-- End of class logo__block1 -->

     <div class='logo__block2' >

     </div>  <!-- End of class logo__block2 -->

  </div><!-- End of class logo -->

  <nav class='nav'>

  </nav><!-- End of class logo -->   


  </header><!-- End of class header -->     


  <section class='mainSection'>

     <div class='mainSection__block1' >

     </div>  <!-- End of class mainSection__block1 -->

     <div class='mainSection__block2' >

        <div class='mainSection__block3' >
        </div><!--End of class mainSection__block3-->

        <div class='mainSection__block4' >
        </div><!--End of class mainSection__block4-->         

     </div>  <!-- End of class mainSection__block2 -->

  </section><!-- End of class mainSection -->

  <section class='BreackingNewsSection'>

      <div class='BreackingNewsSection__header'>
          <p class='BreackingNewsSection__header --center'> BREACKING NEWS </p>
      </div><!-- End of class BreackingNewsSection__header -->

      <div class='BreackingNewsSection__body'>

          <div class='BreackingNewsSection__oneNews --marginleft'> 

          </div><!-- End of class BreackingNewsSection__oneNews -->

          <div class='BreackingNewsSection__oneNews'> 

          </div><!-- End of class BreackingNewsSection__oneNews -->

          <div class='BreackingNewsSection__oneNews'> 

          </div><!-- End of class BreackingNewsSection__oneNews -->

          <div class='BreackingNewsSection__oneNews --marginRight'> 

          </div><!-- End of class BreackingNewsSection__oneNews -->          

      </div><!-- End of class BreackingNewsSection__body -->

  </section><!-- End of class BreackingNewsSection -->

  <section class='LatestStoriesSection'>

      <div class='LatestStoriesSection__header'>

          <p class='LatestStoriesSection__header --center'> LATEST STORIES </p>

      </div><!-- End of class LatestStoriesSection__header -->

      <div class='LatestStoriesSection__block1'>

        <div class='LatestStoriesSection__oneNews'>
            <div class='LatestStoriesSection__oneNews__Img' >
            </div><!-- End of class LatestStoriesSection__oneNews__Img -->
            <div class='LatestStoriesSection__oneNews__text'>

               <p class='LatestStoriesSection__oneNews__header'>
                    Neque porro quisquam est
                </p>
                <p class='LatestStoriesSection__oneNews__body'>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>         
            </div><!-- End of class LatestStoriesSection__oneNews__text -->
        </div><!-- End of class LatestStoriesSection__oneNews -->

        <div class='LatestStoriesSection__oneNews'>
            <div class='LatestStoriesSection__oneNews__Img' >
            </div><!-- End of class LatestStoriesSection__oneNews__Img -->
            <div class='LatestStoriesSection__oneNews__text'>
                <p class='LatestStoriesSection__oneNews__header'>
                    Neque porro quisquam est 
                </p>
                <p class='LatestStoriesSection__oneNews__body'>
                    Lorem Ipsum has been the industry's standard dummy text 
                </p>
            </div><!-- End of class LatestStoriesSection__oneNews__text -->

        </div><!-- End of class LatestStoriesSection__oneNews -->

      </div><!-- End of class LatestStoriesSection__block1 -->

      <div class='LatestStoriesSection__block2'>

      </div><!-- End of class LatestStoriesSection__block2 -->      

      <div class='LatestStoriesSection__block3'>
          <ul class='gorizontalMenu' >
            <li class='gorizontalMenu__li' > <a>Previous</a> </li>
            <li class='gorizontalMenu__li --chosen' > <a>1</a> </li>
            <li class='gorizontalMenu__li' > <a>2</a> </li>
            <li class='gorizontalMenu__li' > <a>3</a> </li>
            <li class='gorizontalMenu__li' > <a>4</a> </li>
            <li class='gorizontalMenu__li' > <a>5</a> </li>
            <li class='gorizontalMenu__li' > <a>Next</a> </li>
          </ul>
      </div>

  </section><!-- End of class LatestStoriesSection -->

  <article class='article'>

  </article> <!-- End of class article --> 

  <footer class='footer'>

  </footer><!-- End of class footer -->

</div> <!-- End of id pagewrap -->

 <script src="scripts/app.js"></script>


</body>

</html>

9 years ago

tadatuta

Нууу... семантика элементов с названиями block1 и block2 не очень-то осмысленная, но что-то похожее на БЭМ определенно присутствует :)

Ну нужно бояться «жирных классов», все сервера и браузеры давно умеют gzip.

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

Лучше писать модификаторы вместе с именем блока. Причины описаны в FAQ: https://ru.bem.info/faq/#Зачем-писать-имя-блока-в-именах-модификаторов-и-элементов
Нет смысла оставлять id для pagewrap, его для консистентности тоже стоит сменить на class.
Не нужно отражать в именах сущностей теги (речь про gorizontalMenu__li, было бы уместнее использовать gorizontalMenu__item) — завтра теги поменяются, а сущности сохранятся.
Не нужно делать элементы элементов (LatestStoriesSection__oneNews__body). При этом вкладывать элемент внутрь элемента можно:

<div class='LatestStoriesSection__oneNews'>
    <div class='LatestStoriesSection__Img'></div>
    <div class='LatestStoriesSection__text'>

        <p class='LatestStoriesSection__header'>
            Neque porro quisquam est
        </p>
        <p class='LatestStoriesSection__body'>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </p>         
    </div>
</div>

Если по какой-то причине нужно явно выразить принадлежность, можно указать ее прямо в имени элемента (LatestStoriesSection__oneNewsText).

Причины тоже описаны в FAQ: https://ru.bem.info/faq/#Почему-в-БЭМ-не-рекомендуется-создавать-элементы-элементов-block__elem1__elem2

И не про БЭМ, но про жирность кода: все три условия про IE можно объединить — они совпадают. Ну и комментарии про End of вряд ли имеют смысл, если пользоваться редактором с нормальной подсветкой и фолдингом.

9 years ago

enough1987

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

Чтобы оставлять комментарии, необходимо авторизоваться.