Шаблонные строки и объекты в CSSinJS
Поскольку обсуждение «точка с запятой или точка с запятой» постепенно исчезло из потока Twitter, вопрос 2017 года, который, кажется, разделяет сообщество CSSinJS, таков:
Должен ли я использовать строковые литералы шаблона или объекты JavaScript для моей нотации CSS-in-JS?
Позвольте мне помочь вам с этим.
Почему строки шаблонов так популярны?
1. Привычка
После многих лет написания CSS ваш глаз научится обнаруживать опечатки. Обычный формат CSS на первый взгляд отличается от обозначения объектов только строчными буквами, кавычками и точками с запятой. То, что, кажется, в основном связано с формой, - это большая перемена для вашего глаза. Требуется некоторая практика, чтобы привыкнуть к новому образу, чтобы привыкнуть к нему и снова стать эффективным. Вы должны задать себе вопрос: готовы ли вы изучить и принять другой стиль?
2. Поддержка редакторов
Библиотеки, использующие объектную нотацию и строки шаблонов, долгое время изо всех сил пытались получить поддержку редакторов с помощью выделения, автопредложений и сокращений. Строки шаблонов проще поддерживать, потому что редакторам нужно определять начало и конец. Чтобы понять объекты стиля, они должны добавить поддержку имен свойств и значений в кавычках, а также некоторые нестандартные варианты синтаксиса. Постепенно это меняется, и я уверен, что в будущем это больше не будет проблемой. Также я надеюсь, что в какой-то момент Эммет наверстает упущенное.
3. Меньше многословия.
Использование CSS в качестве языка имеет огромное преимущество - вы можете использовать его примитивы. Это означает, что такие значения, как color: red; or float: right; не нужно заключать в кавычки для обозначения строки.
Почему литералы объектов также являются хорошим выбором?
1. Много общего с синтаксисом CSS.
Несмотря на все различия, объекты по-прежнему очень похожи на CSS:
2. Обозначение верблюжьего регистра является частью CSSOM.
Поначалу использование верблюжьей нотации кажется неестественным. Это во многом связано с восприятием. Многие не знают, что стили CSSOM и DOM используют один и тот же интерфейс CSSStyleDeclaration. Каждое свойство CSS имеет эквивалентную нотацию JS в случае верблюда в спецификации. CSS-свойства Camel case являются такой же частью браузера, как и обычный CSS-синтаксис.
3. Количество интерполяций - это ключ.
Давайте сравним код с использованием двух библиотек: styled-components и styled-jss.
В большинстве случаев мы видим такие примеры кода, которые хорошо смотрятся с шаблонными литералами. Вот пример использования стилизованных компонентов:
Давайте преобразуем тот же самый код в объектные литералы с помощью styled-jss:
Вы можете подумать, что здесь намного больше визуального шума по сравнению с первым примером, в основном из-за кавычек, верно?
Давайте сделаем его более реалистичным. В реальных проектах интервалы должны быть обобщенными и централизованными, цвета должны исходить из темы.
vs.
У кого сейчас больше визуального шума? Исходя из количества чистых символов, styled-components набрали 367 символов, а styled-jss - 357, хотя я не думаю, что большее количество символов в целом плохо. Визуальный шум создается, когда больше символов находятся в неправильном месте, где они бесполезны. Шаблонные литералы создают намного больше шума вокруг своей интерполяции из-за их нотации $ {}, в то время как примитивы JS автоматически берут верх.
Чем больше интерполяций вы используете, тем больше обозначений объектов лучше для удобства чтения.
Почему не оба?
С JSS мы не хотим заставлять вас делать выбор или останавливаться только на одной нотации. Таким образом, мы позволим вам использовать любой из них. В зависимости от того, сколько интерполяций вам нужно, вы можете переключаться между шаблонными литералами и объектами по мере продвижения. Кроме того, это может быть удобно для копирования и вставки из инструментов разработчика.
