Я тоже использую для состояник isActive и прочее. Это распространенная пратика. А вот для модификаторов, с bemto про который писал в статье проблем нет, вот можно на сайте почитать, как работют миксины, запись минимальная, все понятно, руками простыни писать не приходится. https://github.com/kizu/bemto

block block_foo

Block mFoo

вот пример ада: block block_foo block_bar block_baz

Block mFoo mBar mBaz

и всё, намного короче

Так а селетор то для mBar у тебя как будет? БЕМ это же не просто про названия, а про создание "плоского" дерева селекторов, когда у тебя все стили привязаны к отдельным классам. Твой подход этого не позволяет сделать. БЕМ это не про название классов, а про то как сделать, что бы браузеру не нужно было парсить дом дерево, что бы применить твои стили. Уникальность имени block__foo - позволяет єто сделать, а вот mFoo нетю

.Block.mBar

PascalCase + camelCase создают условия, что коллизия не возможна

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

дольше?))))

да

это фигня на фоне например того что такое box shadow

Это чисто теория графов. найти вершину, или или найти пересечение двух ветвей.

и на фоне операций с DOM

Так это и есть операции с дом.

это не операция с дом, это лишь класс

операция будет когда будет вставляться меняться удаляться элемент

Я к тому, что прежде чем ругать BEM, все же стоит лучше разобраться для чего он вообще делался.

костыли это, их изначальная идея с префиксами была может и сложнее, но намного лучше

а БЭМ был идеально актуален для ие6

Бэм и сейчас актуален

Нет лучшего способа структурировать стили

БЭМ не использует умножение классов

есть, я показал

думаете бэм ужасен? это вы еще css in js не видели

Бэм и сейчас актуален

Рустам, не доконца понял, просто понял его суть, и для чего он.

думаете бэм ужасен? это вы еще css in js не видели

Видели, по этому мы общаемся в комьюнити Vue, а не React :))))

есть на самом деле способ как это ещё упростить

Polymer

есть, я показал

Это не то... Не хочу вступать в полемику. Кто хочет чистоты стилей, и четких правил - сам приходит к БЭМ.

Polymer

полимеры вместе с vue?

ага

да вы батенька знатный извращенец

почему? ShadowDOM

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

когда я верстал под ие6, уже тогда я изобрёл аналог БЭМ под ие6

я помню стили типа Block_In_In_In

была и остается (но уже никогда не реализуют) спецификацию 4 псевдоэлементов

я помню стили типа Block_In_In_In

В таком случае вы никогда не верстали по БЭМ. Раз помните такие стили.

:)

вот эта спецификация - это то, что на самом деле нужно

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

прямые дети внутри, обёртки

давайте я накину вам проблем от БЭМ

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

как будут выглядеть классы?

div>child>child>child>child>child

такое^

В беме нет понятия, детей.

я говорю как будут выглядет ьклассы?

дизайн так сделан, по другому никак

Выкидываешь из БЭ элемент т.к. в большинстве случаев элемент и блок это одно и тоже Берёшь PascalCase для названий блоков camelCase для названий состояний и клеишь их через ., а не через эту дурь с название__состояние. Когда блок в блоке склейка через одинарное подчёркивание, а не через двойное. Это намного красивее, чище, короче и понятнее чем БЭМ

вот это звучит гораздо более годно

div>child>child>child>child>child

слышали про методологияю FUN ? она отлично работает вместе с бэм

Рустам, вы сейчас задали вопрос, по которому понятно, что вы вообще не понимаете, что такое бем. Зачем тратить время на безсмысленный спор, лучше возьмите и прочитайте хорошую статью по бему. Возможно вы откроете для себя, что-то новое полезное.

слышали про методологияю FUN ? она отлично работает вместе с бэм

нет, я свой гибрид изобрёл

почитайте

дети без смысла - класс .in, элемент в списке .e, стили для них через > всегда, и никаких коллизий в итоге

Рустам, вы сейчас задали вопрос, по которому понятно, что вы вообще не понимаете, что такое бем. Зачем тратить время на безсмысленный спор, лучше возьмите и прочитайте хорошую статью по бему. Возможно вы откроете для себя, что-то новое полезное.

так я задал практический вопрос верстальщика, как он решается в БЭМ?

и да, про полимеры вместе с vue, это как то слишком экстра. У меня есть сомнения на тему того что вы хорошо представляете себе о чем говорите

даже с ангуляром и реактом вместе работают

другая проблема - а зачем тогда нужны vue angular и react?

Рустам, вы сейчас задали вопрос, по которому понятно, что вы вообще не понимаете, что такое бем. Зачем тратить время на безсмысленный спор, лучше возьмите и прочитайте хорошую статью по бему. Возможно вы откроете для себя, что-то новое полезное.

+1

ооо, а я думаю, откуда так воняет

даже с ангуляром и реактом вместе работают

это обычно переходное состояние одного в другое

ERROR: S client not available

вы в смысле мне пытаетесь сказать что эта метология заточена толкьо для решения одной какой-то проблемы?

напиши бэм на 4 уровня глубину + состояние - как выглядит класс

