Телеграмм чат группы bem

12:02пожаловаться #1

MK

Header/User/Header-User.css на header/__user/header__user.css

EW

Докину ещё вопрос.

Используем классическую нотацию

const cn = withNaming({ e: '__', m: '_', v: '_' });

Есть ли возможность изменить (настроить) такой же нейминг папок на файловой структуре для элементов, чтобы было консистентно с тем, что лёжи внутри CSS?

Не совсем понятно, в новом стеке название папок никак не влияет на сборку, это работает на уровне договоренности, соответственно можно спокойно поменять нейминг папок

12:24пожаловаться #3

MK

ОК

12:27пожаловаться #4

2019 August 07

SB

Антон Виноградов

Скорее всего мы сразу пишем правильно) не припоминаю чтобы мы страдали из-за такой ошибки

Ну даже не знаю... 2 модификатора, у обоих элементы подключены в одинаковом порядке...
Варнинги сыпется.... Правда если отключить разбиение на чанки, то всё работает без предупреждений.

Возможно реально стоит просто включить опцию игнора да и всё...
Вдобавок заметил, что при разбиении на чанки (с включённым tree-shaking) вообще ломается порядок в common стилях.

Т.е. модфикатор находится на 987 строчке стилей, а блок/элемент, от которого зависит модификатор на 1174.
Хоть и ожидается наоборот.

06:30пожаловаться #5

2019 August 08

И

Здравствуйте, есть какой-то cвод правил для дизайнера, например по кнопкам?

Постоянная проблема что на проекте кнопки все разных размеров, размеры шрифтов и прочее. Сначала все идет хорошо есть пара тем кнопок, но со временем обрастает все всякими кнопками с немного меньшим шрифтом итп

09:54пожаловаться #6

И

приходится или городить модификаторы или создавать отдельную тему

10:13пожаловаться #7

🐵V

🐵 Nikita Vysotskii in БЭМ

Здравствуйте, есть какой-то cвод правил для дизайнера, например по кнопкам?

Постоянная проблема что на проекте кнопки все разных размеров, размеры шрифтов и прочее. Сначала все идет хорошо есть пара тем кнопок, но со временем обрастает все всякими кнопками с немного меньшим шрифтом итп

Пусть дизайнер либу яндексовую использует. Он у вас в фигме работает?

И

Пусть дизайнер либу яндексовую использует. Он у вас в фигме работает?

Да, в фигме

И

Какую либу?

10:26пожаловаться #10

🐵V

🐵 Nikita Vysotskii in БЭМ

Какую либу?

Оу, сорян я неправильно понял вопрос)

10:37пожаловаться #11

🐵V

🐵 Nikita Vysotskii in БЭМ

Здравствуйте, есть какой-то cвод правил для дизайнера, например по кнопкам?

Постоянная проблема что на проекте кнопки все разных размеров, размеры шрифтов и прочее. Сначала все идет хорошо есть пара тем кнопок, но со временем обрастает все всякими кнопками с немного меньшим шрифтом итп

Свода нет какого-то конкретного по кнопкам, скорее куча статей на медиуме.
Лучшее правило — не плодить лишние сущности, а если плодишь, то обоснуй, почему нельзя переиспользовать старые.
Но это должно у дизайнера в подкорке сидеть, особенно у продуктового.

10:52пожаловаться #12

SB

Здравствуйте, есть какой-то cвод правил для дизайнера, например по кнопкам?

Постоянная проблема что на проекте кнопки все разных размеров, размеры шрифтов и прочее. Сначала все идет хорошо есть пара тем кнопок, но со временем обрастает все всякими кнопками с немного меньшим шрифтом итп

Если это усложняет разработку / поддержку, то наверное имеет смысл поговорить с дизайнером. Возможно получится либо сократить кол-во вариаций, либо разбить кнопки на части. Свода правил нет, есть здравый смысл.

11:02пожаловаться #13

SB

У нас похожая проблема. Но в целом придерживаемся правила, что проектный стиль главнее конкретного макета

11:04пожаловаться #14

И

спасибо, будем работать в этом направлении

11:13пожаловаться #15

MK

6.0.0 / bem-components / Классические БЭМ-библиотеки / Библиотеки / БЭМ

Здравствуйте, есть какой-то cвод правил для дизайнера, например по кнопкам?

Постоянная проблема что на проекте кнопки все разных размеров, размеры шрифтов и прочее. Сначала все идет хорошо есть пара тем кнопок, но со временем обрастает все всякими кнопками с немного меньшим шрифтом итп

Хорошая отправная точка https://ru.bem.info/libraries/classic/bem-components/6.0.0/

ru.bem.info

11:19пожаловаться #16

MK

Коллеги, доброе утро.

У нас есть новость. Вчера на бэмапе мы делились стендом, который можно развернуть локально, чтобы пособирать свои темы.

Свершилось чудо и теперь не нужно устанавливать node.js, клонировать репозиторий и запускать npm install, npm start - стенд доступен всем и сразу, а своими темами вы можете делится в один клик (нужен аккаунт на github, чтобы сохранить ваше творение).

Стенд доступен по ссылке: https://codesandbox.io/s/whitepaper-controls-demo-vcvu6

Хорошего вам настроения)

Можно отделить АPI контролов от их представления самой (Темы). Будет понятно какими параметрами важно оперировать и какие величины нужно учесть. То что @yaroshevich показывал в демке на БЭМ-апе https://t.me/bem_ru/32193

Alexey Yarrr (qfox) in БЭМ

11:22пожаловаться #17

MK

@lamer если есть желание основательно копнуть в анатомию контролов, их семантику, формулы для высчета математики цвета для состояний их элементов, могу приобщить к Большому делу.

Задача близкая по смыслу к вариативным шрифтам только в контексте контролов.

11:37пожаловаться #18

И

Mikhail Koloskov

@lamer если есть желание основательно копнуть в анатомию контролов, их семантику, формулы для высчета математики цвета для состояний их элементов, могу приобщить к Большому делу.

Задача близкая по смыслу к вариативным шрифтам только в контексте контролов.

спасибо за предожение, на данный момент не раполагаю временем для этого, пока могу быть в качестве наблюдателя и "поребителя"

11:39пожаловаться #19

2019 August 09

SB

@awinogradov @tadatuta @yarastqt есть вопрос на счёт нэйминга компонетов элементов в BRC.

Вы полностью дублируете имя блока в имени элемета?

// ProductCard/Gallery/ProductCard-Gallery

import { IClassNameProps } from '@bem-react/core';
import { cnProductCard } from '../ProductCard';

export interface ProductCardGalleryProps extends IClassNameProps {}

export const ProductCardGallery: React.FC<ProductCardGalleryProps> = ({
    className
}) => {
    return (<div className={cnProductCard('Gallery', [className])} />)
}

Или так делаете (по типу withModVal, вместо withBlockModVal)?

import { IClassNameProps } from '@bem-react/core';
import { cnProductCard } from '../ProductCard';

export interface GalleryProps extends IClassNameProps {}

export const Gallery: React.FC<GalleryProps> = ({
    className
}) => {
    return (<div className={cnProductCard('Gallery', [className])} />)
}