Это будет довольно короткая статья с некоторыми мыслями о полемике вокруг CSS в JS. Марк Далглиш отлично поработал, написав пару дней назад на эту тему: Единый язык стилей. Если вы еще не читали эту статью, прочтите ее, это отличный обзор плюсов и минусов (в основном плюсов) написания CSS внутри кода JavaScript.

Мои опасения по поводу CSS в JS

Марк Далглиш проделал большую работу, подчеркнув множество преимуществ использования CSS в подходе JS, поэтому я пользуюсь случаем, чтобы выразить свою самую большую озабоченность по поводу этой методологии.

Многие (конкурирующие) библиотеки

Тенденция запекания ваших стилей CSS в ваши модули JavaScript довольно нова, и все же уже существует множество конкурирующих библиотек, которые вы можете использовать для более удобного написания CSS внутри вашего JavaScript. Марк Далглиш перечисляет в своей статье семь таких библиотек, и я совершенно уверен, что это лишь самые примечательные с его точки зрения, поэтому в JS-библиотеках уже может быть по крайней мере дюжина широко используемых CSS-библиотек — и мы только начинаем.

Конкуренция, как правило, не является чем-то плохим, но поскольку все эти библиотеки используют собственный подход и большинство из них несовместимы, будет невозможно обмениваться фрагментами стилей в виде пакетов NPM, которые просто работают для всех доступных библиотек. Такие фреймворки, как Bootstrap, должны были бы предоставить дюжину вариантов для каждой основной библиотеки CSS в обычно используемой библиотеке JS.

Я большой сторонник написания повторно используемых, совместно используемых небольших компонентов и отказа от огромных монолитных фреймворков, таких как Bootstrap. Большая часть моей работы с открытым исходным кодом (node-sass-magic-importer и avalanche) сосредоточена на работе над идеями о том, как мы можем решить эту проблему с помощью инструментов, которые у нас уже есть, или как мы можем улучшить инструменты, которые у нас есть в настоящее время. сделать это возможным. Но с нынешним состоянием CSS в библиотеках JS мы все дальше удаляемся от достижения этой цели — без твердого стандарта совместное использование кода будет невозможным устойчивым образом. У нас уже есть твердый стандарт, который представляет собой просто старый добрый CSS (и Sass как надмножество CSS).

Лучшие решения возникают при постепенном улучшении существующих систем, а не при радикальной замене старых новыми. Отсюда успех знакомого синтаксиса SCSS Sass (по сравнению с более радикальным синтаксисом Sass) или быстрое внедрение ES6 по сравнению с более экстремальными подходами, такими как CoffeeScript или Dart.

Последние мысли

Люди произошли от одноклеточных организмов в течение миллиардов лет. Западные демократии совершенствовались, взяв лучшие кусочки революционных идей, таких как социализм, а в более поздние годы — «зеленое движение», в то время как многие государства, образованные в результате радикальных революций, были обречены на столь же впечатляющий крах, как и были созданы (хотя могут возникнуть ситуации, когда необходима революция).

CSS в JS — это революция, которая происходит в настоящее время. Если мы умны, мы можем многому научиться и постепенно улучшать наши существующие системы, чтобы реализовать лучшие идеи и решения, предоставляемые популярными библиотеками CSS в JS.

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