Вы совершаете ошибку, сравнивая методологию с инструментам/конкретными реализациями

1. Нет. Есть много готовых блоков, но прямого аналога бутстрапа, насколько мне известно, нет. Впрочем, использовать бутстрап с БЭМ в любом случае не будет удобно, ведь создатели бутстрапа не следуют методологии БЭМ.
2. Нет. Вы можете использовать любой препроцессор и это не будет противоречить БЭМ. В большинстве библиотек используется stylus.
3. По этой методологии можно делать все, что угодно) Даже детей называть, хоть и не все понимают подобный юмор.

@VVE главное относится к БЭМу как к философии ;) Понимать основную суть. Всё остальное, весь bem-tools - это только помощники для удобной реализации данной философии на практике.

БЭМ ставит свои рамки, что позволяет подходить к проектированию более осознано и качественно.

П.Н. С каждым новым блоком БЭМ становится всё ближе к осознанию.

По этой методологии можно делать все, что угодно) Даже детей называть, хоть и не все понимают подобный юмор.

:+1:

Ну так-то enb-less в npm тоже есть, можно для less пользоваться. Но не наступай на грабли, забудь о less бери сразу stylus

Однако, чтобы понять как применять БЭМ. Не стоит смотреть на него с "башни" Joomla или CMS. Тут для понимания нужен другой подход.

Представьте, для начала, что вы верстальщик, и вам нужно сверстать простой статичный сайт.

Это первая ступень с которой нужно понимать БЭМ. А уже потом дойдете до того как запустить ракету на БЭМ в космос.

Огромное спасибо! но полного ответа, по-моему, не было, а это, по-моему, важно для новичка, чтобы понять, стоит ли этим заниматься. Поэтому, по-моему, для новичка нужно не "представить, что нужно сверстать простой статичный сайт", а сразу понять (пусть поверить, а не понять), что есть такие-то границы применимости. Например, что о СУБД можно не мечтать, о CMS с их простыми редакторами для пользователя - тоже. Или, наоборот, что все (написать, что именно) это есть, просто сначала надо освоить азы. По-моему, это должно быть четко написано на первой странице проекта. По-моему, отношение к БЭМ как к философии вредно для его продвижения. Полезнее - если считать, что правильная философия позволила команде БЭМ создать и правильные инструменты, и правильные библиотеки. Как и любое "уникальное торговое предложение", это, по-моему, должно быть в самом начале сайта и крупными буквами. P.S. На первый взгляд (немножко пробежался по форуму), в этой команде намного лучше общение, чем "в целом по стране", стиль текстов... Спасибо!

Никакие инструменты и/или технологии, связанные с БЭМ, не ограничивают вас в выборе СУБД. С CMS все немного сложнее - насколько мне известно, специальную CMS под БЭМ еще никто не делал. С другой стороны, можно привнести БЭМ в любую из существующих, но какие именно технологии/инструменты при этом использовать - нужно будет решать самому.

Правильная философия позволила команде БЭМ создать и правильные инструменты, и правильные библиотеки для фронт-енд разработки.

Большое спасибо! Но в CMS, если я верно понимаю, есть весьма важные вещи: 1) для работы с СУБД, 2) редактор в административном разделе, чтобы пользователь мог (не ломая верстку, конечно) сделать небольшие. правки. Надеюсь, у вашей команды есть адекватные решения, но я их пока, по близорукости, не увидел. Покажете? Привнести же БЭМ в одну из существующих CMS, по-моему, может только команда их разработчиков.

@VVE Вопросы действительно очень хорошие, попробую ответить подробно на все.

В чем новизна, в чем преемственность

На сегодняшний день нельзя сказать, что БЭМ предлагает что-то совершенно уникальное. Когда все только начиналось несколько лет назад, БЭМ действительно был новым подходом к организации фронтенда. Сейчас же очень многие ребята пропагандируют примерно те же идеи, а W3C даже приняло стандарт Web Components, который по своей сути очень созвучен идеям БЭМ. Если очень коротко, то БЭМ — это про компонентный подход к разработке фронтенда, во многом вдохновленный практиками вроде ОПП, которые существуют во «взрослом» программировании уже десятки лет.

1) при переходе на методологию БЭМ можно забыть о Bootstrap ? Тут все это есть, мне нужно только изучить?

