Ща будет длинная простыня текста, готовьтесь. Начнем с задач.
Вот решили мы упороться за скорость загрузки и на каждую страницу сделать бандл в котором у нас будет только используемый на ней CSS-правила
Как нам это сделать? А как не забыть все состояния страницы (авторизован/не авторизован)? А те что из JS добавляются/изменяются?
Или вот мы решили пойти дальше и сократить названия всех нашил CSS-классов для чего-то вроде "aRz", как делает Gmail.
Как нам это сделать везде и ничего не забыть? Да, в JS тоже.
Или вот мы хотим собрать такой же бандл для JS и включить туда только тот JS, который как-то работает и изменяет DOM текущей страницы.
Но для этого нам опять надо знать что на странице может быть и в каких комбинациях/состояниях.
Или вот мы хотим упростить работу с зависимостями. Чтобы компонент поключать одной строчкой, а не добавлять в сборку отдельно html/js/css.
Думаю многие пытались что-то такое сделать у себя, но подозреваю что большинство в итоге бросило потому что это требует кучу времени и сил.
Сложность тут в том, что мы используем отдельные технологии, ничего друг о друге не знающие, но при этом друг на друга влияющие и изменяющие
Сейчас я вас пошлю смотреть видео от которого пошла мания на CSS-in-JS: blog.vjeux.com/2014/javascrip…
В видео разработчики Facebook рассказываю как они боролись с похожими проблемами и в итоге все их решили подключая не css, а json со стилями
JSON подрубается через require, для него работает dead code elimination от uglifyjs, имена вы можете делать любые, либо просто писать style.
Вариант со style нормально работает для SPA, но плохо подходит для серверного рендера, поэтому для них появился github.com/css-modules/cs…
CSS Modules подключается также через require, но при этом умеем генерировать на выходе CSS-файл уникальными именами.
Продакт плейсмент. Мой коллега @outpunk написал плагин для PostCSS, для использования CSS Modules на сервере: github.com/outpunk/postcs…
Тут превращение CSS в JS на этапе сборки и назначения класса упростило всем жизнь и дало доступ к JS-инструментам по оптимизации.
Но в докладах о CSS-in-JS часто упускается важный момент – чтобы Реакт начал работать с CSS-in-JS сначала в JS нужно было превратить и HTML.
JSX под капотом делает именно это: facebook.github.io/react/docs/jsx… Превращает псевдо-html в набор функций.
И это тоже в свою очередь позволяет применять к JSX-шаблонам все те же оптимизации и dead code elimination, про котроые я писал выше.
Мне кажется очень правильной вчерашняя фраза @andrey_sitnik про то что браузеры должны стать ассемблером.
Не надо думать про финальный HTML, CSS, JS. Это просто машинный код который у нас получается после компиляции.
А вот чтобы на уровне компиляции получать самый короткий и эффективный машинный код, лучше было бы отдавать компиляторы все в JS.
Что думаете?