Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 7
А зачем в первом примере ухищрения? Почему нельзя просто обрезать картинку?
>Как можно обойтись минимальным количеством классов?
Можно создать класс со всеми свойствами сразу. То что у вас в примере — больше похоже на атомарный css.
Можно создать класс со всеми свойствами сразу. То что у вас в примере — больше похоже на атомарный css.
Не пойму я как можно считать класс типа:
.blog-post__h3 хорошим примером… Придет сеошник и поменяет ваш `h3` на какой нибудь `h5` или вообще `p`, и потом разбирайся в этом css-е где `p` описывает .blog-post__h3.
Не стоит такое читать джунам. В заголовке написано про pug, gulp. О них в статье ни слова.
Хороший пример БЭМ странный. Зачем использована вложенность и повышена специфичность?
Сложные селекторы. Каким боком они относятся к БЭМ? По БЭМ нельзя использовать теги.
Длинные классы. Это вообще какая-то жесть. Используйте миксины. Берем условную кнопку .blog__button, в нее добавляем через миксины import button, button--default и т.д. На выходе имеем кнопку с нужными стилями. Другой вариант все добавлять классы на кнопку, но уникальные правила добавлять на класс .blog__button. Стоит за пример взять бутстрап. На кнопке 2-3 стандартных класса, остальное можно добавить через свой уникальный класс. У вас же, как указали в комменте выше, больше похоже на атомарный CSS, чем на БЭМ.
Хороший пример БЭМ странный. Зачем использована вложенность и повышена специфичность?
Сложные селекторы. Каким боком они относятся к БЭМ? По БЭМ нельзя использовать теги.
Длинные классы. Это вообще какая-то жесть. Используйте миксины. Берем условную кнопку .blog__button, в нее добавляем через миксины import button, button--default и т.д. На выходе имеем кнопку с нужными стилями. Другой вариант все добавлять классы на кнопку, но уникальные правила добавлять на класс .blog__button. Стоит за пример взять бутстрап. На кнопке 2-3 стандартных класса, остальное можно добавить через свой уникальный класс. У вас же, как указали в комменте выше, больше похоже на атомарный CSS, чем на БЭМ.
Согласен с предыдущими комментатороми. Дополню. В каких-то аспектах вы не верно поняли суть БЭМа.
Я конечно понимаю, что толковать бэм можно и нужно по разному. Но:
1) Вложенность ВЕЗДЕ ужасна. Чтобы перебить в медиа запросе ваше правило, опять придется повторять эту вложенность
2) Разбивать стили кнопок на мелкие классы, это конечно «атомарно», но что-то я сомневаюсь, что дизайнер нагородил в макете 20 разных вариантов кнопок. Сделайте более осмысленные классы для кнопок. Пусть это будет .btn_blog, .btn_comments. Ссылка 'Read more' имхо вообще не должна являться .btn
3) Привязка в тегам, а тем более селекторы типа > — тоже далеко не бэм. Всегда представляйте, что передадите этот проект другому разработчику, и как он это сможет легко поломать.
Я конечно понимаю, что толковать бэм можно и нужно по разному. Но:
1) Вложенность ВЕЗДЕ ужасна. Чтобы перебить в медиа запросе ваше правило, опять придется повторять эту вложенность
2) Разбивать стили кнопок на мелкие классы, это конечно «атомарно», но что-то я сомневаюсь, что дизайнер нагородил в макете 20 разных вариантов кнопок. Сделайте более осмысленные классы для кнопок. Пусть это будет .btn_blog, .btn_comments. Ссылка 'Read more' имхо вообще не должна являться .btn
3) Привязка в тегам, а тем более селекторы типа > — тоже далеко не бэм. Всегда представляйте, что передадите этот проект другому разработчику, и как он это сможет легко поломать.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Разбор таска по верстке (sass, pug, gulp, bem)