Size: a a a

2020 August 20

Р

Роман in БЭМ
Dmitry RunOFF
Если есть сложности, их нужно решать, а не забивать. Бутстрап и миксины тут в общем-то не при чём. Я лишь описал ситуацию.
Так я и предложил решение — удалить лишнюю зависимость. К БЭМ ни миксины, ни бутстрап отношения не имеют, аналогичный результат (даже лучше) можно получить и без них. Лучше решать такую «проблему».
источник

EG

Eugene Gromov in БЭМ
Если есть у кого-нибудь из спецов время и желание - прошу проверить мою верстку на соответсвтие именованию стилей по БЭМ, правильную разметку. Я только начинаю изучать, поэтому прошу рекомендаций опытных.

https://codepen.io/evlgromov/pen/eYZmKoe
источник

Р

Роман in БЭМ
Eugene Gromov
Если есть у кого-нибудь из спецов время и желание - прошу проверить мою верстку на соответсвтие именованию стилей по БЭМ, правильную разметку. Я только начинаю изучать, поэтому прошу рекомендаций опытных.

https://codepen.io/evlgromov/pen/eYZmKoe
Зачем <div id="app"> ?
источник

E

Elysium in БЭМ
Eugene Gromov
Если есть у кого-нибудь из спецов время и желание - прошу проверить мою верстку на соответсвтие именованию стилей по БЭМ, правильную разметку. Я только начинаю изучать, поэтому прошу рекомендаций опытных.

https://codepen.io/evlgromov/pen/eYZmKoe
источник

EG

Eugene Gromov in БЭМ
Роман
Зачем <div id="app"> ?
Javascript будет рендерит в app
источник

DR

Dmitry RunOFF in БЭМ
Роман
Так я и предложил решение — удалить лишнюю зависимость. К БЭМ ни миксины, ни бутстрап отношения не имеют, аналогичный результат (даже лучше) можно получить и без них. Лучше решать такую «проблему».
Роман, в чём Вы видите аналогичный результат? Я использую сеточную вёрстку. Этот подход покрывает 98% задач. В 2% я руками пишу медиа-запросы и размеры блоков. Почему вопрос к БЭМ? Потому что решение данной задачи по-бэм имеет ряд особенностей.
1) введение в html дополнительных (лишних) сущностей - это противоречие методологии. Если мы на выходе будем иметь такое: <nav class="nav"><div class="row"><div class="row__col row__col_xl_6"><div class="nav__item">
2) мы можем добавлять классы к существующим элементам и тащить с собой весь css со всеми возможными вариантами (потому что автоматически ни gulp, ни enb не подцепит css из cls="row", cls="col col-xl-6")
<nav class="nav row"><div class="nav__item col col-xl-6">
3) можем, как Вы предложили, писать руками весь css для каждого блока типов row, col и т.д, а потом своими же руками это править. Изолированность отличная. Продуктивность хромает, но если платят по часам, то какая разница?
4) можем использовать lostgrid (теже миксины, вид сбоку. вопрос, зачем)
5) можем использовать миксины sass от того же bs или любые другие.
@include media-breakpoint-up(sm) {
 @include make-col(6);
}

Мой вопрос не в том, нужны мне миксины или нет. А в том, можно ли не  указывать импорты (в частности @import "mixins»;) во всех блоках, а вынести на уровень сборщика - чтобы в момент сборки, он знал, где искать указанные в css миксины.
источник

MM

Mihail Mihail in БЭМ
Eugene Gromov
Если есть у кого-нибудь из спецов время и желание - прошу проверить мою верстку на соответсвтие именованию стилей по БЭМ, правильную разметку. Я только начинаю изучать, поэтому прошу рекомендаций опытных.

https://codepen.io/evlgromov/pen/eYZmKoe
сложнааааа. Слишком абстрагированно, неудобно ведь жонглировать кучей классов.
источник

EG

Eugene Gromov in БЭМ
Mihail Mihail
сложнааааа. Слишком абстрагированно, неудобно ведь жонглировать кучей классов.
Как то бы научиться делать проще) Это первый раз
источник

MM

Mihail Mihail in БЭМ
слишком буквально, особенно в моментах с миксованием. здесь, имхо, не нужна такая высокая степень абстракции.
источник

EG

Eugene Gromov in БЭМ
Mihail Mihail
слишком буквально, особенно в моментах с миксованием. здесь, имхо, не нужна такая высокая степень абстракции.
Я Вас не понимаю
источник

MM

Mihail Mihail in БЭМ
тут есть момент вкусовщины, но я бы в куче мест вообще не выделял блоки. блок делал бы либо том случае, если внутри него много элементов, либо если он повторяется еще где-нибудь.
если схематично накидать разметку, я бы так сделал:
источник

MM

Mihail Mihail in БЭМ
вообще слишком рано выделять блоки не нужно, имхо. в данной разметке на отдельный блок тянет только main (.page__main.main). Все остальное можно выделить в отдельные блоки только если они еще где-то повторяются.
источник

HH

Hbaf Hbaf in БЭМ
Ну линки адекватно вынесены в блок
источник

MM

Mihail Mihail in БЭМ
абстрактный класс link ? да, тут согласен.
источник

EG

Eugene Gromov in БЭМ
🤯
Спасибо за помощь. Буду разбираться и упрощать. Нужно понять сам принцип.
источник

DR

Dmitry RunOFF in БЭМ
разобрался. Вдруг кому пригодится. Сначала подключаются миксины в src, а затем пусть ищет всё остальное.
bundle.src('./common.blocks/mixins', 'css')
                   .pipe(sass)
источник

EG

Eugene Gromov in БЭМ
Mihail Mihail
абстрактный класс link ? да, тут согласен.
Почему main тянет на отдельный блок объясните вкратце пожалуйста.
источник

MM

Mihail Mihail in БЭМ
Eugene Gromov
Почему main тянет на отдельный блок объясните вкратце пожалуйста.
Потому, что там будет главный контент страницы. Параграфы текста, колонки, врезки и прочее, т.е. очень много разных элементов.
источник

EG

Eugene Gromov in БЭМ
Я решил переписать все заново по той схеме, что Вы накидали. Пришлось футер тоже в отдельный блок вынести.

<footer class="page__footer">
 <div class="footer">
   <div class="footer__list">
     <div class="footer__links">
       <span class="footer__link-header">React</span>
       <a class="footer__link link" href="#">What is React?</a>
       <a class="footer__link link" href="#">Why React?</a>
       <a class="footer__link link" href="#">What's new in React?</a>
     </div>
     <div class="footer__links">
       <span class="footer__link-header">Vue</span>
       <a class="footer__link link" href="#">What is Vue?</a>
       <a class="footer__link link" href="#">Why Vue?</a>
       <a class="footer__link link" href="#">What's new in Vue?</a>
     </div>
     <div class="footer__links">
       <span class="footer__link-header">Angular</span>
       <a class="footer__link link" href="#">What is Angular?</a>
       <a class="footer__link link" href="#">Why Angular?</a>
       <a class="footer__link link" href="#">What's new in Angular?</a>
     </div>
   </div>
   <div class="footer__subscribe">

   </div>
 </div>
 <div class="footer__copy">
   <p>Copyright&copy;2020</p>
   <p>Created by Gromov</p>
 </div>
</footer>
источник

EG

Eugene Gromov in БЭМ
Mihail Mihail
Потому, что там будет главный контент страницы. Параграфы текста, колонки, врезки и прочее, т.е. очень много разных элементов.
На Ваш взгляд правильный ли подход?
источник