Bootstrap — это несколько сверстанных блоков, если говорить в терминах БЭМ. Т.е. уместно сравнивать Bootstrap и, скажем, библиотеку bem-components, а не методологию. Сейчас в bem-components чуть меньше блоков, чем в Bootstrap, но помимо нее существует еще ряд библиотек, которые в сумме дают примерно тот же набор.

При этом Boostrap, в отличие от БЭМ методологии, ничего не говорит о том, как закладывать архитектуру проекта, как писать свои блоки, как масштабировать разработку по людям. Т.е. вот есть кнопки/инпуты/переключатели, а дальше — думай сам.

БЭМ же в первую очередь решает задачу обеспечения гибкой разработки и переиспользуемых компонент, позволяет строить дешевые в поддержке долговечные проекты. А готовые компоненты и инструментарий, построенные по методологии — это лишь приятный бонус.

2) при переходе на методологию БЭМ можно забыть о LESS ? Тут все это есть, мне нужно только изучить?

Как уже писали выше, БЭМ не накладывает никаких ограничений на используемые препроцессоры. В библиотеке bem-components опционально используется Stylus. Можно продолжать использовать LESS.

При этом мы предоставляем заготовку проекта под названием project-stub — «комбайн», где сборка настроена таким образом, чтобы автоматически компилировать стили, добавлять префиксы и сжимать. Но для каждого этапа используются те же распространенные инструменты, которые используются повсеместно. Ничего специфичного для БЭМ, кроме собственно сборки кода блоков в общий бандл, в этом процессе нет.

3) по этой методологии можно делать работы и для CMS (WP, Joomla)?

Безусловно. В этом топике описан пример организации работы для Wordpress. Разумеется, способы на этом совершенно не ограничиваются.

Отвечая на уточняющие вопросы про границы применимости, соглашусь с высказыванием @apsavin: «По этой методологии можно делать все, что угодно». Важно понять, что БЭМ состоит из нескольких больших слоев, которые на самом деле могут использоваться отдельно друг от друга:

1. Методология — это именно набор рекомендаций («делай так и будет лучше, чем если делать иначе»). Самые простые и очевидные вещи: если использовать селекторы по тегам, повышается связанность кода, а значит сложнее рефакторить и невозможно использовать верстку повторно, если использовать id в качестве селекторов, то нельзя этот же блок второй раз добавить на страницу. И так далее. Методология в этом смысле вообще никак не касается ни языка программирования, ни CMS, ни БД. Они могут быть любые, их может быть несколько, при этом рекомендации продолжат работать в любом случае.
2. Инструменты — сюда входят всякие помощники при работе по методологии. История их появления очень простая: мы, разрабатывая проекты, столкнулись с какими-то задачами, которые приходилось делать часто и вручную. Написали инструментарий, который бы помог это все автоматизировать: создавать блоки, собирать из них бандлы, поднимать разработческий сервер, оптимизировать результаты перед деплоем и так далее. При этом можно использовать методологию и не пользоваться инструментами вообще. Можно использовать только ту часть инструментов, которая подходит на данном конкретном проекте, комбинируя их с другими.
3. Библиотеки готовых блоков — это как раз и есть конкуренция Bootstrap, только реализованная по методологии и с использованием инструментов. Переписать Bootstrap на БЭМ возможно (есть несколько репозиториев с экспериментами на эту тему), а обратное не имеет смысла. При этом мы убеждены, что научившись использовать БЭМ-библиотеки, вернуться к Bootstrap не захочется.

Возвращаясь к применимости, повторюсь, что методология применима везде без исключения. Применимость инструментов уже значительно ниже. Например, они требуют node.js (или io.js), предполагают этап сборки и определенные соглашения по именованию файлов.

Но, как нам кажется, эти требования скорее упрощают, чем усложняют задачу — вместо того, чтобы каждый раз, начиная новый проект, думать, как же организовать файловую систему, как назвать файлы, как обеспечить оптимизацию конечного результата, мы всегда делаем все одинаково, а значит не тратим время на те моменты, которые уже однажды хорошо продумали и проверили на множестве проектов в течение многих лет. Кроме того, это автоматически упрощает масштабирование команды — разобравшись с БЭМ-проектом однажды, разобраться со следующим будет значительно проще.

Что же касается применимости библиотек блоков, то тут есть два варианта ответа:

