Публикации по теме 'bem'
БЭМ CSS в React
В этом посте я хочу ответить на два вопроса:
Что такое БЭМ? Как БЭМ применять к стилизации компонентов React?
БЭМ - это аббревиатура от Block Element Modifier. Это не фреймворк или библиотека. Это всего лишь небольшой кусочек большой головоломки архитектуры CSS. В частности, БЭМ - это строгое соглашение об именах селекторов CSS, которое обеспечивает ценную мысленную модель для составления компонентов. Позвольте мне объяснить…
Термин элемент в БЭМ не следует путать с..
Polymorph & React (стили React + BEM + JavaScript)
У меня опыт работы в сфере дизайна, и я пару лет работал с CSS/Sass, прежде чем по-настоящему увлекся JavaScript. Я смог решить знаменитую задачу FizzBuzz используя Sass раньше, чем смог решить ее с помощью JavaScript. Недавно я принял решение отказаться от использования Sass для своего стиля и вместо этого обратиться к JavaScript, поэтому, естественно, вся концепция стилей JavaScript меня восхищает.
Посмотреть живую демонстрацию Polymorph + React
В наши дни React очень..
Вопросы по теме 'bem'
CSS uglify — грубая задача
Интересно, есть ли какие-нибудь задачи Grunt, которые искажают CSS? Как и в коде GMail — все имена классов состоят из случайных 2-3 букв.
Я использую AngularJS и задачу grunt-angular-templates Grunt, чтобы объединить все шаблоны в...
381 просмотров
schedule
02.08.2022
БЭМ CSS с общими стилями
У меня есть небольшая путаница, когда дело доходит до использования глобальных стилей. Рассмотрим следующее:
Скажем, у меня есть таблица стилей, которая определяет, как должны быть сделаны кнопки:
/* Button.CSS */
button {
background-color:...
622 просмотров
schedule
31.07.2022
Отделите стили макета от стилей темы
У меня есть два блока/объекта ( User и Place ), которые визуально отображаются почти одинаково.
В BEM я должен поместить стили, связанные с сеткой макета, в один класс со стилями темы? Или я должен их разделить?
В БЭМ мне нужно создавать...
838 просмотров
schedule
02.03.2023
Методология БЭМ: разные вопросы (сброс, микс или модификатор)
:)
Сброс классов:
Допустим, у меня есть _base.scss и есть
ul {
margin-top: 20px;
margin-bottom: 10px;
}
Каков наилучший подход в БЭМ, чтобы всегда сбрасывать одно и то же. Я читал, что глобальные классы не разрешены....
224 просмотров
schedule
04.11.2022
БЭМ: Что могут изменять модификаторы?
Допустим, у меня есть следующий CSS для универсального компонента списка, использующий BEM и SCSS:
.list {
&__item {
&:not(:last-child) {
margin-right: .3em;
}
}
}
Я хочу добавить модификатор, который может сделать...
731 просмотров
schedule
08.02.2023
БЭМ? Блоки внутри блоков?
Немного не уверен, когда начинать новый контекст в БЭМ.
Должны ли все дочерние элементы всегда ссылаться на блочный элемент?
Например,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">...
4453 просмотров
schedule
22.09.2022
Объявление переменных Sass по методологии БЭМ
Я пытаюсь внедрить методологию БЭМ в свои переменные sass.
// Variables
// Colors
$color--blue--light: #3696D1;
$color--grey: #2D4452;
...
// Fonts
$body__font--sans-serif--roboto: 'Roboto', sans-serif;
...
/* Global */
body {...
804 просмотров
schedule
14.03.2024
БЭМ: Зная, как далеко разбивать компоненты и позиционировать компоненты?
Я начал использовать БЭМ с сайтом, который я оформляю. Я пытаюсь понять, как далеко я должен разбивать компоненты (блоки). Например, у меня есть заголовок, в котором есть панель навигации. Заголовок классифицируется как блок, но панель навигации...
123 просмотров
schedule
25.06.2023
Использование методологии БЭМ и небольшой размер файла
Я пытаюсь погрузиться в методологию БЭМ. Несмотря на то, что эта методология кажется обязательной для всех размеров проектов, я немного недоволен ею, или я просто пытаюсь использовать ее неправильно?
Используя БЭМ, CSS делится на что-то вроде...
190 просмотров
schedule
25.07.2022
Правильно ли я следую методу БЭМ?
<footer id="colophon" class="site-footer">
<div class="site-footer__form-container widget-area">
<div id="footer-sidebar1">
<?php if(is_active_sidebar('footer-sidebar-1')){...
173 просмотров
schedule
23.06.2023
Надлежащее использование БЭМ в CSS
Я опытный пользователь CSS, но недавно решил рискнуть и начать использовать БЭМ. По большей части я понимаю ценность использования такой плоской системы, избегая слишком конкретных селекторов и т. д.
Мой вопрос в том, является ли следующий подход...
169 просмотров
schedule
16.12.2023
БЭМ CSS, глобальные переменные и именование классов
Я пытаюсь определить подход к стандартизации классов в CSS для использования в нескольких проектах.
Я понимаю, что модель BEM позволяет упростить разработку, указав элементы блочного уровня для автономного стиля. Меня беспокоит этот подход в...
282 просмотров
schedule
07.05.2023
Управление специфичностью с помощью БЭМ на многоязычных веб-сайтах
Для языков стилей кажется обычной практикой использовать [lang=en] (или :lang(en) ).
Однако это соглашение может вызвать проблемы, особенно с модификаторами БЭМ. Рассмотрим этот CSS:
.block__element {
font-size: 12px;
}
[lang=ar]...
50 просмотров
schedule
26.06.2023
Должен ли элемент в БЭМ находиться внутри блока?
У меня вопрос по БЭМ. Можно ли иметь .block__element отдельно от block в качестве родителя? Я создаю сайт с помощью WordPress, где есть много других классов из темы, компоновщика страниц и плагинов, поэтому необходимость иметь родительские...
692 просмотров
schedule
04.12.2022
Соглашение об именах БЭМ для вложенных крошечных деталей
Только начал программировать по методологии именования БЭМ. Мне было интересно, как назвать вложенные крошечные части.
Я прикрепил образец макета ниже, пожалуйста, посмотрите.
Внутри h3 есть два span , и я хочу, чтобы они имели разный стиль....
370 просмотров
schedule
03.05.2023
Использование БЭМ в LESS как SASS с использованием родителей
Я пытаюсь изменить базовый класс, чтобы изменить подкласс на основе модификатора БЭМ.
Это хорошо работает в SASS, но сейчас я работаю с LESS.
Вот ссылка на SASS... https://css-tricks.com/the-sass-ampersand/
И вот код, который не работает......
27 просмотров
schedule
02.05.2023
