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

Дата публикации: 2020-08-21

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

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

JS => CSS

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

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

function addStyle(styleString) {
  const style = document.createElement('style');
  style.textContent = styleString;
  document.head.append(style);
}

function addStyle(styleString) {

const style = document.createElement('style');

style.textContent = styleString;

document.head.append(style);

}

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

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

addStyle(`
  :root {
    --color-primary: ${primaryColor};
  }
`)

addStyle(`

:root {

--color-primary: ${primaryColor};

}

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

button {
  background: var(--color-primary);
}

button {

background: var(--color-primary);

}

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

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

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

CSS => JS

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

function getCSSVariable(varName) {
  return getComputedStyle(document.documentElement)
    .getPropertyValue(varName);
}

function getCSSVariable(varName) {

return getComputedStyle(document.documentElement)

.getPropertyValue(varName);

}

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

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

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

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

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

$red: #ff0000;:root {
  --red: $red;
}

$red: #ff0000;:root {

--red: $red;

}

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

Автор: Santiago Vilar

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

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

Метки: JavaScript