Распространенные клиентские веб-технологии

Краткое содержание

Используйте HTML атрибут style для определения встроенного стиля
Используйте HTML элемент <style> для определения внутреннего CSS
Используйте HTML элемент <link> для ссылки на внешний файл CSS
Используйте HTML элемент <head> для сохранения <style> и <link> элементов
Используйте CSS свойство color для цвета текста
Используйте CSS свойство font-family для текста шрифтов
Используйте CSS свойство font-size для размера текста
Используйте CSS свойство border для границ
Используйте CSS свойство padding для пространства внутри границы
Используйте CSS свойство margin для пространство снаружи границы

Совет: Вы можете узнать гораздо больше о CSS в разделе CSS Учебник.

Введение

Styled Components — одно из популярных решений написания кода методом CSS in JS. Гибкое, простое и, главное, идеально вписывается в архитектуру React приложения.

Преимущества:

Никаких больше className. Возможность передавать классы никуда не пропадает, но их использование опционально и бессмысленно, теперь мы можем прописывать все стили внутри стилизованных компонент, и классы будут генерироваться автоматически.
Простая динамическая стилизация. Не нужно больше писать тернарные операторы и жонглировать className внутри компоненты, теперь все эти проблемы решаются благодаря прокидыванию пропсов внутрь стилизованных компонент.
Теперь это JS. Так как теперь стили пишутся в экосистеме JavaScript, это упрощает навигацию по проекту и даёт различные возможности написания кода.
StylisJS под капотом. Данный препроцессор поддерживает:
4.1. Ссылки на родителя &, который часто используют в SCSS.
4.2. Минификация — уменьшение размера исходного кода.
4.3. Tree Shaking — удаление мёртвого кода.
4.4. Вендорные префиксы—приставка к свойству CSS, обеспечивающая поддержку браузерами, в которых определённая функция ещё не внедрена на постоянной основе.

За последние пол года Styled Components стал моим любимчиком, и теперь я стараюсь использовать его в каждом возможном проекте. В этой статье хочу выделить мои лучшие практики и поделиться приобретенным опытом.

Разбираемся с каскадом в CSS

Мы создаём веб-сайтов с помощью CSS, что расшифровывается как «Cascading Style Sheets», «каскадные таблицы стилей». Но что значит «каскадные»? Сайт tproger.ru опубликовал перевод статьи «The CSS Cascade», где и разбирается этот вопрос.

Каскад — один из самых мощных инструментов CSS. Но если вы не знаете принципы его работы, он может доставить проблем.

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

Важность. Первая ступень каскада рассматривает тип правила

Первая ступень каскада рассматривает тип правила.

Есть четыре уровня типов:

transition (переход)

Правила, которые применяются к активному переходу, имеют первостепенную важность. !important

Если поставить !important в конце правила, оно перейдёт на этот уровень каскада. В идеале вы должны использовать !important только для переопределения inline-стилей или других !important из сторонних библиотек. animation (анимация). Правила, применяющиеся к активной анимации, повышают уровень в каскаде. normal . На этом уровне находится основная часть правил.

Как видите, эти типы обеспечивают корректную анимацию элементов. Если оба правила относятся к одному уровню, приоритет определяется на другой ступени каскада.

2. Происхождение

Вторая ступень смотрит, где определено правило.

Таких мест может быть три (расположены в порядке приоритета):

Веб-сайт. Единственный уровень, который вы можете контролировать как веб-разработчик.
Пользователь. Стили, которые пользователь подключает через настройки браузера.
Браузер. У каждого браузера есть свой набор стилей — например элемент <button> всегда использует стиль браузера по умолчанию.

Примечание

Важно! Иерархия для правил с !important здесь работает наоборот: !important -правило браузера выигрывает у !important -правила веб-сайта, тогда как обычные правила сайта превосходят правила браузера

3. Специфичность

На третьей ступени важна специфичность правила. Значение специфичности определяется исходя из уровней селекторов CSS.Всего уровней четыре:

