Рубрики
Без рубрики

Почему кто-либо пользуется конструктивными стилями, в любом случае?

Давайте учимся вместе, какая конструктивная таблица стилей и как они могут быть использованы для веселья и прибыли. Помечено JavaScript, WebComponents, CSS.

! Отказ от ответственности: Следующая статья содержит примеры, которые полагаются на API, которые очень новые и не поддерживаются во всех браузерах. Пожалуйста, обратитесь к их Страница состояния хрома Для получения информации о этой поддержке. !

Действительно, почему?

Я имею в виду это, я работаю над выяснением твердого ответа за это сам, и читая эту статью, вы невольно добровольно вызвались поддерживать меня в этом. Готовый?

Что такое конструктивные стилы

О, вы не видели или не использовали Конструктивные стилы до? Ну, это не удивительно, они красивые Новый Отказ Отсюда вы найдете образцы и демонстрации кода и демонстрации для вас, пожалуйста, примите во внимание текущий уровень поддержки, изложенные в этой странице состояния хромирования, если вы хотите увидеть этот код в Live в браузере. Кроме того, вот и Большой грунт Если вы хотите прочитать впереди, это также может пройти долгий путь в поддержку разговора, которую я надеюсь, что вызовут здесь для всех, чтобы у всех было немного дополнительных знаний.

Очень вообще, API работает следующим образом …

    const myStyleSheet = new CSSStyleSheet();

При самой простой, вышесказанное это конструктивная таблица стилей. Новый Ключевое слово было использовано для построения CSSSTYLESHESTHET Отказ Как только вы построили указанный стиль листа, вам также дают два новых метода на листе. Во-первых, restsync Способ, который позволяет синхронному замену стилей, описываемых листом:

    myStyleSheet.replaceSync('h1 { color: green; }');

И во-вторых, заменить Способ, который снова позволяет заменить все стили на листе, однако с добавленной способностью использовать внешние ресурсы через @импорт Заявления, а не просто строки статического стиля:

    myStyleSheet.replace('@import url("styles.css")');

Позднее возвращает обещание, которое позволяет вам справиться с успехом или отказа этой нагрузки. Вы также продолжаете доступ к полному CSSSTYLESHESTHET объект И это более гранулированные методы манипулирования, такие как Детель и инкредер , а также доступ к CSSRULES Массив для манипулирования конкретными CSSRULE Записи в нем. После того, как у вас есть ваш стиль, доступный в области JavaScript, что это хорошо для вас? Не так много, это не до документа или фрагмента документа «принять» этот стиль.

Document.adoptedStyLesheets

При этом самая общая часть веб-страницы является документ Давайте начнем там! Посмотрите на конструктивные стилы в действии через Усыновленные этиллы API на Документ ниже:

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

  • постоянно добавление нового или <СТИЛЬ/> к
  • Управляющие встроенные стили через элемент Стиль атрибут
  • Переключение класса/ID/другой значительный селектор элемента
  • Программно управление правилами A <СТИЛЬ/> ярлык
  • CSS пользовательские свойства

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

Если вы будете справиться с большими воротами, зачем доходить до DOM, чтобы сделать это, переместите эти ворота в фактическое <СТИЛЬ/> Тег и управление правилами напрямую через стиль .shiet.addrule/делитель Это означает, что вы должны допустить все различные варианты стиля где-то, раздумывая свои затраты на проволоку, но вы получаете много скалярных и гранулированных спектаклей, приближающихся к ситуации таким образом. Точно так же вы можете переместить эти ворота в ваши CSS через пользовательские свойства и включения element.style.setproperty (PropertyName, значение) Это довольно многообещающее в том, что он протекает через ваше приложение и придерживается каскада, однако при управлении большим количеством различных свойств это также может быть трудно управлять.

Да, у нас есть все эти подходы к изменению стилей в приложении, и ни один из них не идеально, поэтому нам было дано другое, Document.adoptedStyLesheates = [...] И вот что вы увидите в представлении вышеуказанного редактора. Через этот API вы можете составить массив стилей CSS STYLESHELS для принятия документом или фрагментом документа. И сейчас самое большое время, чтобы спросить «Почему кто-нибудь это использует?»