• Они либо применимы в той же степени, в которой применим Bootstrap (для этого потребуется собрать dist, подключить суммарный CSS + JS для всех блоков) и копировать HTML-сниппеты с bem.info. Очевидно, что при таком подходе можно использовать любые CMS и БД.
• Либо применимость значительно ниже (потребуется специальный «трехзвенный» подход к архитектуре сервиса), но зато результат гораздо мощнее. Платой за мощность окажется необходимость иметь дополнительный слой на сервере. Подробнее про это я расскажу в отдельном посте на форуме в ближайшее время.

@VVE У вас есть какая-то конкретная задача которую вы хотите решить с помощью БЭМ? Или конкретная CMS?

Конкретной задачи нет, я учусь. Мне кажутся наиболее интересными Joomla и Битрикс.

@VVE Если конкретной задачи нет, я бы предложил посмотреть в сторону полностью статичных сайтов. Например, по такой схеме:

1. Структура сайта описана в JSON-файле.
2. Все содержимое страниц находится в markdown-файлах.
3. Далее пишется скрипт, который бы на основе описанной структуры и содержимого страниц, сгенерил все необходимые HTML-файлы.
4. Далее достаточно будет настроить сборку, например, на travis, чтобы на каждый push в репозиторий, автоматически пересобирался готовый сайт.

Такой подход очень просто реализовать на полном наборе БЭМ-технологий, а результат оказывается очень надежным, нетребовательным к хостингу (можно использовать бесплатные github pages), очень простым и выдерживающим любую нагрузку. Кроме того, не потребуется использовать ничего, кроме JavaScript.

Вот небольшой обзор существующих для этой цели решений: https://staticsitegenerators.net/

Если такой вариант окажется интересен, готов подсказать подробнее, как организовать это все на БЭМ-стеке.

Огромное спасибо! Для изучения нужно попробовать. Но, мне кажется, обычно сайты (даже лэндинги) должны быть с CMS, чтобы администратор клиента не был беспомощен без верстальщика. Даже простые сайты. Пожалуйста, не обращайте внимание на категоричность моих слов. Я всегда понимаю, что могу быть абсолютно неправ. Особенно в разговоре с Вами, у которого знаний и опыта в этой области гораздо больше.

@VVE

чтобы администратор клиента не был беспомощен без верстальщика.

Как раз при структуре подобной той что описал @tadatuta можно в дальнейшем обходиться без верстальщика. Markdown очень прост в освоении.

@kompolom Возможно, Вы согласитесь, что:

1. CKEditor (именно его обычно подключают к Joomla и WordPress) и редактор в Битрикс намного удобнее Markdown (у меня были случаи убедиться в этом; для пользователей, по моему ограниченному опыту, эталон - MS WORD, все отличающееся от него они отвергают и хотят вставлять на страницу куски из WORD и EXCEL).
2. В CMS есть управление правами пользователей и административный раздел (хотя бы затем, чтобы посетители не могли редактировать, а администратор мог; а, например, на сайте гаражного кооператива нужны разные права доступа для простых членов и правления; думаю, что и на сайтах других сообществ, типа школ, - тоже).
3. Для А/Б тестирования лэндинга, наверное (?), HTML+CSS+JavaScript - недостаточно
4. авторы CMS (особенно Битрикс) обычно заявляют, что их CMS содержат мощные средства против атак.
5. в CMS есть СУБД, и работа с ним происходит на более высоком уровне по сравнению с обычной связкой PHP+MySQL.
6. в CMS есть и другие полезные решения "в коробке". У вас есть решения по этим пунктам? Наверное, моя горячность CMS-пропагандиста развеселила Вас. Новички всегда смешат.

@tadatuta

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

после знакомства с БЭМ я серьёзно стал смотреть на вариант использования статических сайтов :)

@VVE Уверяю, от CMS Вы уйдёте :) Когда поймёте что, да как ;) Все (или почти) начинали с CMS.

А вообще всё от ситуации зависит :)

Может быть, @ilyar сможет рассказать что-нибудь про то, как он соединял БЭМ-инструментарий с UMI.CMS. Насколько я вижу, даже что-то начинало выкладываться в открытый доступ.

@apsavin спасибо за вопрос, на текущий момент umi-bem-project-stub сильно отстал от текущих БЭМ инструментов и библиотек, и еще совсем не готов чтобы о нем говорить.

@VVE