inline . Стили, объявленные в HTML-свойстве style , обладают наибольшей специфичностью.
id . Можно использовать идентификатор (синтаксис #id ) для определения стиля конкретного элемента.
класс | атрибут | псевдокласс . Определять стиль элемента также позволяют классы (синтаксис .class ). Этот уровень включает селекторы HTML-атрибутов, например или [href=»https://wattenberger.com»] , и псевдоклассы, такие как :hover и :first-of-type .
тип | псевдоэлемент . Тип тега (синтаксис type ) тоже используется для определения стиля элементов. Сюда же входят псевдоэлементы вроде :before и :selection .

Стоит отметить, что здесь имеет значение число «вхождений» в какой-либо уровень.

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

4. Позиция

Последняя ступень каскада смотрит на порядок определения правил.

Всегда побеждает то правило, которое объявлено позже (при условии, что всё остальное в каскаде одинаково).

Когда в следующий раз вам захочется написать волшебное слово !important , лучше притормозите, оглянитесь назад и выясните, на каких ступенях каскада находятся конфликтующие стили. А ещё можете почитать спецификацию CSS.

Кэширование общих файлов

Ещё один способ помогает сократить HTTP-запросы и подавать страницы быстрее — это кэширование общих файлов. Когда страница загружается первый раз, определённые файлы могут затем кэшироваться. Теперь браузер не должен запрашивать те же файлы при повторном визите в течение достаточно долгого времени. Насколько длинный этот период времени решать вам, всё зависит от того, как долго вы бы хотели, чтобы пользователи удерживали определённые типы файлов.

Подобно файлам gzip, настройка заголовков для истечения кэширования файлов может быть установлена через файл .htaccess. И снова HTML5 Boilerplate находится на один шаг впереди нас. В их файле .htaccess есть раздел, помеченный как Expires headers.

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

ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"

Изменение «access plus 1 year» на значение «access plus 1 week» лучше подходит для CSS и JavaScript-файлов, которые меняются еженедельно, но не контролем версий с отдельными именами файлов. Для значений заголовков смотрите справку по синтаксису mod_expires.

Directory Structure

Below is an example directory structure for easier visualization, I have also included an example setup in this repo.

Only edit/author the files in the folder. This allows for updating external libraries easily which are in the . Many applications start out with an external CSS framework like Bootstrap or Foundation, so I added them in the example setup in the folder. It’s absolutely fine to have all the CSS written from scratch; everything else mentioned above still applies.

The example directory is well-suited for an AngularJS application, but can be customized for other frameworks or applications. More information is in the section.

In the HTML page, include all the files from the folder, which contains all the compiled CSS (from Grunt, Compass, etc.). Never alter them.

Особенности пользовательских свойств

Первая фишка — функция var. С помощью этой функции мы можем сказать браузеру, чтобы он взял значение из объявленного пользовательского свойства и добавил его для встроенного свойства.

Чтобы браузер так сделал, разработчику нужно объявить встроенное свойство, например, color, и добавить к нему в качестве значения функцию var, в аргументе которой передать название пользовательского свойства.

Для примера добавим пользовательское свойство для встроенных свойств border и color:

button {

—netologyBrandColor: purple;

border: 2px solid var(—netologyBrandColor);

color: var(—netologyBrandColor);

}

В браузере кнопка будет выглядеть так:

Зачем изучать пользовательские свойства, если есть переменные в Sass и они полностью устраивают?

Переменные в препроцессорах, таких как LESS и Sass, помогают организовать код, чтобы нам было проще поддерживать его. Например, в следующем коде я использую переменную $netologyBrandColor, в которой хранится основной цвет бренда:

$netologyBrandColor: purple;

button {

border: 2px solid $netologyBrandColor;

color: $netologyBrandColor;

}

После преобразования кода в браузере мы увидим следующий код:

button {

border: 2px solid purple;

color: purple;

}

Исходя из примера, понятно, что после преобразования кода из Sass в CSS на место переменных компилятор вставил их значения, поэтому мы можем сказать, что Sass-переменных нет в браузере.

Вторая фишка пользовательских свойств — они живут в браузере, поэтому мы можем изменять их прямо в нем. Например, изменим значение пользовательского свойства —netologyBrandColor при наведении мыши на кнопку.

button {

—netologyBrandColor: purple;

border: 2px solid var(—netologyBrandColor);

color: var(—netologyBrandColor);

}

button:hover {

—netologyBrandColor: #27ae60;

}

Теперь, если у кнопки сработает состояние hover, значения у свойств border и color изменятся. Именно из-за этой особенности пользовательские свойства и называют «живыми»: они могут изменяться прямо в браузере, и соответственно менять значения встроенных свойств, к которым они применяются.

В качестве еще одного примера изменю значение пользовательского свойства при состоянии focus.

button {

—netologyBrandColor: #000000;

border: 2px solid var(—netologyBrandColor);

color: var(—netologyBrandColor);

}

button:hover {

—netologyBrandColor: #27ae60;

}

button:focus {

—netologyBrandColor: #c0392b;

outline: 3px solid var(—netologyBrandColor);

}

Способность динамического изменения пользовательских свойства можно сочетать с Sass-переменными или LESS-переменными.

Что умеет Directual

В Directual есть все необходимые инструменты для построения серверной логики. Он позволяет:

работать с базами данных
строить API приложений
создавать сценарии
строить графический интерфейс или подключать свои страницы
собирать статистику
управлять версиями приложения
настраивать интеграции из каталога (в том числе с Zapier).

Работа с базами данных. Создавать и настраивать БД в Directual просто. Нажимаем «New data structure» и выбираем папку. Папки тоже можно создавать (кнопка «New folder»). Далее создаем столько полей, сколько нужно. Хорошая практика — распределять поля по группам. Например, в таблице Jobs можно вынести контактную информацию по заказу в группу «Contacts».

Directual позволяет хранить 23 типа данных. В том числе файлы, JSON и массивы ссылок. Данные можно выгружать или импортировать в форматах CSV и XLS.

Базы данных в DIrectual — реляционные. Это значит, что их можно связывать друг с другом. Для этого нужно в строке «Structure visible name» выбрать поле, к которому будут обращаться объекты из других таблиц.

API приложения. Крутость DIrectual в том, что он позволяет строить бэк независимо от фронтенда. Вы можете связать любое клиентское приложение.с решением на Directual. Но чтобы клиент и сервер понимали друг друга, нужен API — программный интерфейс приложения. Интерфейс позволяет обмениваться данными не только внутри приложения, но и со сторонними сервисами.

Схема взаимодействия бэкенда и фронтенда через API

Клиент и сервер общаются двумя способами:

webhooks — сервер отправляет клиенту данные при наступлении события
API-endpoints — GET- и POST- запросы от клиента к серверу для чтения и записи данных.

Вебхуки — это POST-запросы, которые сервер автоматически отправляет, когда происходит указанное событие. Например, пользователь вводит номер телефона, а приложение высылает ему СМС с паролем.

В настройках API можно не только указывать поля, но и управлять доступом пользователей к данным. Для этого (и не только) в каждом проекте Directual есть встроенная структура «App users».

Допустим, нужно, чтобы рядовые работники компании получили доступ к заказам, а администраторы еще и к контактным данным заказчиков. При этом и те, и другие должны отправлять запрос «getJobs». Для этого создаем два слоя безопасности.

Первый — для админов. В панели Layer 1 составляем логическое выражение AND role = «admin» и добавляем в GET-строке нужные параметры. В нашем случае это cost, deadline, customer, title, mail и phone.

Второй — для остальных работников. В панели Layer 2 меняем «=» на «!=», а в GET добавляем только deadline, title и customer. Теперь пользователи получают информацию, которая соответствует их роли.

Данные из запроса можно фильтровать и сортировать. Например, возвращать только невыполненные заказы (done=False) в порядке убывания срочности (по параметру «deadline»). Функция Endpoint respond preview позволяет посмотреть результат запроса в JSON-формате.

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

На скриншоте — простой сценарий. В зависимости от задач приложения он может трактоваться по-разному. Например, менеджер начал работу над проектом (create object). Если клиент оставил телефон, отправляем ему сообщение в Telegram, если нет — отправляем письмо на почту.

Есть два вида сценариев: real-time и запланированные (scheduled).

Real-time выполняются при наступлении события. Например, если пользователь заполнил форму с контактными данными, можно прислать ему промокод со скидкой.

Запланированные сценарии выполняются в определенное число месяца, день недели или ежедневно в указанное время. Например, еженедельные рассылки с акциями или сбор и анализ статистики пользовательской активности.

Интеграции. Возможности приложения можно расширить с помощью сторонних сервисов. Например, подключить Telegram-бота или Couplier, чтобы выгружать данные в Google-таблицы. Или выжать максимум из таблиц Airtable.

В каталоге интеграций Directual всего 6 сервисов, но среди них — Zapier. Это платформа для настройки интеграций, которая поддерживает более 3000 приложений. И весь этот инструментарий доступен разработчику в Directual.

clamp()

Она сочетает в себе и . Функция получает на вход параметры:

И вычисляет значение вот таким образом:

Проще всего её понимать представляя среднее значение () как желаемое, которое ограничено минимальным и максимальным значениями. Например, этот код

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

Аналогичный подход часто используется при разработке адаптивных сайтов: мы задаём минимальное и максимальное значения ширины страницы, позволяя ей тянуться и сжиматься в заданных пределах, например, в диапазоне от до :

Используя это можно записать в одну строчку:

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

Оба блока ведут себя совершенно одинаково, разница только в возможностях этих подходов: позволяет добавить умную динамику значений в любое свойство, не только в размеры блоков. Мне нравится идея использовать для адаптивных шрифтов, почитать про это можно в статье Linearly Scale font-size with CSS clamp() Based on the Viewport.

Предыдущие функции достаточно просты по сравнению с , самой мощной и интересной.

HTML в JSX

JSX напоминает HTML, но на самом деле это XML синтаксис.

В конечном итоге получается, что вы рендерите HTML, так что вам всего-лишь нужно знать несколько различий между тем, как вы определите некоторые вещи в HTML и как вы это сделаете в JSX.

Вам нужно закрывать все теги

JSX это как XHTML, если вы когда-либо его использовали, то вы уже знаете, что в нём надо закрывать все теги: забудьте про , а вместо этого используйте самозкрывающийся тег . Ну и также делайте с другими тегами.

Горбатый регистр это новый стандарт

В HTML вы найдете атрибуты без каких-либо изменений. В JSX они переименованы в свою вариацию на горбатом регистре:

class стал className

Так как JSX это JavaScript и это зарезервированное слово, вы не можете написать:

Но вам нужно использовать:

Тоже самое применяется к , который превращается в .

Атрибуты стилей изменяют свою семантику

Атрибут в HTML позволяет указывать инлайновые стили. В JSX это больше не принимается как строка, а в разделе CSS в React вы узнаете почему это так удобно.

CSS в React

JSX даёт клевый способ указывать CSS стили.

Если у вас есть небольшой опыт работы с инлайновым HTML, то на первый взгляд вам покажется, что вас отправили лет на 10–15 назад, в мир, где инлайновый CSS был абсолютной нормой.

Но стилизация с JSX это не тоже самое: во первых, вместо принятия строки, содержащей свойства CSS, JSX атрибут принимает только объект. Это означает, то что вы определяете свойства в объекте:

Или

CSS значения, которые вы пишите в JSX, слегка другие, чем чистый CSS:

Основные названия свойств пишутся в горбатом регистре

Значения это просто строки

Вы разделяете каждое “определение” с помощью запятой

Почему это предпочтительнее над чистым CSS/SASS/LESS?

CSS это нерешенная проблема. После его появления, появились десятки инструментов, связанных с ним, которые стремительно взлетали и также быстро были забыты. Главная проблема с JS в том, что тут нет областей видимости и довольно легко написать CSS, который не работает так, как надо, следовательно, “грязные быстрые решения” могут повлиять на те элементы, которые вообще не должны быть затронуты.

JSX позволяет компонентам полностью инкапсулировать их стили.

Решение ли это?

Инлайновые стили в JSX конечно хороши, пока вам не надо: написать медиа запросы, стили анимаций, сослаться на псевдо-классы, сослаться на псевдо-элементы.

Вкратце, они покрывают основы, но это далеко не конечное решение.

Повторное использование кода

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

Повторно используемый код не должен работать за счёт семантики. Одним из методов может быть соединение селекторов вместе, разделяя их запятой и позволяя одинаковым стилям наследоваться сразу двум селекторам. Другой подход, который часто встречается в ранее упомянутых методологиях OOCSS и SMACSS, включает в себя привязывание стилей к одному классу, а затем использование нескольких классов в одном элементе.

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

Связывание таблиц стилей с HTML-кодом

Подключение с использованием тега <link>

Самым распространенным методом добавления (связывания) внешней таблицы стилей с документом является использование тега <link>.
Элемент <link> определяет связь между документом и внешним ресурсом.

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

HTML тег <link> имеет следующий синтаксис:

<link  rel = "stylesheet" href =  "styles.css"> /* синтаксис HTML 5 */
<link  rel = "stylesheet" href =  "styles.css" type =  "text/css"> /* синтаксис HTML 4.01 */

Сразу хочу обратить ваше внимание на то, что атрибут type, который определяет MIME-тип, используемого файла (в нашем случае текстовый файл таблиц стилей) не является обязательным в HTML 5.
Для всех типов документов в HTML 5 необходимы лишь два обязательных атрибута:

rel = «stylesheet» — определяет отношение между текущим документом и связанным документом на который ведёт ссылка (в нашем случае таблица стилей).
href — задает URL-адрес местонахождения внешнего файла. Адрес может быть как относительный, так и абсолютный.

Подключение с использованием правила @import

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

Внешняя таблица стилей может быть подключена к веб-странице с помощью HTML тега <link>, или с использованием встроенного в CSS правила @import, которое по-большому счету делает то же самое. Оба варианта позволяют присоединить таблицы стилей к веб странице.

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

Импортирование к внешней таблице стилей

Давайте рассмотрим пример, который позволит нам присоединить несколько таблиц стилей к одной внешней таблице стилей:

/* Содержимое файла anyname.css */
@import url("color.css"); /* импортируем в основной файл содержимое первого файла css */
@import url("fonts.css"); /* импортируем в основной файл содержимое второго файла css */
/* стили, которые находятся в основном файле css */
селектор {
свойство: значение;	
}
...
/* Конец содержимого файла anyname.css */

Чтобы присоединить один внешний файл таблиц стилей к другому, необходимо внутри файла к которому добавляется содержимое объявить
правило @import и указать URL путь к этому файлу. Чтобы задать путь необходимо после правила @import указать url(«path/to/file»).
При этом путь, который указывается в круглых скобках может быть как абсолютным, так и относительным.
Информацию о том как задавать абсолютные и относительные пути вы можете узнать в статье учебника HTML 5 «HTML ссылки».

Как и с помощью нескольких тегов <link> вы можете разместить несколько правил @import, чтобы присоединить необходимое количество внешних таблиц стилей.

Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе таблицы стилей будут проигнорированы браузерами и не импортированы в файл

Импортирование к внутренней таблице стилей

Кроме того, с использованием правила @import существует возможность привязать внешние таблицы стилей к внутренней таблице стилей документа. Для этого необходимо объявить правило или правила сразу после открывающего тега <style>:

<!DOCTYPE html>
<html>
<head>
	<title>Импортирование файла к внутренней таблице стилей</title>
<style>
@import url("color.css"); /* импортируем к внутренней таблице стилей документа содержимое первого файла css */
@import url("fonts.css"); /* импортируем к внутренней таблице стилей документа содержимое второго файла css */
h1 {
text-align: center; /* выравниваем заголовок по центру */
color: red; /*устанавливаем цвет текста красный */
}
</style>
</head>
<body>
	<h1>Заголовок первого уровня.</h1>
	<p>Абзац для примера.</p>
</body>
</html>

Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

Кроме того, в некоторых случаях правило @import может замедлять загрузку таблиц стилей, либо загружать их не в заданном порядке, что может быть критично для конечного отображения конкретной страницы.

Начальная конфигурация

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

HtmlWebpackPlugin упрощает создание файлов HTML и может автоматически вставлять модули JavaScript в наш основной шаблон HTML.

Первым делом установим основные модули: webpack и webpack-dev-server (облегченный веб сервер для разработки).

$ yarn add webpack webpack-dev-server html-webpack-plugin -D

Так же нам будет нужен webpack-cli:

yarn add webpack-cli -D

Теперь создадим файл конфигурации webpack. В корне проекта создайте файл webpack.config.js со следующим содержимым:

const HtmlWebpackPlugin = require('html-webpack-plugin'); // Require  html-webpack-plugin plugin

module.exports = {
  entry: __dirname + "/src/app/index.js", // webpack entry point. Module to start building dependency graph
  output: {
    path: __dirname + '/dist', // Folder to store generated bundle
    filename: 'bundle.js',  // Name of generated bundle after build
    publicPath: '/' // public URL of the output directory when referenced in a browser
  },
  module: {  // where we defined file patterns and their loaders
      rules: 
  },
  plugins: [  // Array of plugins to apply to build chunk
      new HtmlWebpackPlugin({
          template: __dirname + "/src/public/index.html",
          inject: 'body'
      })
  ],
  devServer: {  // configuration for webpack-dev-server
      contentBase: './src/public',  //source of static assets
      port: 7700, // port to run dev-server
  } 
};

Начальная конфигурация представляет собой скелет нашего проекта со следующими частями.

— Указывает на точку входа в проект, и откуда нужно начать построение графа внутренних зависимостей проекта.
— Указывает куда будут отправляться создаваемые файлы сборки и как называть эти файлы.
— Набор параметров для использования webpack-dev-server.

Далее добавим команду start в файл package.json.

...
"scripts": {
  "start": "webpack-dev-server --history-api-fallback --inline --progress"
},
"dependencies": {
...

Затем мы можем запустить наше приложение с:

$ yarn start

В консоле должно отобразиться что то типа такого:

Затем вы можете перейти по адресу http://localhost:7700/, чтобы увидеть наше приложение.

Регистрация компонента

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

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

Вот конструктор, который мы будем использовать.

Я оставил в коде подробные построчные комментарии, но не объяснил код на последней строке.

Мы здесь делаем много работы. Во-первых, мы берем наш веб-компонент (this) и создаем скрытого шпиона, я имею в виду Shadow DOM. означает, что JavaScript может извне обращаться к элементам Shadow DOM и управлять ими, что-то вроде настройки доступа к компоненту через черный вход. Был создан Shadow DOM и мы добавляем к ней узел (Примечание переводчика: HTML Node). Этот узел будет полной копией шаблона, включая все элементы и текст шаблона. С шаблоном, прикрепленным к Shadow DOM из пользовательского компонента, элемент и slot атрибут берут на себя задачу сопоставления содержимого с тем, где оно должно находиться.

Проверьте это. Теперь мы можем объединить экземпляр одного и того же веб-компонента, отображая разный контент, просто изменив один элемент.

Пример: Codepen

Препроцессинг

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

Как только вы начнете возиться с Sass, он возьмет ваш предварительно обработанный файл Sass и сохранит его как обычный файл CSS, который вы можете использовать на своем веб-сайте.

Самый простой способ сделать это — в вашем терминале. После установки Sass вы можете скомпилировать свой Sass в CSS с помощью команды . Вам нужно будет указать Sass, из какого файла строить и куда выводить CSS. Например, запуск из вашего терминала потребует одного файла Sass, , и скомпилирует этот файл в .

Вы также можете просматривать отдельные файлы или каталоги с флагом . Флаг просмотра указывает Sass следить за вашими исходными файлами на предмет изменений и повторно компилировать CSS каждый раз, когда вы сохраняете свой Sass. Если вы хотите просмотреть (а не вручную создавать) файл , вы просто добавите флаг просмотра в свою команду, например:

Вы можете просматривать и выводить в каталоги, используя пути к папкам в качестве ввода и вывода и разделяя их двоеточием. В этом примере:

Sass будет отслеживать все файлы в папке на предмет изменений и компилировать CSS в папку .