Для чего, помимо переменных CSS, используются пользовательские свойства CSS?

Stack Overflow ответ, который вы связали, на самом деле нет неверен и говорит о чем-то немного отличном от того, что вы спрашиваете. В нем рассказывается о том, как в соответствующей спецификации CSS пользовательские свойства часто описываются как переменные для простоты понимания, несмотря на то, что они работают иначе, чем переменные в других языках (но это своего рода обычное дело для курса с CSS, не так ли? не так ли?).

Переменная часть настраиваемых свойств CSS на самом деле заключается в том, как вы вызов (или использовать) настраиваемое свойство:

.example {
    background: var(--custom-property);
}

Как вы можете видеть из спецификация, полностью озаглавленного «CSS Custom Properties for Cascading Variables Module Level 1», есть только одно использование: для вызова в качестве значения в каскадном элементе с var(). Так что немного неясно, что имел в виду автор этого сообщения в вики, когда говорил, что настраиваемые свойства используются не только для переменных. Кроме того, последующие предложения на самом деле не описывают и не подтверждают это утверждение, они просто говорят о том, что использование $ вместо - «странно».

Возможно, они означают, что вы можете объявить настраиваемое свойство, которое работает только при чтении с помощью JavaScript? Или объявите настраиваемое свойство в JS, которое затем применяется к CSS. Синтаксис пользовательских переменных поддерживает уравнения, которые не будут правильно прочитаны синтаксическими анализаторами CSS, но будут правильно прочитаны в JavaScript. Однако результатом остается стоимость имущества элемента, объявленного с помощью var().

И чтобы рассмотреть вопрос в некоторой перспективе, не имело бы смысла называть их пользовательскими характеристики, если бы они использовали что-то Кроме как в свойстве. В спецификации не упоминается альтернативный способ вызова или использования свойства в CSS или JS без использования var() в разделе значения свойства каскадного селектора (бит кода между {}).

В других вопросах объяснялись настраиваемые свойства и переменные CSS, но что, если мы сделаем это простым и скажем, что настраиваемые свойства просто здесь, чтобы мы могли добавлять дополнительные свойства в дополнение к свойствам CSS по умолчанию. Конечно, одно настраиваемое свойство бесполезно, поскольку браузер ничего с ним не делает, и поэтому в 99% случаев они используются с переменными CSS.

Другой факт заключается в том, что при выполнении CSS мы интуитивно подумаем об использовании свойств CSS по умолчанию, чтобы делать то, что мы хотим, а когда мы сталкиваемся со сложной ситуацией, мы попытаемся объединить множество свойств, псевдоэлементов и т. д., Чтобы достичь наши потребности. Но что, если мы будем думать иначе и начнем использовать для этой цели настраиваемые свойства? Что, если вместо сложного кода CSS мы просто напишем настраиваемое свойство и реализуем код JS / jQuery, который сделает всю работу за нас.

Возьмем простой и распространенный пример. У вас есть элемент, которому вы хотите присвоить абсолютную позицию, чтобы использовать его в качестве наложения на его родительский элемент. С помощью CSS мы сделаем что-то вроде этого:

.block {
  height:100px;
  width:100px;
  margin:20px; 
  border:1px solid red;
  position:relative; /* we usually forget this !*/
}

.overlay {
  position:absolute;
  top:0;
  right:0;
  left:0; /*sometimes we use width:100% but it won't work with padding!*/
  bottom:0;
  padding:5px;
  z-index:1; /* we can forget this sometimes*/
  background:rgba(0,0,0,0.5);
}

<div class = "block">
<span class = "overlay"></span>
  some text here
</div>

Это довольно просто, и мы можем использовать один и тот же класс везде, если хотим иметь одно и то же. Но мы можем рассмотреть настраиваемое свойство, которое уменьшит код CSS и упростит его:

$('*').each(function() {
  if ($.trim($(this).css('--overlay')) === "top") {
    $(this).css({
      'position': 'absolute',
      'top': 0,
      'bottom': 0,
      'left': 0,
      'right': 0,
      'z-index':2
    });
    $(this).parent().css('position','relative');
  } else {
    //we test the other values and we do the necessary changes
  }
})

.block {
  height: 100px;
  width: 100px;
  margin: 20px;
  border: 1px solid red;
}

.overlay {
  --overlay: top;
  background: rgba(0, 0, 0, 0.5);
}

<script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class = "block">
  <span class = "overlay"></span> 
  some text here
</div>

Я знаю, что первая мысль: «Зачем использовать весь этот код для такой простой вещи, которую мы можем сделать с помощью CSS?» и «Что, если свойство изменится? Что, если у родителя уже установлена ​​позиция?» Это правда, но это очень упрощенный пример. Представьте, что вы создаете библиотеку JS или jQuery, в которой вы предоставляете множество настраиваемых свойств для сложных материалов (создаете общие формы CSS, выполняете сложные преобразования, где трудно вычислить значения и т. д.), И вы предоставляете документацию для каждого из них с соответствующими значениями.

