<p><b>Текущая ситуация</b></p><ul><li><p>Есть глобальный файл <code>style.css</code>, который содержит все стили сайта.</p></li><li><p>Реализована возможность инлайнить критические стили (<code>critcss</code>) в HTML.</p></li><li><p>Весь CSS грузится на всех страницах, даже если значительная часть стилей не используется.</p></li></ul><p><b>Что нужно сделать</b></p><ol><li><p><b>Выделить глобальные критические стили</b></p><ul><li><p>Создать <code>global-critcss.css</code> с минимальным набором стилей для базовых элементов, видимых на первом экране (header, общая сетка, базовая типографика).</p></li><li><p>Этот файл инлайнится на всех страницах.</p></li></ul></li><li><p><b>Выделить критические стили для разных шаблонов</b></p><ul><li><p>Для каждого шаблона (главная, статья, каталог и т.д.) сделать свой файл критических стилей:</p><ul><li><p><code>template-home-critcss.css</code></p></li><li><p><code>template-article-critcss.css</code></p></li><li><p><code>template-catalog-critcss.css</code></p></li></ul></li><li><p>Эти файлы будут инлайнится <b>после</b> <code>global-critcss.css</code> в зависимости от шаблона.</p></li></ul></li><li><p><b>Разделить полный CSS на базовый и шаблонные файлы</b></p><ul><li><p>Сохранить <code>style.css</code> как <b>базовый файл</b> с общими стилями, которые используются на всех страницах:</p><ul><li><p>базовая типографика,</p></li><li><p>глобальные сетки и layout,</p></li><li><p>общие UI-элементы,</p></li><li><p>header, footer, навигация, формы, переменные, сквозные блоки</p></li></ul></li><li><p>Создать отдельные CSS для уникальных стилей каждого шаблона:</p><ul><li><p><code>template-home.css</code></p></li><li><p><code>template-article.css</code></p></li><li><p><code>template-catalog.css</code></p></li></ul></li><li><p>В шаблонных файлах только уникальные стили блоков, которые не используются на других страницах.</p></li></ul></li><li><p><b>Логика подключения</b></p><ul><li><p>При генерации HTML:</p><ol><li><p>Inline: <code>global-critcss.css</code></p></li><li><p>Inline: <code>template-XXX-critcss.css</code> (если есть для шаблона)</p></li><li><p>Async preload: <code>style.css</code></p></li><li><p>Async preload: <code>template-XXX.css</code> (если есть для шаблона)</p></li></ol></li></ul></li></ol>
