Разбор таска по верстке (sass, pug, gulp, bem)

[Koneru]

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

[EpicLegend_gg]

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

[Against-vegetables]

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

[EaGames]

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

[anttoshka]

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

[perfect_pixel]

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