В этом видео ко мне присоединился Дастин Шау, и он собирается взять меня в путешествие по миру того, что стало известно как CSS-in-JS. То есть вы выполняете стиль полностью на JavaScript, а не в .cssфайлах, которые вы создаете в своей голове.
Дастин - идеальный гид для этого, поскольку он создал отличный исследовательский инструмент под названием CSS in JS Playground, а также создал новый курс по этой теме.
Если вам интересно, почему кому-то вообще может быть интересно идти по маршруту CSS-in-JS, вот несколько причин, которые мы обсуждаем в видео:
- Устранение мертвого кода. Загружаются только стили для компонентов, используемых в любой момент времени. Не доставляются неиспользованные стили. Когда компонент умирает, умирают его стили.
- Обзор. Написание новых стилей не может повлиять ни на что другое в других местах на сайте, поэтому нет необходимости беспокоиться о написании стиля, который имеет плохие или непредвиденные последствия в другом месте из-за селектора в глобальной области. Мы получаем защиту области действия с помощью идеологии именования, такой как БЭМ, но она не зависит от инструментов.
- Беззаботное именование. В некоторых случаях нет необходимости выбирать имя класса или идентификатор для стиля, поскольку вывод содержит пользовательский интерфейс.
- Эргономика разработчика. Было бы неплохо иметь стили в одном файле (или очень близко к нему) самого компонента. Точно так же некоторые разработчики чувствуют себя очень комфортно в JSX. Кроме того, возможность стилизовать вещи, не беспокоясь об объеме, означает, что разработчики могут чувствовать себя уполномоченными в отношении стиля, а не пугаться его.
- Дружественный дизайн системы. Все дизайн-системы - это компоненты, как и React. Эти взаимодополняющие способы мышления очень хорошо согласуются друг с другом.
- Возможности JavaScript в CSS. Делая это с помощью логических операторов и передавая значения, математику и многое другое, использование всех возможностей JavaScript в стилях очень полезно.
И это еще не все, но вы можете понять, почему это привлекает некоторых людей. Это определенно вызвало множество дискуссий. Почему бы и нет, если он предлагает все эти преимущества? Ну, это совсем другая среда разработки, которая не обязательно нравится всем. Требуется изгибать веб-платформу, чтобы делать несколько необычные вещи, и это сопровождается бородавками. Не говоря уже о том, что это буквальная стоимость (размер пакетов и тому подобное), за которую платят пользователи, которая, как вы надеетесь, окупится с эффективностью.
Дастин зашел так далеко, что создал демонстрацию с использованием Sass для стилизации вещей, чтобы сравнить ее с тем, как это можно сделать с помощью CSS-in-JS, которая демонстрирует, как выглядит перенос стилей, а также возможности его выполнения.