Вопросы с меткой [бэм]
БЭМ (Блок, Элемент, Модификатор) — методология веб-разработки, созданная в Яндексе.
97
вопросов
0
голосов
1
ответ
34
показа
Как правильно написать вложенность в HTML?
<div class="out-work">
<h4 class="out-work-title">Наши работы</h4>
<div class="out-work-slider slider">
<...
0
голосов
1
ответ
33
показа
GitHub Pages не прогружают стили по BEM методологии
Пишу простой проектик, дабы потренироваться в BEM методологии, хотел залить его на GH Pages, но мои стили не находит.
Стили я подключал в корнях проекта, в папке pages/index.css в таком виде:
@import ...
0
голосов
1
ответ
20
показов
Выравнивание по флексбоксу
Существует мобайл-версия шапки следующего вида:
<header class="header"> // .header {display: flex}
<div class="header__logo"></div>
<...
0
голосов
1
ответ
45
показов
Слишком много css стили
Столкнулся с такой проблемой слишком много css стилей, каждому дать класс и стилизовать это нормально?
Думаю это просто ужас лишь на nav уходить 250строк кода, можете подсказать на какие то уроки ...
0
голосов
1
ответ
88
показов
Правильно ли я использую БЭМ?
Я только начал изучать БЭМ, сверстал часть сайта и пробовал по максимуму использовать БЭМ.
Я не могу понять, правильно ли я делаю?
ссылка на макет: https://www.figma.com/file/5D9pDuLtS042hzaoN69Kd7/...
0
голосов
1
ответ
39
показов
Как правильно назвать стили по БЭМ?
Знакомлюсь с понятием БЭМ. Есть боковое меню: сверху лого, ниже сами пукнты меню (каждый пункт состоит из иконки и текста рядом)
Назвал так:
.side-bar // блок
.side-bar__logo // элемент - лого
.side-...
0
голосов
0
ответов
22
показа
Не устанавливаются зависимости bem-project-stub
Следуя этому гайду клонировал репозиторий
git clone https://github.com/bem/project-stub.git --depth 1 start-project
Ошибок не было.
После npm install возникает такая ошибка:
npm WARN EBADENGINE ...
0
голосов
0
ответов
17
показов
Выбор изучения методологии
Учусь frontend-у по дорожной карте ,когда вопрос подошел к архитектуре разработки, то карта предложила мне BEM/OOCSS/SMACSS. Не могу определиться с выбором и имеет смысл учить все?
1
голос
1
ответ
33
показа
Как сделать вывод только одного значения count, а не всех сразу
Вопрос заключается в том , что при выборе элементов , допустим Аптечка , в строке В наличии должно вывестись 200 , при выборе элемента Деньги - 100 , но у меня выводятся все значения как это ...
0
голосов
0
ответов
21
показ
Модификатор в БЭМ
Есть вопрос по БЭМу, хотел бы уточнить, как правильно работать с Модификатором, его нужно записывать только с названием Блока (button button_red) или можно записывать и отдельно (button_red)?
-1
голос
2
ответа
76
показов
Как правильно переопределить свойство одного БЭМ-блока в другом?
У меня имеется такой БЭМ-блок:
.panel {
background-color: white;
border: 1px solid black;
}
Он довольно универсальный и используется на проекте во многих местах. Теперь появилась потребность на ...
0
голосов
0
ответов
33
показа
Не перегружена ли разметка?
Друзья, всем привет! После того как изучил БЭМ, верстаю только с ним. Но порой мне кажется, что моя разметка слишком перегружена длинными названиями классов, и читать её затруднительно. Нужен взгляд ...
-3
голоса
1
ответ
454
показа
Как задать padding БЭМ-блоку, если нельзя?
Я знаю, что БЭМ-блоку нельзя задавать отступы, в том числе padding. С margin все понятно, оно влияет на расположение блока, но почему нельзя задать паддинг? Если у меня, например, карточка товара, где ...
1
голос
1
ответ
77
показов
Удовлетворяет ли код БЭМ?
Всем привет, господа фронтенды, подскажите, удовлетворяет ли код соглашению по наименованию БЭМ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<...
0
голосов
0
ответов
87
показов
Нужно ли нижнее подчеркивании при именовании SCSS файлов?
заметил, что в некоторых сборках люди именуют scss файлы таким образом __header.scss, а кто-то именует просто header.scss, причем именование без нижнего подчеркивания задается при нахождение в ...
1
голос
1
ответ
24
показа
Что написано в коде блока-шаблона?
Пытаюсь понять, как правильно создавать готовую сборку для работы над вэб-проектами и дальнейшей сборки через webpack.
Нашел вроде бы неплохую статью про это: https://nicothin.pro/page/my-start-kit Но ...
0
голосов
1
ответ
299
показов
Как должна выглядеть файловая структура сайта по БЭМ?
Как должна выглядеть файловая структура многостраничного сайта по БЭМ при работе с PUG и SCSS? Ясно, что для каждого блока, элемента и модификатора должна быть своя папка, где хранятся css, js и html, ...
0
голосов
2
ответа
224
показа
Можно ли в БЭМ верстке подключать reset.css и применять символ * для сброса всех отступов?
Вычитал, что при верстке по БЭМ нельзя применять такие общие стили, как * { margin: 0; padding: 0; } и что нельзя подключать файл со сбрасыванием стилей, типа отмены подчеркивания ссылок, маркировки ...
0
голосов
1
ответ
134
показа
Можно ли при верстке по БЭМ использовать повторяющийся блок-обертку?
Можно ли в БЭМ верстке использовать блок-обертку wrapper вот таким образом? Меня смущает то, что обычно элемент, который находится в блоке вначале имеет его название, а потом через __ пишется само ...
0
голосов
1
ответ
198
показов
Каким элементам в css, при верстке можно не присваивать класс? [закрыт]
Как понять когда стоит задать имя класса элементу, а когда можно обойтись простой конструкцией "родитель элемент{}"
Пример:
<div class="block">
<p>Текст</p>
</...
0
голосов
0
ответов
22
показа
В БЭМ директива @extend не нужна?
Здесь описывается директива @extend которая "расширяет класс" чтобы не забыть использовать вместе с определённым классом другой класс(модификатор в БЭМ). Но модификатор в БЭМ не может ...
1
голос
0
ответов
345
показов
Перенос классов из html в scss сохраняя вложенность бэм.Sublime
Работаю в sublime, решил изучить scss. Раньше для переноса классов из HTML в чистый CSS пользовался плагином eCSSstractor и все было ок, работаю по методологии БЭМ.
Есть ли возможность переносить ...
0
голосов
1
ответ
72
показа
Как избежать вложенности в БЭМ?
Как избежать здесь вложенности по БЭМ? Присваивать ссылкам header__list-first-link и header__list-second-link или..?
.header {
display: flex;
}
.header__list {
display: flex;
justify-content:...
-1
голос
1
ответ
114
показов
БЭМ против SASS mixins
Возник такой вопрос: можно задать стили для блока с помощью общего класса по БЭМ, например:
<div class = 'parent'>
<button class = 'button parent__button'> button </button>
</...
0
голосов
1
ответ
139
показов
Как разделить компоненту React на блок и элемент
У меня возник вопрос. Если в БЭМ мы можем сделать блок как блок и как элемент задав в классе что то типа этого:
<div class="block_elem newBlock"></div>
То как можно это ...
1
голос
1
ответ
38
показов
Как создать html, css форму которую можно было бы интегрировать в любой сайт и избежать конфликта css?
Создал html, css форму. Необходимо размещать ее на множестве разных сайтов с разными стилями, скриптами, фреймворками и т.д. и т.п.
Как сделать так, чтобы данная форма легко встраивалась в любой сайт, ...
0
голосов
0
ответов
23
показа
Какой вариант именования более правильный по БЭМу?
Есть компоненты карточек, которые выглядят таким образом :
Корректен ли такой вариант наименования? Или правильнее писать не CircleCard, а CardCircle? (в проекте нет какого-то базового компонента ...
1
голос
1
ответ
67
показов
HTML разметка для БЭМ блока
В БЭМ методологии написано:
HTML разметка блока повторяется каждый раз, когда блок встречается на странице.
То есть, получается, что так делать нельзя?
<div class="menu">
<div ...
0
голосов
0
ответов
46
показов
HTML/CSS Данный код валидный наименованию классов по БЭМ?
<div class="skill">
<div class="skill__item">
<div class="skill-text>
<p class="skill-text__title">...</p>
<p ...
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>
Будет ...
0
голосов
1
ответ
163
показа
не работают медиа запросы в sass верстая по бэм
столкнулся с такой проблемой верстая макет по БЭМ и делая медиазапросы в sass файлах:
@media (max-width: 1200px)
.interview
padding-right: 30px
и код не работает в панели разработчика как ...
0
голосов
1
ответ
143
показа
Сортировка правил в CSS по БЭМ
В своем проекте я использую методологию БЭМ совместно с gulp. Таск для css выглядит следующим образом:
gulp.task('css', function(done) {
gulp.src(['src/assets/css/global/*.css', 'src/assets/css/...
1
голос
1
ответ
625
показов
Как сделать свой цвет рамки в компоненте q-input, когда компонент не в фокусе
Использую Quasar-Framework.
Интересует возможность изменения цвета рамки q-input, когда он не в фокусе.
По умолчанию, цвет рамки q-input серый, и только при фокусе обретает цвет, который был задан.
...
0
голосов
0
ответов
65
показов
Элемент 2-х блоков в БЭМ
У меня есть следующий html-код:
<header class="filter">
<h1 class="filter__title title-default">Каталог</h1>
<div class="filter__parameter dropdown">
<...
0
голосов
1
ответ
94
показа
Как правильно добавлять CSS классы БЭМ-блокам и элементами, связанные с темизацией?
Кнопка с иконкой, релизованная в соответствии с БЭМ (только не со стандартной схемой именования):
<button class="RegularButton">
<svg class="RegularButton-Icon" viewBox="0 0 24 24">
...
0
голосов
1
ответ
74
показа
Как сверстать на БЭМ первые буквы слова?
В БЭМ не используют селекторы тегов и идентификаторов. Стили блоков и элементов описываются через селекторы классов. Как тогда сверстать первые буквы у слова? Неужели каждой первой букве задавать ...
0
голосов
0
ответов
35
показов
Не работает медиаправило CSS
Устанавливаю медиаправила до 1200px, но срабатывает на 800px!!! В чем может быть причина??
Медиаправило:
@media (max-width: 1200px) {
.delivery {
display: none;
}
}
Html
<section class="...
0
голосов
1
ответ
185
показов
Использование БЭМ в HTML-верстке
После ознакомления с документацией и перехода к практике, все равно возникли проблемы с пониманием структуры, постоянно закрадываются сомнения в правильности использовании элементов вместо миксов и т....
0
голосов
1
ответ
197
показов
Переписать js скрипт по БЭМ
хочу переписать JS скрипт по методологии БЭМ. Чтобы скрипт можно было переиспользовать.
Но не совсем уверен, как правильно это сделать. Прошу вашей помощи.
(function() {
var items = '....
0
голосов
0
ответов
249
показов
Имена модификаторов в CSS по методологии БЭМ
На официальном сайте ru.bem.info в разделе FAQ заинтересовали два вопроса.
Первый:
Как выбрать имя модификатора?
Выбирайте имена модификаторов, опираясь на семантику, а не на
описываемые им ...
-1
голос
1
ответ
184
показа
Как оформить список по БЭМу
<nav>
<ul>
<li><a href="#">О Нас</a></li>
<li><a href="#">Услуги</a></li>
<ul class="SubMenu">
<li><a ...
0
голосов
1
ответ
48
показов
.header, .content, .footer являются компонентами или блоками?
.header, .content, .footer являются компонентами или блоками?
0
голосов
1
ответ
64
показа
БЕМ Правильно ли я дал классы по бем?
Правильно ли я дал классы по бем? Если нет, поправьте пожалуйста.
<div class="wrapper">
<header class="first-header">
<div class="first-header-inner">
<nav ...
0
голосов
1
ответ
39
показов
Соответствует ли следующий код БЭМ?
Соответствует ли следующий код БЭМ?
<div class="navbar">
<div class="navbar__container wrapper">
<div class="navbar__menu">
...
1
голос
1
ответ
89
показов
Структура БЭМ документа
Какая структура правильнее по БЭМ и почему?
1.
<div class="post">
<div class="post-entry">
<div class="post__title"></div>
<div class="post__text"></...
2
голоса
1
ответ
91
показ
модификаторы БЭМ
Есть
<div class="Card">
<div class="Status">
содержимое
</div>
</div>
Класс Status в стилях display: none.
Как через модификатор класса для Card сделать Status ...
1
голос
1
ответ
234
показа
Некоторые вопросы по БЭМ
Читаю БЭМ и появились некоторые вопросы:
"Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование"....
0
голосов
1
ответ
57
показов
БЭМ и состояния блока
Каким образом, в соответствии с БЭМ, реализовать кнопку имеющую два состояния: нажата и не нажата? Использовать псевдо-классы или создать модификаторы? Но ведь если создавать модификаторы управлять ...
1
голос
0
ответов
75
показов
Организация файлов по методологии БЭМ
Интересует как правильно структурировать файлы в проекте, если я придерживаюсь методологии именования БЭМ (не весь стэк). Сейчас у меня следующая структура:
base: layout, переменные, сетка
...
1
голос
1
ответ
1k
показов
Как собрать многостраничный БЭМ-проект c зависимостями на Gulp4 и/или Webpack4?
Я только недавно начал всеобъемлюще осваивать БЭМ-методологию (до этого использовал только БЭМ-нейминг). Мне очень понравилась эта концепция и хотелось бы полностью внедрить ее в свой воркфлоу.
Однако,...