Это похоже на библиотеку JS / jQuery, которая говорит вам добавить класс к вашему элементу и вызвать одну функцию, а затем у вас есть отзывчивый слайдер, интерактивная карта, виджет Twitter и т. д. Почему бы не сделать то же самое с настраиваемыми свойствами? Мы просим людей включить библиотеку и просто написать CSS, чтобы увидеть волшебство.

Мы также можем рассматривать это как обновление, добавляя больше полезных свойств, чтобы упростить задачу. Точно так же, как это делают создатели CSS, НО мы делаем это сами и не ждем, пока появится новая спецификация и пока она не будет одобрена.

Возьмем, к примеру, flexbox. До появления flexbox, если мы хотим иметь N номеров div внутри контейнера, имеющих точно такой же размер и заполняющих весь контейнер, мы обязаны написать некоторый сложный код, который мы должны корректировать каждый раз, когда мы добавляем новый элемент. Теперь с flexbox мы просто устанавливаем flex:1 и все! Браузер сделает за нас все сложные вещи.

Мы можем сделать то же самое. Мы создаем собственные свойства, чтобы упростить работу, и делимся ими с сообществом. Люди начнут их использовать и, возможно, сочтут их полезными, тогда они могут стать справочником для решения общих проблем. Может быть, какой-нибудь браузер даже подумает о реализации для их интеграции.

Таким образом, настраиваемые свойства также могут способствовать совершенствованию CSS.

Обратите внимание, что контекст цитируемого вами текста - это CSSWG, обосновывающая, почему --foo и var(--foo) используются вместо $foo. Я предполагаю, что их высказывание «Пользовательские свойства используются не только для переменных» намекает на тот факт, что синтаксис идентификатора --foo настроен для отображения в других местах, используемых для других пользовательских вещей, таких как пользовательские медиа-запросы, которые изначально были в MQ4 и сейчас в MQ5. Ясно, что это не переменные каскадный, потому что медиа-запросы не каскадируются (их прилагаемые правила делают). (Хотя, если это так, «Пользовательские свойства» должны были быть чем-то другим, но, вероятно, CSSWG еще не придумала подходящего собирательного названия для этих вещей.)

Has anyone ever come across some CSS code where custom properties were used for something other than variables?

Я не встречал никаких реальных примеров, но я только что придумал пример, в котором используется JavaScript для переключения класса на элемент на основе настраиваемого свойства, которое, в свою очередь, влияет на селектор в другом месте CSS:

let p = document.querySelector('p');

if (window.getComputedStyle(document.documentElement).getPropertyValue('--boolean').trim() === "'true'")
  p.classList.add('toggle');
else
  p.classList.remove('toggle');

:root {
  --boolean: 'true';
}

p.toggle {
  color: #f00;
}

p::before {
  content: 'Value of --boolean is "' var(--boolean) '"';
}

<p>

Предостережение, конечно, состоит в том, что это CSS и JavaScript. Вы не можете использовать настраиваемые свойства для чего-либо, кроме каскадных переменных, только в CSS, потому что настраиваемые свойства участвуют в каскаде очень похож на любое другое свойство CSS и не существует вне его. Вот почему авторы объединяют эти два термина в повседневном употреблении - потому что любые различия между ними академические. Любая другая часть таблицы стилей, которая хочет зависеть от настраиваемого свойства, должна работать со сценарием, чтобы использовать его.

Вам может быть интересно, почему что-то подобное нельзя реализовать в CSS. Рассмотреть возможность:

p.toggle {
  --boolean: 'false';
}

Если бы мы предложили псевдокласс для сопоставления элементов на основе значений их свойств CSS, например p:prop(--boolean: 'true'),

• должен ли псевдокласс быть действительным и всегда совпадать, быть действительным и никогда не совпадать или быть недействительным вне CSS?
• каким должно быть отраженное значение? Указанное значение, вычисленное значение или использованное значение? Обратите внимание, что по историческим причинам даже window.getComputedStyle() не всегда возвращает вычисленные значения.

• циклические зависимости становятся неизбежными:

  :root {
    --boolean: 'true';
  }
  
  /* 
   * Causes p to stop matching the selector, switching back to
   * inheriting from :root, which in turn causes it to start
   * matching the selector again, ad infinitum.
   */
  p:prop(--boolean: 'true') {
    --boolean: 'false';
  }
  

Присмотритесь к приведенному выше примеру JavaScript, и вы заметите, что он не надежен. Значение свойства оценивается только один раз, как только документ завершен. Снова измените значение настраиваемого свойства, и элемент не обновится, чтобы отразить это изменение. Если он прислушивается к изменениям значения настраиваемого свойства, он немедленно сталкивается с той же проблемой циклической зависимости - и, что еще хуже, блокирует ваш браузер (пока он не заметит и не перехватит бесконечную рекурсию).