Обновление (август 2020 г.): я написал это 4 года назад, когда сообщество React / компонентов было еще в относительно незрелом состоянии. (Плохо сформулированная) тема более высокого уровня в этой части была чем-то вроде «критически подумайте о том, нужны ли вам инструменты, созданные MegaCorps для MegaCorps с уникальными проблемами мегамасштабирования», и когда я писал это, CSS на JS чувствовал себя симптомом более фундаментальной проблемы.
Однако сейчас мы живем в мире компонентов, ориентированных на React, и инструменты CSS в JS значительно развиваются и развиваются .
Итак, хотя я больше не поддерживаю Не использовать CSS в JS, я все же считаю, что вам следует критически относиться к технологическим решениям, особенно, если они используют технологии, изобретенные для решения проблем в крупных компаниях, а вы не работаете в одной компании. Ваше здоровье.
CSS в JS - один из членов семейства интерфейсных методологий, недавно изобретенных небольшой группой разработчиков в Facebook. Он находится в той же семье, что и React и Flux. Лучшее место для введения в CSS в JS - это эта колода слайдов.
Вкратце, CSS в JS - это инструмент сборки CSS на основе Node-JS, в котором вы пишете свой CSS в Javascript-подобном представлении CSS, а результирующий CSS может быть выведен в таблицу стилей или может быть встроен для легкого использования с компонентами React. Наиболее очевидный вариант использования этой технологии - использование с React, библиотекой рендеринга компонентов JS для создания изоморфных компонентов javascript с несколькими возможными выходами (веб, собственный мобильный через React Native, веб-холст и т. Д.).
Но здесь не стоит углубляться в детали этого инструмента. Что важно, можно найти на слайде 2 из приведенной выше колоды:
Понимаете ли вы, почему разработчики в Facebook изобрели этот довольно экстремальный подход к веб-разработке, при котором они отказались от браузерного CSS, одной из самых простых и наиболее известных частей стека веб-разработки, и даже расширили сам язык? Как и многие другие вещи в Facebook, внедрение этого инструмента, по-видимому, было вызвано, по крайней мере, частично, из-за масштаба. Действительно огромный масштаб.
Когда я говорю в масштабе, это означает, что кодовая база состоит из сотен разработчиков, которые коммитят код каждый день и где большинство из них не являются фронтенд-разработчиками.
У вас есть эта проблема в вашей компании? несколько сотен человек используют CSS для одного и того же проекта каждый день. Если вы не работаете в Facebook, Google или одной из буквально менее 10 других компаний в мире, у вас, вероятно, не будет этой проблемы.
Пронумерованный список на этом слайде представляет собой отличное обобщение основных проблем с CSS. Но у всех языков есть проблемы. Можно утверждать, что проблемы языков подобны константам в море переменных, константам, с которыми мы учимся жить. И если вы не введете какую-то новую переменную, которая значительно усугубляет влияние других переменных, проблемы, представленные этими константами, будут жизнеспособными и выполнимыми, это набор проблем, на которых команды могут специализироваться, а не изобретать заново.
Но несколько сотен человек, участвующих в одном проекте, - это чертовски бананы. Это полностью меняет правила игры, когда имеет смысл переосмыслить, как пишется и разрабатывается CSS в веб-проекте.
Можно представить, что причиной создания этого конкретного инструмента была некоторая комбинация:
- Сотни людей пишут CSS в Facebook, и эти проблемы реально влияют на производительность. Нужно что-то получше.
- React - это ядро бизнеса Facebook, потому что он поддерживает почти всю сеть Facebook и нативные мобильные устройства. Как унифицировать стили в Интернете и на мобильных устройствах?
- Существующие решения кажутся устаревшими и вышедшими из строя.
Тот факт, что CSS в JS работает для Facebook, и они открыли его исходный код, не означает, что вы должны его использовать. В свое время General Electric открывала шесть сигм, но вам, вероятно, не стоит и это использовать.
Тем не менее, то, что это конкретное решение является хорошим для Facebook, не обязательно означает, что оно плохое для вашего стартапа из 20 человек. В принципе, это правда.
Процитирую одного из создателей JSS:
CSS не был разработан для использования в архитектуре, основанной на компонентах.
Вы пишете все свое приложение по компонентам? У вашего стартапа такой широкий охват продукта, который вам нужен? Подумайте на мгновение об обширном ландшафте функций, которые включает в себя Facebook: новостная лента, группы, чат / мессенджер, реклама, новостные статьи, ведение блога (заметки в facebook), события, фотографии, страницы и многое другое! Все это доступно на настольных компьютерах, мобильных устройствах, iOS и Android и основано на одном и том же наборе технологий! Удивительный! Вы можете начать понимать, почему им может потребоваться заново изобретать способ создания веб-приложений.
CSS в JS представляет собой фундаментальное изменение в том, как пишутся веб-приложения - он отбрасывает CSS в пользу сложной цепочки сборки на основе Javascript, которую вам придется использовать для реализации CSS в JS. Что еще хуже, это фактически расширяет язык. Он имеет встроенную привязку к поставщику! Радость!
Стоит ли заменять что-то простое, что практически каждый умеет делать или может выучить за пару дней (CSS), чем-то очень сложным, полагающимся на компилятор, поддерживаемый небольшой группой людей. »(На самом деле только один человек) и требует переобучения себя, всей вашей команды и всех, кто присоединится к вашей команде в будущем? Если вы консультант, стоит ли это делать со своими клиентами? Так ли велика польза?
Есть ли у вас несколько сотен людей, которые испытывают боль от разработки CSS как части их повседневного рабочего процесса, и есть ли у вас бизнес стоимостью почти 300 миллиардов долларов, который полагается на программное обеспечение, на котором работает эта технология? Если ответ отрицательный, хорошо подумайте, прежде чем добавлять эту зависимость в свое приложение.
