CSS: новый вид JavaScript

От автора: как и для чего использовать в JavaScript CSS? Те, кто знаком с веб-платформой, хорошо разбираются в ее двух дополнительных технологиях: HTML для документов и их структуры, а также JavaScript для взаимодействия и стилизации.

Раньше

До тех пор, пока кто-либо помнит, стилизация документов — влияющая на их внешний вид — была упрощена с помощью JavaScript свойства style, которое существует для любого поддерживающего узла DOM.

node.style.color='red';

До появления стилизации API, авторы HTML должны были писать атрибуты style в DOM вручную, что препятствовало процессу редактирования.В сочетании с механизмом выбора узлов JavaScript мы можем одновременно создавать несколько элементов. В следующем примере все p узлы имеют красный цвет текста.

const nodes=document.querySelectorAll('p');
Array.prototype.forEach.call(nodes,node=>{
  node.style.color='red';
});

Одна из замечательных особенностей этого движка селекторов заключается в том, что он позволяет одновременно настраивать разные типы элементов, предоставляя список, разделенный запятыми:

const nodes=document.querySelectorAll(‘p, li, dd’);

То, что менее просто, заключается в прикреплении нескольких стилей к любому узлу. Следующий подход быстро становится многословным.

node.style.color=’red’;
node.style.backgroundColor=’black’;
node.style.padding=’1rem’;
// etc.

Единственной стандартизированной альтернативой является использование свойства cssText:

node.style.cssText=’color: red;  background-color: black;  padding: 1rem;

Проблемно управлять несколькими стилями как одной строкой. Это затрудняет обновление, удаление или замену отдельных стилей в будущем.По этой причине авторы изобрели способы управления информацией о стилях в объектах, часто манипулируя прототипом интерфейса Element.

Element.prototype.styles=function(attrs){
  Object.keys(attrs).forEach(attr=>{
    this.style[attr]=attrs[attr];
  });
}

Добавить стилей к узлу теперь можно так:

node.styles({
  ‘color’:’red’,
  ‘backgroundColor’:’black’,
  ‘padding’:’1rem’
});

Этот подход к присвоению имеет тенденцию широко использоваться во всем приложении и его жизненном цикле. Очень трудно понять, куда положить все это, или как четко отделить от сценариев взаимодействия, которые являются другой обязанностью JavaScript.

Еще одна проблема

Но есть еще одна, более фундаментальная проблема: эти свойства стиля не реактивны. Например, допустим, я установил некоторые стили для отключенных кнопок:

const disableds=document.querySelectorAll('[disabled]');
Array.prototype.forEach.call(disableds,disabled=>{
  disabled.styles({
    'opacity':'0.5',
    'cursor':'not-allowed'
  });
});

Эти стили применяются только к отключенным кнопкам, которые уже находятся в DOM. Любые отключенные кнопки, добавленные в DOM или кнопки, которые приобретают свойство / атрибут disabled, не будут автоматически принимать соответствующий стиль.

button.disabled=true;
button.style// nothing new here

Можно прослушать изменение атрибута и отреагировать на него с помощью mutationObserver:

const button=document.querySelector('button');
var config={attributes:true};
var callback=function(mutationsList){
  for(var mutation of mutationsList){
    if(mutation.type=='attributes'){
      if(button.disabled){
        button.styles({
          'opacity':'0.5',
           'cursor':'not-allowed'
        });
      }
    }
  }
}
var observer=newMutationObserver(callback);
observer.observe(button,config);

Я думаю, мы можем согласиться, что кода довольно много, тем более, что он делает только один экземпляр одного типа элементов, реагирующих на изменение одного типа атрибута. Это также изменяет стиль только в одном направлении: нам нужно будет обрабатывать стили при отключении свойства disabled. Непросто, поскольку мы не знаем начальных значений для opacity или cursor.Как бы мне не нравился JavaScript, я не думаю, что он хорошо заточен, когда речь заходит о задачах стилизации. Это, в конце концов, процедурный и основанный на событиях язык, тогда как стиль — это то, что у вас есть или нет.

CSS

CSS — это декларативное подмножество JavaScript, оптимизированное для задач стилизации. Файл CSS принимает расширение .css и, что важно, полностью анализируется отдельно для стандартных файлов JavaScript. С CSS наконец можно отделить стиль от поведения. Вы можете создавать свои приложения без необходимости касаться своей бизнес-логики!

Синтаксический сахар

Одна из первых вещей, которую вы заметите — это более чистый синтаксис, который понравятся поклонникам CoffeeScript:

[disabled]{
  opacity:0.5;
  cursor:not-allowed;
}

Объектно-подобная структура остается, но вам больше не нужно явно вызывать querySelectorAll для итерации по узлам DOM. Итерация позаботится о себе вместо этого, делая ее более эффективной.

Вышеприведенный пример автоматически затрагивает все узлы DOM с disabled атрибутом. Еще лучше: любые новые кнопки, использующие отключенное свойство, сразу же принимают связанные стили. Реактивный из коробки!

Каскад

CSS — это каскадные таблицы стилей. Каскадная часть, пожалуй, самая лучшая ее особенность. Рассмотрим следующий CSS.

button{
  background-color:blue;
  cursor:pointer;
}

[disabled]{
  cursor:not-allowed;
}

Стили для блока [disabled] идут после блока button в таблице стилей. Любые стили, объявленные в блоке [disabled] с теми же ключами (именами свойств), что и в предыдущем блоке button становятся переопределениями. Результатом является то, что добавление disabled атрибута / свойства к кнопке только обновляет соответствующие стили. В приведенном выше примере cursor обновляется, но background-color остается неизменным. Это своего рода система фильтрации.

Кроме того, если disabled атрибут / свойство удаляется, стили по умолчанию автоматически восстанавливаются — потому что теперь узел только соответствует блоку button дальше каскада. Не нужно «помнить», какие стили были применены и при каких условиях.

Упругость

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

CSS более надежный. В большинстве случаев непризнанное свойство или синтаксическая ошибка приведет к тому, что одно, ошибочное объявление (пара свойств / значения) будет удалено.

Это нововведение признает, что различные браузеры поддерживают различные свойства стиля и что отдельные стили не являются критическими. Устойчивость CSS означает, что больше пользователей получают доступ к функциональному интерфейсу.

Заключение

Хорошим признаком того, что технология не подходит для цели, является то, как много мы должны полагаться на обходные пути и лучшие практики. Другим признаком является то, сколько кода нам нужно написать, чтобы сделать простые вещи. Когда дело доходит до стиля, JavaScript — это та технология.

CSS решает проблемы стилизации JavaScript, и делает это элегантно. Вопрос в следующем: согласны ли вы принять изменения или вы связаны более низкой методологией?

Автор: Heydon

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