Вопросы с меткой [бэм]

БЭМ (Блок, Элемент, Модификатор) — методология веб-разработки, созданная в Яндексе.

Фильтрация
Сортировка
Метки
0 голосов
1 ответ
34 показа

Как правильно написать вложенность в HTML?

<div class="out-work"> <h4 class="out-work-title">Наши работы</h4> <div class="out-work-slider slider"> <...
Dias's user avatar
  • 1
0 голосов
1 ответ
33 показа

GitHub Pages не прогружают стили по BEM методологии

Пишу простой проектик, дабы потренироваться в BEM методологии, хотел залить его на GH Pages, но мои стили не находит. Стили я подключал в корнях проекта, в папке pages/index.css в таком виде: @import ...
GontieFox's user avatar
0 голосов
1 ответ
20 показов

Выравнивание по флексбоксу

Существует мобайл-версия шапки следующего вида: <header class="header"> // .header {display: flex} <div class="header__logo"></div> <...
Александр Поселенцев's user avatar
0 голосов
1 ответ
45 показов

Слишком много css стили

Столкнулся с такой проблемой слишком много css стилей, каждому дать класс и стилизовать это нормально? Думаю это просто ужас лишь на nav уходить 250строк кода, можете подсказать на какие то уроки ...
Dias's user avatar
  • 45
0 голосов
1 ответ
88 показов

Правильно ли я использую БЭМ?

Я только начал изучать БЭМ, сверстал часть сайта и пробовал по максимуму использовать БЭМ. Я не могу понять, правильно ли я делаю? ссылка на макет: https://www.figma.com/file/5D9pDuLtS042hzaoN69Kd7/...
morphw's user avatar
  • 1
0 голосов
1 ответ
39 показов

Как правильно назвать стили по БЭМ?

Знакомлюсь с понятием БЭМ. Есть боковое меню: сверху лого, ниже сами пукнты меню (каждый пункт состоит из иконки и текста рядом) Назвал так: .side-bar // блок .side-bar__logo // элемент - лого .side-...
Stanislavkm's user avatar
0 голосов
0 ответов
22 показа

Не устанавливаются зависимости bem-project-stub

Следуя этому гайду клонировал репозиторий git clone https://github.com/bem/project-stub.git --depth 1 start-project Ошибок не было. После npm install возникает такая ошибка: npm WARN EBADENGINE ...
gleuv's user avatar
  • 1
0 голосов
0 ответов
17 показов

Выбор изучения методологии

Учусь frontend-у по дорожной карте ,когда вопрос подошел к архитектуре разработки, то карта предложила мне BEM/OOCSS/SMACSS. Не могу определиться с выбором и имеет смысл учить все?
Дурак онлайн's user avatar
1 голос
1 ответ
33 показа

Как сделать вывод только одного значения count, а не всех сразу

Вопрос заключается в том , что при выборе элементов , допустим Аптечка , в строке В наличии должно вывестись 200 , при выборе элемента Деньги - 100 , но у меня выводятся все значения как это ...
Дмитрий's user avatar
0 голосов
0 ответов
21 показ

Модификатор в БЭМ

Есть вопрос по БЭМу, хотел бы уточнить, как правильно работать с Модификатором, его нужно записывать только с названием Блока (button button_red) или можно записывать и отдельно (button_red)?
Денис's user avatar
-1 голос
2 ответа
76 показов

Как правильно переопределить свойство одного БЭМ-блока в другом?

У меня имеется такой БЭМ-блок: .panel { background-color: white; border: 1px solid black; } Он довольно универсальный и используется на проекте во многих местах. Теперь появилась потребность на ...
Ilya Loskutov's user avatar
0 голосов
0 ответов
33 показа

Не перегружена ли разметка?

Друзья, всем привет! После того как изучил БЭМ, верстаю только с ним. Но порой мне кажется, что моя разметка слишком перегружена длинными названиями классов, и читать её затруднительно. Нужен взгляд ...
Константин's user avatar
-3 голоса
1 ответ
454 показа

