Например, инструментом для генерации CriticalCSS: https://github.com/filamentgroup/criticalCSS. Но эта задача может быть за пределами сборки БЭМ-стека.

В идеале:

• В существующей реализации css блока/элемента меняем стили
• Сборщик меняет стили инлайн в теле html, в соответствии с изменениями

@DjonyBastone мысль вовсе не дурная, мы и сами этим балуемся, пока никто не видит :)

Вот технология для ENB: https://github.com/tadatuta/enb-css-hash и в https://github.com/tadatuta/enb-css-hash/issues/1 чуть-чуть объяснения про способ использования.

Готов дальше отвечать на вопросы, если они возникнут.

@tadatuta логика понятна берем блок footer создаем файл footer.css.json пишем массив, из строк со стилями:

{
  "footer": [".footer {padding-top: 40px;}", ".footer {padding-bottom: 0;}"]
}

а чтобы завести всю эту штуковину не разобрался. Добавил настройку в enb make.js - issue

Подскажи что не так сделал, что еще нужно настроить, что бы сработало?

Эта технология на вход получает файлы *.css, а на выходе генерирует bundle-name.css.json со всеми стилями всех сущностей со всех уровней.

Дальше нужен BEMHTML-шаблон, который для первого вхождения сущности в BEMJSON-е будет генерировать инлайновый <style> со стилями из полученного css.json.

Пример шаблона есть в https://github.com/tadatuta/enb-css-hash/issues/1

в make.js верно вписал код?

// css
            [techs.postcss, {
                target: '?.css',
                oneOfSourceSuffixes: ['post.css', 'css', 'styl', 'pcss'],
                plugins: techs.postcssPlugins
            }],

            [require('enb-css-hash'), {
                sourceSuffixes: ['css'],
                target: 'css.json',
                processor: function(filename) {
                    console.log(this._processorOptions); // { life: 42 }
                    return fs.readFileSync(filename, 'utf8');
                },
                processorOptions: {
                    life: 42
                }
            }],

            // bemtree
            // [techs.bemtree, { sourceSuffixes: ['bemtree', 'bemtree.js'] }],

bundle-name.css.json не появился

Сделал веточку с примером: https://github.com/bem/project-stub/commit/f5719b436d53b0bcd25c03ed87579957e85d8c96

Т.к. css.json не запрашивается браузером, он сейчас не будет пересобираться при запросе через enb server. Так что нужно либо сделать, чтобы одна из вызываемых технологий от него явно зависела, либо какой-нибудь вотчер прикрутить.

Не понял как сделать что бы технология зависела от css.json далек от легкого владения JS. Но стили инлайн сработали. Всем элементам страницы стили приехали. Это очень круто!!! Магия!!!

В теории: а можно ли договориться с enb-css-hash что бы стили приезжали только требуемым блокам, а не всей странице?

Ребята, а вообще как продуктивнее и рациональнее - только первый экран инлайнить или всю страницу?

Не понял как сделать что бы технология зависела от css.json.

Попробую в ближайшие дни добраться и запилить пример.

В теории: а можно ли договориться с enb-css-hash что бы стили приезжали только требуемым блокам, а не всей странице?

Разумеется, можно. Задача сводится к тому, чтобы отфильтровать один массив по другому. В каком-нибудь lodash для этого наверняка даже готовая функция найдется. Вопрос только в том, что будет служить источником информации о необходимых блоках: отдельный список, кастомная технология в рамках deps.js, хитрая интроспекция, вычисляющие сущности до фолда или что-то еще.

Ребята, а вообще как продуктивнее и рациональнее - только первый экран инлайнить или всю страницу?

Правильного ответа не существует. Это очень зависит от страницы, типичных кейсов ее использования и накладных расходов на дополнительный http-запрос (которые в свою очередь зависят от десятка факторов).