Ты про такое?))) .block .block__elem1 .block__elem2 .block__elem3 Исходя из твоего вопроса, вижу что ты пока незнаком с БЭМ) Но ниче, это нормально сразу его не понять. Есил коротко БЭМ для верстки это как привнесение возможности программирования (типа препроцессоров, где есть возможности JS) но по средством именования классов (и не только). БЭМ сущность (блок с его элементами и модификаторами) рассмотрим ее на примере языка Java, Блок это как класс в джаве, элементы как методы, а модификаторы типа переменных и передаваемых в методы аргументов. Каждая БЭМ сущность это назависимый блок верстки на сайте, где все элементы и модификаторы внутри имеют как бы область видимости только внутри этого блока. Его можно спокойно переносить из места в место и верстка при этом не "потечет". И это круто, ты можешь использовать одни и теже имена для элементов для всех блоков, но они не будут мешать другу другу. БЭМ это пожалуй лучший на сегодняшний день подход для верскти, а так же он применим к любому языку и вообще организации файлов в проекте. К сожалению по БЭМ мало практических примеров, потому и возникают такие вот недопонимания и необоснованные наговоры на него)

Я тоже использую для состояник isActive и прочее. Это распространенная пратика. А вот для модификаторов, с bemto про который писал в статье проблем нет, вот можно на сайте почитать, как работют миксины, запись минимальная, все понятно, руками простыни писать не приходится. https://github.com/kizu/bemto

Без этой либы даже и не знаю как теперь работать)))

Подржжите

Выше писали, что жест не совместим с вью

Это как вообще

Я не трогал, но вопросы это у меня вызывает

Без этой либы даже и не знаю как теперь работать)))

Аналогично :)

привет всем. имею глобальный фильтр - Vue.filter('singleDivider', (value) => { return value ? value / 1000 : null }) но есть еще пара, которые хочу добавить в глобальные фильтры. Мне что - писать каждый раз Vue.filter(bla-bla) или как-то можно объединить их?

привет всем. имею глобальный фильтр - Vue.filter('singleDivider', (value) => { return value ? value / 1000 : null }) но есть еще пара, которые хочу добавить в глобальные фильтры. Мне что - писать каждый раз Vue.filter(bla-bla) или как-то можно объединить их?

а ты хотел что-то типа такого? Vue.filters({ one: (text) => { … }, two: (text) => { … } })

а ты хотел что-то типа такого? Vue.filters({ one: (text) => { … }, two: (text) => { … } })

да - это годный вариант?

ну вообще, можно было бы написать всё то же самое, только через Object.entries(), например.

let filters = { one: …, two: … } Object.entries(filters) .forEach(f => Vue.filter(...f))

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

а ты хотел что-то типа такого? Vue.filters({ one: (text) => { … }, two: (text) => { … } })

написал так: Vue.filters({ singleDivider: (value) => { return value ? value / 1000 : null }, doubleDivider: (value) => { return value ? value / 100000 : null }, roundDown: (value) => { return value ? Math.round(value) : null } }) сборщик ругается так - __WEBPACK_IMPORTED_MODULE_0_vue__.default.filters is not a function

так погоди, такого нет. Это я просто спросил, какую запись ты хочешь видеть.

я просто не вижу проблемы писать Vue.filter(name, func) несколько раз.

так погоди, такого нет. Это я просто спросил, какую запись ты хочешь видеть.

))) мы не поняли друг друга ))

я просто не вижу проблемы писать Vue.filter(name, func) несколько раз.

придется несколько раз писать?

let filters = { one: …, two: … } Object.entries(filters) .forEach(f => Vue.filter(...f))

вот можешь вот такую штуку сделать, и тогда всё норм будет.

вот можешь вот такую штуку сделать, и тогда всё норм будет.

спасибо конечно - но проще по отдельности написать каждый фильтр и забыть о нем ))

Разве данные из props не реактивные? А то рендерю список, кликаю по пункту, по клику иду обновляю поле active - а в DOM класс не появляется. <div class="city-item" :class="{active:item.active}" @click="onClick" :data-id="item.id" v-for="item in list" > {{ item.address }} </div> list приходит в props. Класс active не включается. http://prntscr.com/filoia

Не плохо было бы увидеть js часть компонента.

Функцию onClick

А если вынести <template v-for="item in items"> такое же поведение?

Разве данные из props не реактивные? А то рендерю список, кликаю по пункту, по клику иду обновляю поле active - а в DOM класс не появляется. <div class="city-item" :class="{active:item.active}" @click="onClick" :data-id="item.id" v-for="item in list" > {{ item.address }} </div> list приходит в props. Класс active не включается. http://prntscr.com/filoia

у вас какие-то проблемы с тремя бэктиками

Функцию onClick

http://prntscr.com/filtx0

у вас какие-то проблемы с тремя бэктиками

с чем? о_0

А если вынести <template v-for="item in items"> такое же поведение?

не могу так вынести, вот полный темплейт <template> <scrollbar :style="styleObject" class="citiesList" ref="scrollbar"> <div class="city-item" :class="{active:item.active}" @click="onClick" :data-id="item.id" v-for="item in list" > {{ item.address }} </div> </scrollbar> </template>

с символом обратной кавычки.

с символом обратной кавычки.

странно, у меня иначе отображается. Код выкладываю после тройной обратной кавычки - вроде многострочный код так выкладывается. Мб что-то с вашей темой? Вот как у меня отображается http://prntscr.com/filw52