1) CKEditor (именно его обычно подключают к Joomla и WordPress) и редактор в Битрикс намного удобнее Markdown (у меня были случаи убедиться в этом; для пользователей, по моему ограниченному опыту, эталон - MS WORD, все отличающееся от него они отвергают и хотят вставлять на страницу куски из WORD и EXCEL).

Если хранить исходники на github, то можно использовать интерфейс самого github в качестке wysiwyg-редактора.

А вот несколько браузерных редакторов маркдауна: http://epiceditor.com/ https://github.com/lepture/editor https://github.com/bergie/hallo http://www.jplugins.net/bootstrap-markdown/ http://kevo.io/pagedown-bootstrap/ Список можно продолжать долго ;)

2) В CMS есть управление правами пользователей и административный раздел (хотя бы затем, чтобы посетители не могли редактировать, а администратор мог; а, например, на сайте гаражного кооператива нужны разные права доступа для простых членов и правления; думаю, что и на сайтах других сообществ, типа школ, - тоже).

Очевидно, что задачу «чтобы посетители не могли редактировать, а администратор мог» решает уже тот факт, что у администратора есть доступ к хостингу (или, скажем, github-аккаунту), где опубликован сайт, а у посетителей нет. Более сложные ситуации, когда существуют разные роли пользователей, конечно, потребуют динамической админки, но результат по-прежнему может быть статичными HTML-страницами. Хотя соглашусь, что для сложных ситуаций статика далеко не всегда подходит.

3) Для А/Б тестирования лэндинга, наверное (?), HTML+CSS+JavaScript - недостаточно

Вполне можно обойтись и статикой. Самый простой вариант — это просто на один день опубликовать одну версию, а на следующий — другую :) Ну а если нужна какая-то логика при выборе версий, то ее можно написать либо прямо на клиенте, либо в настройках nginx/apache/etc.

4) авторы CMS (особенно Битрикс) обычно заявляют, что их CMS содержат мощные средства против атак.

Статичный HTML по определению в бесконечное количество раз более защищен — взламывать просто нечего, все, что доступно пользователю — это те текстовые страницы, которые и так в свободном доступе.

5) в CMS есть СУБД, и работа с ним происходит на более высоком уровне по сравнению с обычной связкой PHP+MySQL.

Подход, который я описывал, в принципе не требует базы данных. Но при необходимости собирать статику из БД, никто не ограничивает вас в выборе любых ORM.

6) в CMS есть и другие полезные решения "в коробке".

Безусловно. Вопрос лишь в том, действительно ли они так часто нужны или их применяют по привычке? Зачастую использование CMS похоже на заколачивание гвоздей микроскопом. Вот, например, размышление на тему от западных коллег.

Но не поймите превратно, я ни в коем случае не отговариваю от использования CMS там, где это оправдано задачами сайта.

@tadatuta приведенные редакторы маркдауна, скорей браузерные текстовые редакторы с хепером разметки и перепросмотра маркдауна, существует ли действительно wysiwyg-редактор маркдауна (браузерный текстовый процессор который в качестве исходника редактируемого документа использует маркдаун)?

@ilyar если я правильно тебя понял, то, скажем, hallo работает именно так: http://hallojs.org/demo/markdown/ (верхняя часть демки — это именно отрендеренный HTML, который можно редактировать in place). Уверен, что есть еще.

@VVE Я конечно не считаю визуальный редактор чем то хорошим, для меня это "штука которая все портит" но в то же время, ничто не мешает его использовать в связке с БЭМ. Из практики, большинство моих клиентов понятия не имеют что такое БЭМ, даже слова такого не слышали, пользуются своим визуальным редактором как обычно, при этом сайты сделаны на БЭМе.

Мне кажется вам просто нужно попробовать что то сделать самому. А рассуждения выше - это попытка объяснить какой на вкус банан тому кто его не пробовал...

Со своей стороны готов оказать посильную помощь в освоении.

Большое спасибо! Попробую.

@kompolom а каким визуальным редактором пользуются, ничего не подозревающие о БЭМе, заказчики?

@tadatuta Где я могу посмотреть подсказку, о которой Вы писали 2 дня назад?

@dab tinymce в wordpress

@kompolom я, простите, не понял, ответом на какой вопрос является Ваше упоминание о tinymce, но CKEditor, на мой взгляд, более мощный редактор (вдруг Вам это будет полезно)