Как задать padding БЭМ-блоку, если нельзя?

Я знаю, что БЭМ-блоку нельзя задавать отступы, в том числе padding. С margin все понятно, оно влияет на расположение блока, но почему нельзя задать паддинг? Если у меня, например, карточка товара, где ...
Aloisa's user avatar
  • 31
1 голос
1 ответ
77 показов

Удовлетворяет ли код БЭМ?

Всем привет, господа фронтенды, подскажите, удовлетворяет ли код соглашению по наименованию БЭМ? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
Станислав Пивоваров's user avatar
0 голосов
0 ответов
87 показов

Нужно ли нижнее подчеркивании при именовании SCSS файлов?

заметил, что в некоторых сборках люди именуют scss файлы таким образом __header.scss, а кто-то именует просто header.scss, причем именование без нижнего подчеркивания задается при нахождение в ...
Dresosr's user avatar
  • 113
1 голос
1 ответ
24 показа

Что написано в коде блока-шаблона?

Пытаюсь понять, как правильно создавать готовую сборку для работы над вэб-проектами и дальнейшей сборки через webpack. Нашел вроде бы неплохую статью про это: https://nicothin.pro/page/my-start-kit Но ...
Dresosr's user avatar
  • 113
0 голосов
1 ответ
299 показов

Как должна выглядеть файловая структура сайта по БЭМ?

Как должна выглядеть файловая структура многостраничного сайта по БЭМ при работе с PUG и SCSS? Ясно, что для каждого блока, элемента и модификатора должна быть своя папка, где хранятся css, js и html, ...
Dresosr's user avatar
  • 113
0 голосов
2 ответа
224 показа

Можно ли в БЭМ верстке подключать reset.css и применять символ * для сброса всех отступов?

Вычитал, что при верстке по БЭМ нельзя применять такие общие стили, как * { margin: 0; padding: 0; } и что нельзя подключать файл со сбрасыванием стилей, типа отмены подчеркивания ссылок, маркировки ...
Dresosr's user avatar
  • 113
0 голосов
1 ответ
134 показа

Можно ли при верстке по БЭМ использовать повторяющийся блок-обертку?

Можно ли в БЭМ верстке использовать блок-обертку wrapper вот таким образом? Меня смущает то, что обычно элемент, который находится в блоке вначале имеет его название, а потом через __ пишется само ...
Dresosr's user avatar
  • 113
0 голосов
1 ответ
198 показов

Каким элементам в css, при верстке можно не присваивать класс? [закрыт]

Как понять когда стоит задать имя класса элементу, а когда можно обойтись простой конструкцией "родитель элемент{}" Пример: <div class="block"> <p>Текст</p> </...
Ким Грей's user avatar
0 голосов
0 ответов
22 показа

В БЭМ директива @extend не нужна?

Здесь описывается директива @extend которая "расширяет класс" чтобы не забыть использовать вместе с определённым классом другой класс(модификатор в БЭМ). Но модификатор в БЭМ не может ...
Александр Д.'s user avatar
1 голос
0 ответов
345 показов

Перенос классов из html в scss сохраняя вложенность бэм.Sublime

Работаю в sublime, решил изучить scss. Раньше для переноса классов из HTML в чистый CSS пользовался плагином eCSSstractor и все было ок, работаю по методологии БЭМ. Есть ли возможность переносить ...
Сергей Птиц's user avatar
0 голосов
1 ответ
72 показа

Как избежать вложенности в БЭМ?

