Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
zontik24
9 / 9 / 4
Регистрация: 14.06.2013
Сообщений: 386
1

Смешивание концепции БЭМ с фреймворком для верстки

13.01.2018, 20:25. Просмотров 719. Ответов 4
Метки нет (Все метки)

Здравствуйте, переписываю верстку приложения под БЭМ. До модификаций верстка была выполнена с помощью bootstrap.

Насколько правильно смешивать стили bootstrap с концепцией БЭМ?

Например, мне нужно реализовать какое-нибудь меню - конструирую его с помощью bootstrap + применяю свой стиль (left-menu) для изменения визуализации
HTML5
1
2
3
4
5
<nav class="left-menu nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
</nav>
При использовании БЭМ, класс ссылки будет lm__nav__item

HTML5
1
2
3
4
5
<nav class="left-menu nav flex-column">
  <a class="lm__nav__item nav-link active" href="#">Active</a>
  <a class=" lm__nav__item nav-link" href="#">Link</a>
  <a class="lm__nav__item nav-link" href="#">Link</a>
</nav>
Если не использовать bootstrap-стили (nav-link), то придется все вручную прописывать

Приемлимо?
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.01.2018, 20:25
Ответы с готовыми решениями:

Принципы концепции БЭМ (блок - элемент - модификатор)
Здравствуйте. Доводилось ли кому нибудь реализовывать проекты с применением БЭМ методологии?...

БЭМ
Никто не подскажет хорошее руководство по БЭМ'у?Желательно, сайты на которых именно вы обучались, а...

БЭМ ли это?
С точки зрения БЭМ, правильно ли такое именование классов? Или новый блок не должен называться, как...

по для верстки
Приветствую! Подскажите, какое по используется для верстки сайтов Какие их преймущества и...

Написание классов по БЭМ
&lt;div class=&quot;news_readmore_wrap shade_green&quot;&gt; &lt;a class=&quot;news_readmore&quot; href=&quot;/&quot;&gt;Show more&lt;/a&gt; ...

4
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2803 / 2374 / 1029
Регистрация: 15.12.2012
Сообщений: 8,767
Записей в блоге: 3
13.01.2018, 20:32 2
zontik24, а где здесь БЭМ у Вас? В принципе трактовка данной методологии, как показывает практика у разработчиков довольно размытая, хотя есть чёткие рекомендации по именованию классов и модификаторов...

Цитата Сообщение от zontik24 Посмотреть сообщение
Насколько правильно смешивать стили bootstrap с концепцией БЭМ?
По большому счёту это не имеет никакого значения... БЭМ была создана для удобства именования классов и идентификаторов элементов с целью упрощения написания стилей и скриптов, дабы избавиться от абстрактных имён, а также для редактирования уже написанного кода... Если в будущем БЭМ упростит Вам жизнь, то её есть смысл использовать... На данный момент, судя по коду, Вы только усложняете себе жизнь...
1
zontik24
9 / 9 / 4
Регистрация: 14.06.2013
Сообщений: 386
13.01.2018, 20:44  [ТС] 3
Fedor92, да, я читал про четкое именование

Тогда вообще лучше оставить одну сетку от bootstrap, а структура будет выглядить примерно так:

HTML5
1
2
3
4
5
<nav class="left-menu">
  <a class="lm__nav__item" href="#">Active</a>
  <a class=" lm__nav__item" href="#">Link</a>
  <a class="lm__nav__item" href="#">Link</a>
</nav>
Типа того

Плюс БЭМа еще, насколько я знаю, в ускорении страничек, т.к обращение идет по уникальному идентификатору и не приходится перебирать вложенность DOM

Fedor92, как я понял - лучше всего выбрать либо то, либо другое?
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2803 / 2374 / 1029
Регистрация: 15.12.2012
Сообщений: 8,767
Записей в блоге: 3
13.01.2018, 21:06 4
Лучший ответ Сообщение было отмечено zontik24 как решение

Решение

Цитата Сообщение от zontik24 Посмотреть сообщение
Плюс БЭМа еще, насколько я знаю, в ускорении страничек, т.к обращение идет по уникальному идентификатору и не приходится перебирать вложенность DOM
Поправлю, БЭМ не имеет ни малейшего отношения к уникальным идентификаторам! И ускорение страниц здесь не причём... Для броузера нет разницы, как Вы назовёте блок и какие стили ему напишите... БЭМ лишь даёт чёткое представление о вложенности элементов при построении DOM-дерева, путём их правильного именования... Простой и банальный пример:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul class="list">
 
    <li class="list__item">
    
        <a href="" class="list__item__link"></a>
        
    </li>
    
    <li class="list__item">
    
        <a href="" class="list__item__link"></a>
        
    </li>
    
    <li class="list__item">
    
        <a href="" class="list__item__link"></a>
        
    </li>
    
</ul>
Наглядно видно, что у нас есть некий список с классом list, который содержит, вложенные элементы списка с классом list__item, в свою очередь из имени видно название родительского элемента, ну и элементы списка содержат ссылки с классом list__item__link... То есть разработчик, который будет писать код или его править будет знать вложенность элементов наверняка - собственно это основная задача методологии... Но если вложенность много больше, чем в моём примере, то имена классов становятся очень громоздкими... В результате каждый трактует БЭМ по своему с девизом- "БЭМ много не бывет"...
1
zontik24
9 / 9 / 4
Регистрация: 14.06.2013
Сообщений: 386
13.01.2018, 21:13  [ТС] 5
Fedor92, Спасибо за ответ!
0
13.01.2018, 21:13
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.01.2018, 21:13

Программы для верстки
Посоветуйте максимально простую в освоении программу для дизайновой верстки ( под тип Macromedia...

Оборудование для верстки
Добрый день! Вопрос таков : удобно ли будет использовать в связке 15'6 ноутбук (текст - Sublime) и...

Задачи для верстки
Есть какой-нибудь обширный список задач по верстке? Добавлено через 38 минут Чтобы было проще...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru