Комментарии (7)

1. 

   Koneru

   06.12.2018 09:50

   #19461070

   А зачем в первом примере ухищрения? Почему нельзя просто обрезать картинку?

   
   

   1. 

      EpicLegend_gg Автор

      06.12.2018 10:07

      #19461128

      Так сделали макет.
      К примеру, на больших экранах будет асимметрия сайта. Если экран маленький, то основная информация с картинки будет доставлена пользователю, а при больших экранах картинка будет смотреться иначе и при этом, вы не пишите дополнительные стили в медиа запросы.

1. 

   Against-vegetables

   06.12.2018 10:32

   #19461236

   >Как можно обойтись минимальным количеством классов?
   Можно создать класс со всеми свойствами сразу. То что у вас в примере — больше похоже на атомарный css.

1. 

   EaGames

   06.12.2018 11:30

   #19461572

   Не пойму я как можно считать класс типа: .blog-post__h3 хорошим примером… Придет сеошник и поменяет ваш `h3` на какой нибудь `h5` или вообще `p`, и потом разбирайся в этом css-е где `p` описывает .blog-post__h3.

1. 

   anttoshka

   06.12.2018 11:31

   #19461578

   Не стоит такое читать джунам. В заголовке написано про pug, gulp. О них в статье ни слова.
   Хороший пример БЭМ странный. Зачем использована вложенность и повышена специфичность?
   Сложные селекторы. Каким боком они относятся к БЭМ? По БЭМ нельзя использовать теги.
   Длинные классы. Это вообще какая-то жесть. Используйте миксины. Берем условную кнопку .blog__button, в нее добавляем через миксины import button, button--default и т.д. На выходе имеем кнопку с нужными стилями. Другой вариант все добавлять классы на кнопку, но уникальные правила добавлять на класс .blog__button. Стоит за пример взять бутстрап. На кнопке 2-3 стандартных класса, остальное можно добавить через свой уникальный класс. У вас же, как указали в комменте выше, больше похоже на атомарный CSS, чем на БЭМ.

1. 

   perfect_pixel

   06.12.2018 15:14

   #19462940

   Согласен с предыдущими комментатороми. Дополню. В каких-то аспектах вы не верно поняли суть БЭМа.
   Я конечно понимаю, что толковать бэм можно и нужно по разному. Но:
   1) Вложенность ВЕЗДЕ ужасна. Чтобы перебить в медиа запросе ваше правило, опять придется повторять эту вложенность
   2) Разбивать стили кнопок на мелкие классы, это конечно «атомарно», но что-то я сомневаюсь, что дизайнер нагородил в макете 20 разных вариантов кнопок. Сделайте более осмысленные классы для кнопок. Пусть это будет .btn_blog, .btn_comments. Ссылка 'Read more' имхо вообще не должна являться .btn
   3) Привязка в тегам, а тем более селекторы типа > — тоже далеко не бэм. Всегда представляйте, что передадите этот проект другому разработчику, и как он это сможет легко поломать.

1. 

   ArsenAbakarov

   06.12.2018 16:33

   #19463404

   Не пишите никогда something__h2… Потом задолбаетесь, выше уже писали, как пример БЭМ:
   

   SCSS

   $BODY_HEIGHT: 42px;
   
   .header-bottom {
     background-color: $COLOR_MAIN;
     height: $BODY_HEIGHT;
     padding: 4px 10px;
     border-radius: 10px;
     border-bottom-left-radius: 0;
     color: $COLOR_WHITE;
   
     @include screen_m {
       border-bottom-left-radius: 10px;
     }
   
     &__inner {
       height: $BODY_HEIGHT;
     }
   
     &__catalog-text {
       vertical-align: middle;
       font-size: 16px;
       font-weight: bold;
       margin-left: 5px;
   
       @include screen_m {
         display: none;
       }
     }
   
     &__icon {
       vertical-align: middle;
     }
   
     &__catalog-icon {
       margin-left: 5px;
     }
   
     &__like, &__compare, &__cart {
       position: relative;
       display: inline-block;
       vertical-align: middle;
       font-weight: bold;
       margin-left: 15px;
     }
   
     &__cart {
       font-size: 16px;
       margin-left: 20px;
     }
   
     &__like-counter {
       position: absolute;
       bottom: -5px;
       right: -5px;
     }
   
     &__compare-counter {
       position: absolute;
       bottom: -5px;
       right: -8px;
     }
   
     &__search {
       display: inline-block;
       vertical-align: middle;
       margin-left: 100px;
       margin-right: 60px;
       width: 555px;
   
       @include screen_m {
         width: 410px;
         margin-left: 20px;
         margin-right: 20px;
       }
     }
   }