Почему, действительно. На уровне документа этот API, вероятно, имеет немного больше, чем предлагает больше вариантов в переполненном поле вариантов, где вам необходимо точно взвешивать компромиссы перед лицом ваших конкретных целей, чтобы принять решение, а не представить технику, которая может стоять голова и плечи над другими. Конечно, есть возможность посмотреть на то, как это может дать твердое ударение к испытаниям времени, такие как WebPack Powered CSS модули , не Стандарты отслеживаются CSS модули, которые конкретно добавляют большое количество <СТИЛЬ/> элементы в при вводе в приложение. Библиотеки CSS-in-js, как Эмоция и Слифовые компоненты уже редактируют стили через использование стиль. et al, снаружи было бы трудно угадать, где они выиграют от даже более глубокой интеграции с платформой здесь, но я хотел бы думать, что есть небольшая победа для этих подходов через этот API. Если вы используете эти виды инструментов широко и можете видеть некоторые из этих выигрышей, или если вы используете другие инструменты, которые вы могли бы увидеть ценность в этих подходах, я надеюсь, что вы поделитесь некоторыми вариантами, которые вы видите, открывающиеся с этими функциями в Комментарии ниже!

Однако, где эта API начинает зарабатывать, что при нанесении его в элементы, используя тени DOM. При этом у вас обоих есть способность, и растущая потребность в применении одного стиля в одном документе.

ShadowRoot.adoptedStyLesheatesh

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

    function createShadow(el) {
        const shadowRoot = el.attachShadow({ mode: "open" });
        shadowRoot.innerHTML = `
            
            

This is in a Shadow Root

`; }

Этот код прикладывает корень тени к поставленным эль а потом innerhtml. S Некоторые содержание и стили. Выглядит довольно прямо вперед, однако между линиями js-то волшебного произошла, мы заключили прикладное содержание и стили от остальной части документа в фрагменте документа, который защищает его от селекторов Щизды (как CSS, так и JS), а также остальные документ с его стилей. Более того, в нашем новом ShadowRoot Переменная Мы создали другое место, на котором Усыновленные этиллы API доступен.

Общий вопрос