Как избежать здесь вложенности по БЭМ? Присваивать ссылкам header__list-first-link и header__list-second-link или..? .header { display: flex; } .header__list { display: flex; justify-content:...
Arrov192's user avatar
-1 голос
1 ответ
114 показов

БЭМ против SASS mixins

Возник такой вопрос: можно задать стили для блока с помощью общего класса по БЭМ, например: <div class = 'parent'> <button class = 'button parent__button'> button </button> </...
Yaroslav Bondar's user avatar
0 голосов
1 ответ
139 показов

Как разделить компоненту React на блок и элемент

У меня возник вопрос. Если в БЭМ мы можем сделать блок как блок и как элемент задав в классе что то типа этого: <div class="block_elem newBlock"></div> То как можно это ...
DeViS13's user avatar
1 голос
1 ответ
38 показов

Как создать html, css форму которую можно было бы интегрировать в любой сайт и избежать конфликта css?

Создал html, css форму. Необходимо размещать ее на множестве разных сайтов с разными стилями, скриптами, фреймворками и т.д. и т.п. Как сделать так, чтобы данная форма легко встраивалась в любой сайт, ...
Иван's user avatar
  • 312
0 голосов
0 ответов
23 показа

Какой вариант именования более правильный по БЭМу?

Есть компоненты карточек, которые выглядят таким образом : Корректен ли такой вариант наименования? Или правильнее писать не CircleCard, а CardCircle? (в проекте нет какого-то базового компонента ...
eugenedrvnk's user avatar
1 голос
1 ответ
67 показов

HTML разметка для БЭМ блока

В БЭМ методологии написано: HTML разметка блока повторяется каждый раз, когда блок встречается на странице. То есть, получается, что так делать нельзя? <div class="menu"> <div ...
Andry Holovchak's user avatar
0 голосов
0 ответов
46 показов

HTML/CSS Данный код валидный наименованию классов по БЭМ?

<div class="skill"> <div class="skill__item"> <div class="skill-text> <p class="skill-text__title">...</p> <p ...
Лукас's user avatar
0 голосов
1 ответ
44 показа

Методология БЭМ (html class)

<ul class="menu"> <li class="menu-item"> <a href="#" class="menu-link> <img src="img.png" class="menu-link__icon"> </a> </li> </ul> Будет ...
Лукас's user avatar
0 голосов
1 ответ
163 показа

не работают медиа запросы в sass верстая по бэм

столкнулся с такой проблемой верстая макет по БЭМ и делая медиазапросы в sass файлах: @media (max-width: 1200px) .interview padding-right: 30px и код не работает в панели разработчика как ...
Ivan's user avatar
  • 13
0 голосов
1 ответ
143 показа

Сортировка правил в CSS по БЭМ

В своем проекте я использую методологию БЭМ совместно с gulp. Таск для css выглядит следующим образом: gulp.task('css', function(done) { gulp.src(['src/assets/css/global/*.css', 'src/assets/css/...
Ikor Jefocur's user avatar
1 голос
1 ответ
625 показов

Как сделать свой цвет рамки в компоненте q-input, когда компонент не в фокусе

Использую Quasar-Framework. Интересует возможность изменения цвета рамки q-input, когда он не в фокусе. По умолчанию, цвет рамки q-input серый, и только при фокусе обретает цвет, который был задан. ...
Arstanbek's user avatar
0 голосов
0 ответов
65 показов

Элемент 2-х блоков в БЭМ

У меня есть следующий html-код: <header class="filter"> <h1 class="filter__title title-default">Каталог</h1> <div class="filter__parameter dropdown"> <...
Ikor Jefocur's user avatar
0 голосов
1 ответ
94 показа

Как правильно добавлять CSS классы БЭМ-блокам и элементами, связанные с темизацией?

Кнопка с иконкой, релизованная в соответствии с БЭМ (только не со стандартной схемой именования): <button class="RegularButton"> <svg class="RegularButton-Icon" viewBox="0 0 24 24"> ...
Боков Глеб's user avatar
0 голосов
1 ответ
74 показа

Как сверстать на БЭМ первые буквы слова?

В БЭМ не используют селекторы тегов и идентификаторов. Стили блоков и элементов описываются через селекторы классов. Как тогда сверстать первые буквы у слова? Неужели каждой первой букве задавать ...
Frontender's user avatar
  • 2,605
0 голосов
0 ответов
35 показов

Не работает медиаправило CSS

Устанавливаю медиаправила до 1200px, но срабатывает на 800px!!! В чем может быть причина?? Медиаправило: @media (max-width: 1200px) { .delivery { display: none; } } Html <section class="...
Vitalii Dvk's user avatar
0 голосов
1 ответ
185 показов

Использование БЭМ в HTML-верстке

После ознакомления с документацией и перехода к практике, все равно возникли проблемы с пониманием структуры, постоянно закрадываются сомнения в правильности использовании элементов вместо миксов и т....
Stasia's user avatar
  • 161
0 голосов
1 ответ
197 показов

Переписать js скрипт по БЭМ

хочу переписать JS скрипт по методологии БЭМ. Чтобы скрипт можно было переиспользовать. Но не совсем уверен, как правильно это сделать. Прошу вашей помощи. (function() { var items = '....
Imp3l's user avatar
  • 535
0 голосов
0 ответов
249 показов

Имена модификаторов в CSS по методологии БЭМ

На официальном сайте ru.bem.info в разделе FAQ заинтересовали два вопроса. Первый: Как выбрать имя модификатора? Выбирайте имена модификаторов, опираясь на семантику, а не на описываемые им ...
Dmitry Komar's user avatar
-1 голос
1 ответ
184 показа

Как оформить список по БЭМу

<nav> <ul> <li><a href="#">О Нас</a></li> <li><a href="#">Услуги</a></li> <ul class="SubMenu"> <li><a ...
IlyaDrummer's user avatar
0 голосов
1 ответ
48 показов

.header, .content, .footer являются компонентами или блоками?

.header, .content, .footer являются компонентами или блоками?
user352495's user avatar
0 голосов
1 ответ
64 показа

БЕМ Правильно ли я дал классы по бем?

Правильно ли я дал классы по бем? Если нет, поправьте пожалуйста. <div class="wrapper"> <header class="first-header"> <div class="first-header-inner"> <nav ...
Кирилл Казаков's user avatar
0 голосов
1 ответ
39 показов

Соответствует ли следующий код БЭМ?

Соответствует ли следующий код БЭМ? <div class="navbar"> <div class="navbar__container wrapper"> <div class="navbar__menu"> ...
бэм's user avatar
  • 11
1 голос
1 ответ
89 показов

Структура БЭМ документа

Какая структура правильнее по БЭМ и почему? 1. <div class="post"> <div class="post-entry"> <div class="post__title"></div> <div class="post__text"></...
Имя's user avatar
  • 11
2 голоса
1 ответ
91 показ

модификаторы БЭМ

Есть <div class="Card"> <div class="Status"> содержимое </div> </div> Класс Status в стилях display: none. Как через модификатор класса для Card сделать Status ...
Nik's user avatar
  • 29
1 голос
1 ответ
234 показа

Некоторые вопросы по БЭМ

Читаю БЭМ и появились некоторые вопросы: "Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование"....
Дмитрий Гаврилов's user avatar
0 голосов
1 ответ
57 показов

БЭМ и состояния блока

Каким образом, в соответствии с БЭМ, реализовать кнопку имеющую два состояния: нажата и не нажата? Использовать псевдо-классы или создать модификаторы? Но ведь если создавать модификаторы управлять ...
wcobalt's user avatar
  • 1,182
1 голос
0 ответов
75 показов

Организация файлов по методологии БЭМ

Интересует как правильно структурировать файлы в проекте, если я придерживаюсь методологии именования БЭМ (не весь стэк). Сейчас у меня следующая структура: base: layout, переменные, сетка ...
Дмитрий Моисеев's user avatar
1 голос
1 ответ
1k показов

Как собрать многостраничный БЭМ-проект c зависимостями на Gulp4 и/или Webpack4?

Я только недавно начал всеобъемлюще осваивать БЭМ-методологию (до этого использовал только БЭМ-нейминг). Мне очень понравилась эта концепция и хотелось бы полностью внедрить ее в свой воркфлоу. Однако,...
Hugh Everett's user avatar