Использовать БЭМ по частям, потихоньку добавляя, можно. Начинать стоит с методологической части. Рекомендую посмотреть видео с БЭМинаров, там пошагово с самого начала:

1. https://ru.bem.info/talks/beminar-css-2015/
2. https://ru.bem.info/talks/beminar-build-2015/
3. https://ru.bem.info/talks/beminar-js-2015/

Задавать любые вопросы тем более можно.

Спасибо!

А задавать вам или всем? Как лучше/удобней?

В этой теме вопросы и задавать. Поможем.

Спасибо! Посмотрю материалы и соберусь с мыслями...

Все таки небольшой вопрос:

например на проекте есть кнопки:

/* Базовые настройки */
.btn {
    some style
}

/* Оформление - синяя кнопка */

.btn-style-blue {
    custom style
}    
    .btn-style-blue:hover {
    hover style
}    
    .btn-style-blue:active {
    active style
}

далее

<button class="btn btn-style-blue">Кнопка</button> /* синяя кнопка с базовыми настройками и стилем*/

далее например габариты и расположение в контексте определенного блока в css

.some-block .btn-style-blue{
    padding: 4px 10px;
    float:left;
}

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

Как тут быть, используя БЭМ? Спасибо!

Точно вы описали почти и есть БЭМ. Только нейминг поправить. .button - блок, .button_primary - модификатор, .some-block__elem.button микс элемента родительского блока.

Спасибо! Появился шанс отделаться рефакторингом:) (40 000+ строк кода как то не радостно переделывать)

микс элемента родительского блока.

имеется ввиду например такая конструкция?

<div class="b-some-block"> /*Это Блок */
    <div class="b-some-block__button-group"> /* Это скорее всего Элемент */
        <button class="button button_style-blue">Синяя Кнопка</button> /* а тут я запутался */
        <button class="button button_style-grey">Серая Кнопка</button> /* в клубок :) */
    </div>
</div>

Спасибо!

Ваш пример - хороший БЭМ. Правила для уточнения внешнего вида блока внутри другого блока задаются составным селектором от его элемента (иногда самого блока). Можно как у вас .b-some-block__button-group .button. Или использовать класс элемента прямо на ноде дочернего блока <button class="form__submit button button_style_blue">

Спасибо!

Или использовать класс элемента прямо на ноде дочернего блока <button class="form__submit button button_style_blue">

не совсем понял, можете разъяснить про ноду? и за что отвечает form__submit в этой конструкции? А также в моей конструкции есть блок "b-some-block", внутри него элемент __button-group, внутри него тег <button> это тоже элемент (?) классы которого, .button - задает глобальный стиль, а .button_style_blue это его модификатор

с вашей помощью я продвигаюсь :)

Краткий итог. Понимание:

• Независимые блоки - можно что-то добавить/убрать, например как эта ветка, где блоки с комментами могут добавляться до ∞, не во что не упираясь, и ничего не ломая
• Уход от каскада - несмотря на то, что строчек в css будет больше. Каскад мне как то представлялся не надежным и не стабильным свойством css, как спичечный домик, хотя чисто академически css - аббревиатура говорящая обратное

В чем теперь нужно доразобраться. Дорожная карта:

• создание логичных html конструкций строго опираясь на БЭМ
• максимальная ясность конструкций и стилей через правильный нейминг
• организация стилей
• организация файловой системы
• что то еще нужно?

В идеале хотелось бы сделать все так, чтоб переход на следующую ступень эволюции был бесшовным.

Спасибо!

не совсем понял, можете разъяснить про ноду? и за что отвечает form__submit в этой конструкции

Это называется микс, смешивание на одной DOM-ноде нескольких сущностей.

В данном случае

form__submit button button_style_blue

смешиваются вместе блок button с модификатором style со значением blue и элемент submit блока form.

Зачем это надо? В button лежит реализация абстрактной кнопки, которая может использоваться где угодно. А элемент submit блока form — это возможность добавить знание про эту конкретную кнопку, что она является submit элементом формы. И если нам надо что-то специальное сделать с кнопкой отправляющей форму, то мы адресуемся к этой кнопке, как к form__submit, но не трогаем ничего в реализации button.

Спасибо! Сейчас смотрю видео, изучаю материалы, пока все доступно...

Подскажите пожалуйста

Поизучал методологию, и вроде все легло. Уперся в сборку проекта на Gulp, собственно его настройку. Да и вообще конструкция - чистый html, чистый css, файловая система + сборка Gulp-ом, подходящая? Или лучше смотреть на bem-tools? Да и собственно сборка возможна без понимания javascript? или можно обойтись как то? или же все отложить и заняться изучением javascript? в очередном тупике в общем...

Спасибо за уделенное время

Для сборки БЭМ проектом удобнее всего использовать ENB. Конфиг для сборки CSS будет довольно небольшой. Также можно воспользоваться проектом-шаблоном или генератором и с минимальными изменениями использовать его как верстак веб-разработчика. Могу помочь с конфигом.

Могу помочь с конфигом

было бы великолепно

Вам нужна выборочная сборка по зависимостям или просто хотите собирать один CSS из всех блоков?

а у вас платные консультации практикуются?

Не доводилось, а что именно интересует?

npm i --save-dev enb enb-bem-techs

.enb/make.js

var enbBemTechs = require('enb-bem-techs');

module.exports=function(config){
    config.node('bundle', function(nodeConfig){
        nodeConfig.addTechs([
            [enbBemTechs.levels, { levels : ['blocks'] }],
            enbBemTechs.levelsToBemdecl,
            enbBemTechs.deps,
            enbBemTechs.files,
            require('enb/techs/css')
        ]);
        nodeConfig.addTarget('?.css');
    });
};

blocks/
  my-block/
    my-block.css
    my-block_mod/
      my-block_mod.css
      my-block_mod_value.css
    my-block__elem/
      my-block__elem.css
      my-block__elem_mod/
        my-block__elem_mod.css
        my-block__elem_mod_value.css

bundle/index.html

<head>
  <link rel="stylesheet" href="bundle.css" type="text/css">
</head>

package.json

{
  "scripts": {
    "start": "enb make"
  },
  "devDependencies": {
    "enb": "^0.16.0",
    "enb-bem-techs": "^1.0.4"
  }
}

npm start

Только есть небольшая проблема с кэшированием в технологии levelsToBemdecl. После добавления новых сущностей в папке blocks необходимо удалять файл .enb/tmp/cache.js

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

Не бойтесь задавать вопросы, даже если они вам кажутся глупыми. Часто они позволяют выявить огрехи в документации или даже баги, а значит идут на пользу инструментам, команде и сообществу. На ту же проблему с кешем я нарывался в своём проекте, но было лень копать. А в процессе подготовки ответа для Вас, разобрался и отправил баг-репорт. Если же захотите отблагодарить именно материально, то могу дать, например, номер Яндекс-кошелька :).

Полностью согласен с @Guria