Теперь представьте, что вы прикрепляете вышеуказанную тень CORT к пользовательскому элементу и предположим, что вы хотите положить десятки или сотни, из этого пользовательского элемента в ваш контент. Вы используете код, вы инкапсулируете его от остальной части своей страницы, вы чувствуете себя хорошо о производительности вашей страницы, пока вы не поймете, что теперь вы создаете новые (и теоретически уникальные, хотя некоторые браузеры будут работать за Сцены для решения этого для вас в стиле стиль для каждого из этих элементов. Благодаря чему по одному стилю, как наш пример, вы сможете проглотить эту стоимость анализа, но представьте, что эта концепция пересекается с последним листом стиля, с которым вы работали, прежде чем прочитать эту статью, и, вероятно, вы начнете видеть расходы накапливаться. Это то, где тот факт, что наша страница сейчас имеет не только одно или два места, где Усыновленные этиллы API доступен, но один для каждого экземпляра пользовательского элемента, который вы создали, начинает вступать в игру.

    const sheet = new CSSStyleSheet();
    sheet.replaceSync(`
        h1 {
            color: red;
            size: 3em;
        }
    `);

    function createShadow(el) {
        const shadowRoot = el.attachShadow({ mode: "open" });
        shadowRoot.innerHTML = `
            

This is in a Shadow Root

`; shadowRoot.adoptedStyleSheets = [sheet]; }

Лениться

Пребывание с предположением, что это отправляется на страницу через пользовательские элементы, мы можем принять структуру этого кода на один шаг дальше. В настоящее время этот пример пожинает только преимущества совместного использования стилей между множеством экземпляров нашего пользовательского элемента, однако в контексте основного примера из Конструктивные таблицы стилей для листов Мы также можем использовать возможность того, что таможенный элемент, касающийся вопроса не доступен для DOM на странице, нагрузку на лениво разбирать стили из общего листа:

    const myElementSheet = new CSSStyleSheet();
    class MyElement extends HTMLElement {
        constructor() {
            super();
            const shadowRoot = this.attachShadow({ mode: "open" });
            shadowRoot.adoptedStyleSheets = [myElementSheet];
        }

        connectedCallback() {
            // Only actually parse the stylesheet when the first instance is connected.
            if (myElementSheet.cssRules.length == 0) {
                myElementSheet.replaceSync(styleText);
            }
        }
    }

Составляя

При совместинии стилей по всему элементам и управлением времени анализа этих стилей конструктивных стилей также позволяет стильному композиции через Усыновленные этиллы = [... Листы] Отказ Одним из основных преимуществ работы с Shadow DOM и инкапсуляцией, которую он обеспечивает возврат к небольшим документам. Способности, что центральная проблема под рукой, когда сообщество вызовут трудности работы с CSS в современном контексте, является тот факт, что когда было создано документы, которые мы работали, были лишь намного меньше; Небольшой документ, небольшой стиль листа, небольшое количество работы для управления их отношениями. Тень Дом проходит долгий путь, чтобы восстановить это, и теперь, когда смешаны с Усыновленные этиллы Может быть доставлено на следующий уровень.

Вместо того, чтобы решать применение системы стилей через компиляцию CSS, где вы можете статически составить стили, а ля:

    @import 'colors';
    @import 'headlines';
    @import 'layout';
    @import 'lists';
    // etc.

И затем нанесите эти стили во всем мире на ваш сайт через что-то вроде:

    

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

    import {
        colorsSheet,
        headlinesSheet,
        listsSheet,
    } from '/style-system.js';
    import {
        styles,
    } from './styles.js';

    // ...

    connectedCallback() {
            // Only compose styles once
            if (this.shadowRoot.adoptedStyleSheets.length == 0) {
                this.shadowRoot.adoptedStyleSheet = [
                    colorSheet,
                    headlinesSheet,
                    listsSheet,
                    styles,
                ];
            }
        }

Если вы готовые магазины, имеющие список списков, удалите ListSsheet Импорт и, когда ни один из компонентов в вашем сборке не имеет списков списков таблицы стилей просто будет дерева, высеченным из вашей сборки. Это становится даже приятнее, когда Ножные CSS модули Пройдите свой путь через процесс стандартов, и мы можем начать полагаться на код, как:

    import styles from './styles.css';

    const sheet = new CSSStyleSheet();
    sheet.replace(styles);

Это касается важной реальности, которую я в основном избегал этого далеко в этой статье. Это API JS, и это означает, что мы говорим о работе с нашими стилями в строках. Без чего-то вроде родных модулей CSS позволяют нашему коду прямому доступу к стилям в реальных файлах CSS в виде строки без специальной обработки во время выполнения или [по времени сборки], то эти стили должны будут жить в JS. Вы можете спрятаться за тот факт, что вы не модифицировать Эти стили (хотя вы наверняка могли бы сказать, что этот процесс не CSS-IN-JS. Тем не менее, это преимущественно API JS для управления CSS, поэтому он будет в том числе в том, что он будет в том, что он будет в том числе называть дифференциацию здесь технической. В любом случае, эргономика конструктивных стилей оставляет вас хотеть в мире, где они не могут быть успешно сочетаны с модулями CSS. Вот надеясь, что успех JSON Модули На уровне спецификации может возместить прогресс с идеей в царстве CSS.

Итак, почему?

Теперь, когда мы все больше знаем о том, как пользоваться конструктивными стилями и какие вещи они делают возможным, вопрос все еще находится: «Почему кто-нибудь их использует?». Или, может быть, это: «Почему бы ты Используйте их?» Надеюсь, благодаря всем введениям, возможностям и методам, которые обсуждаются выше, вы начали чувствовать, что они могут сделать в вашей работе. Если это так, я хочу услышать об этом в комментариях ниже. Вот повторение преимуществ, которые мы обсуждали выше, чтобы запустить разговор:

  • Стиль совместного использования для производительности, меньше, чем в производительности и, в зависимости от вашего текущего стиля приложений, один Усыновленные этиллы Интерфейс может сэкономить вас десятки или сотни <СТИЛЬ/> Элементы независимо от того, используете ли вы тень домо или нет.
  • Анализ и применение стилей лениво допускают уровень контроля, у нас не было возможности использовать в компоненциальной среде
  • Композиция стиля позволяет более точное применение стилей, а также такую же точность при удалении стилей, что означает, что будет проще, чем когда-либо, чтобы вы могли только доставить именно то, что нужно для ваших пользователей в любое время
  • и больше…

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

Применение системы стиля

В его статье Примите систему дизайна внутри ваших веб-компонентов с конструируемыми стилями , Бен Феррел Обсуждается, как принимать ранее существующую систему стилей и применить его к веб-компонентам, не переписывая его для этого контекста. Здесь он сделан так в рамках системы UI Adobe Spectrum UI, но работа – это твердое доказательство концепции относительно того, как вы будете делать то же самое для подобных насыпных или хвостовых CSS. Применение этих систем в течение Shadow DOM является ранним блокатором для инженеров, когда они начнут по пути к обнаружению роли, которую пользовательские элементы играют в современном разработке, этот шаблон может открыть дверь к использованию веб-компонента в еще более широком массиве контекстов. В своей статье Бена даже делает быстрый обзор возможностей в Polyfilling Усыновленные этиллы API в браузерах, которые уже поддерживают Shadow DOM.

Стандартные элементы библиотеки

Возможность фактического расширения стандартной библиотеки HTML-элементов, доступных для разработчиков, была одной из самых захватывающих концепций, когда меня впервые представили технические характеристики веб-компонентов. Как они укрепили и поддержку для них продолжает расти, эта мечта окончательно начинает становиться реальностью. С Whatwg открывает дверь, чтобы отказаться от расширения элементов HTML на глубоком интегрированном уровне. Одной из моих любимых функций предложения является --st-Control-Theme CSS пользовательское свойство, которое при чтении JS условно принимает Лист стиля, который описывает эту тему. Это впечатляющее использование декларативного стиля на естественном пересечении HTML, CSS и JS, которые я надеюсь увидеть больше в будущем.

Гибкие базовые классы

Сначала я узнал о конструктивных стилях как часть API, предоставленной Litelement Базовый класс веб-компонента. Когда полагаться на его Статическое Получить стили Accessor, LitElement применяет немного изящной деградации, чтобы обеспечить использование конструктивных стилей, когда доступно. Функциональность структурирована для создания композиции стиля в уже выделенном контексте CSS CSS Тень Дом как проще, так и даже более исполнительный и является явной победой для спецификации. Суличество и использование конструктивных стилей стилей являются охлаждающими предметами, заслуживающими расширенного покрытия.

Что дальше?

Поскольку конструктивные стилы все еще будут столь новые, мы, как технологическое сообщество, только начали поцарапать поверхность относительно того, что может быть возможно при использовании их. Даже в этой статье началась в поисках «Почему» кто-то может использовать их, я задал больше вопросов, которые я ответил на себя. Я упомянул о своем вступлении к концепции через базовый класс Liteement, и я хотел бы написать больше о том, что, как выглядит, как и его ограничения. Кроме того, я с нетерпением жду делиться некоторыми вещами, которые, как я думаю, будет возможен как определенные ограничения в нем (IE11/Pre-Edge Edge жрать) поднимаются из рабочего процесса. С этой целью я хотел бы оставить вас со следующей демонстрацией:

Вышеуказанное расширяется по идее, которую вы можете иметь более одного из того же пользовательского элемента, каждый из которых каждый с приложением стиля, специфичный для себя, позволяя представленным пользовательским элементе разрешить эти зависимости в контексте приложения, в котором оно есть. В очень похожем на вену я вижу возможность пользовательского элемента, чтобы принять разные отношения с применением стилей к его световому содержанию DOM. Ищите эти идеи и больше, которые будут больше обсуждаться на большей глубине наряду с менее надуманным примером в ближайшее время!

Оригинал: “https://dev.to/westbrook/why-would-anyone-use-constructible-stylesheets-anyways-19ng”