Прекратите дублировать константы в JS и CSS

От автора: мы знаем, что наличие более чем одного источника истины может привести только к безумию. Но кое-что, с чем я столкнулся в нескольких интерфейсных базах кода — это повторение констант стиля (цвета, шрифты, размеры) в CSS и JS. Мы помещаем основной цвет в CSS в красивую переменную, но затем он нам понадобится в JS-коде (по какой бы веской причине это не было), поэтому мы продолжаем и создаем для него константу, потому что мы не собираемся жестко кодировать это значение, о нет! Но мы все равно нарушаем принцип DRY. Не повторяйся.

Итак, сегодня я собираюсь представить вам 2 метода: либо объявить эти переменные в CSS и использовать их из JS, либо наоборот.

JS => CSS

Итак, вы решили использовать JavaScript как источник истины. Ничего страшного, у вас есть на то свои причины. Например, вы, возможно, загружаете эти константы из пакета npm, они экспортируются как константы JS, и вам нужно вставить их в CSS.

Итак, во-первых, вам нужно иметь метод включения CSS из кода. Вот функция для этого:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Эта функция получает параметр styleString, это будет CSS, который мы хотим включить. Первая строка функции создает элемент style, вторая устанавливает содержимое этого элемента в параметр styleString, а последняя добавляет этот элемент к разделу head нашего HTML. Вот и все.

Когда у вас есть эта функция, вы можете вызывать ее со стандартным объявлением переменной CSS.

Здорово! Итак, теперь вы можете получить доступ к этой переменной из CSS!

Вот и все! Легко, правда?

Однако у этого метода есть одна оговорка. Теперь CSS зависит от загружаемого и выполняемого JS. Почему это важно? Обычно CSS — это первое, что вы загружаете на страницу, а JS — последнее. Возможно, у вас уже есть эта проблема, если вы, например, используете CSS-in-JS, но хорошо помнить об этом.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Вот код с примером!

CSS => JS

Это удобный способ доступа к переменным CSS из кода JavaScript. Этот метод основан на следующем фрагменте кода:

Эта функция принимает имена переменных в качестве параметра и выполняет следующие действия: во- первых, она вызывает window.getComputedStyle для document.documentElement (как правило, это <html>), это возвращает CSSStyleDeclaration, откуда можно вызвать getPropertyValue и получить переменные, которые нам нужны.

Вот код с примером этой техники:

А что насчет препроцессоров?

Оба эти метода основаны на функции переменных CSS, поэтому, если вы используете переменные SASS / LESS / Stylus, они не будут работать.

Однако вы можете объявить переменные CSS из переменных препроцессора, а затем получить их из JS, как в следующем примере, используя SASS:

Возможно, вы даже сможете написать классную функцию / миксин для генерации этого кода в стиле метапрограммирования. Супер круто, да. Надеюсь, вы найдете эти методы полезными!

Автор: Santiago Vilar

Источник: https://levelup.gitconnected.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.