Rtl

История

Алгоритм TDES (3DES, Tripple DES) был создан в 1978 году как улучшение алгоритма DES. По сравнению с последним улучшилась криптостойкость, но в три раза увеличилось время вычисления. Несмотря на то, что на сегодняшний день наиболее распространен алгоритм AES, который принят в качестве стандарта шифрования правительством США, алгоритм TDES широко используется. Например, даже сейчас его можно встретить в системных продуктах компании Microsoft.

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

Зачем я решил это сделать и описать

Действительно, эти алгоритмы уже очень глубоко исследован и не раз был описан и написан. Однако, когда я знакомился с этой темой и первый раз ради опыта решил реализовать этот алгоритм, я столкнулся с тремя проблемами. Во-первых, его аппаратная реализация ни разу не описывалась в русскоязычном пространстве, так что я решил заполнить этот пробел своей статьей. Во-вторых, большинство англоязычных статей на эту тему написаны для реализации на ПЛИС с использованием строенных ROM блоков памяти, а меня интересовала именно реализация "для кремния". И в-третьих большинство авторов приводят только часть исходного кода, но целиком исходников не так много. При этом написание этого модуля не является сложной логической задачей, но нужно безошибочно перенести все таблицы и преобразования в код. Так что отлавливать ошибки довольно рутинная и долгая задача.

Так же интересной задачей является написание тестовых векторов, которые при небольшом количестве смогли бы покрыть большую часть блока. Тестовые векторы для DES найти можно, например в [1], а вот для TDES-EDE3 мне найти ничего не удалось.

Описание алгоритма DES

Начать знакомство с алгоритмом TDES необходимо с алгоритма DES. Приведу его краткое описание с нужными мне обозначениями.

DES является симметричным блочным алгоритмом с блоком размером 64 бит и ключом длинной 56 бит (либо расширенным ключом длинной 64 бит). Все таблицы преобразований и перестановок в удобном виде находятся в excel файле на моем гитхабе. Алгоритм шифрования представлен на рисунке 1 и состоит из следующих этапов:

• Начальная перестановка IP. На этом этапе исходный блок размера 64 бит преобразуется в блок T такого же размера при помощи перестановки IP.

• 16 раундов шифрования. Входной блок T₀ разбивается на старшую часть L₀ и R₀. Далее вычисления задаются рекуррентным соотношением:

  

• Генерирование ключей k_i. В первую очередь исходный ключ расширяется добавлением бит в позиции 8, 16, 24, 32, 40, 48, 56, 64 таким образом, чтобы каждый байт содержал нечетное число единиц. Хотя на практике обычно все устроено наоборот. На вход подается уже расширенный 64-битный ключ, из которого потом выбираются значимые 56 бит. Это используется для обнаружения ошибок при передаче ключей, если такое необходимо. Далее, производится перестановка KI согласно таблице (она записана для 64-битного ключа), причем добавленные биты в перестановке не участвуют. Полученный блок делится на старшую и младшую части размером 28 бит. Для получения следующего ключа используется циклическая перестановка влево значений внутри каждой части на величину, зависящую от номера раунда: для первого, второго, девятого и шестнадцатого раундов происходит перестановка на два, для всех остальных на один.

  Сам же ключ имеет длину 48 бит и выбирается из 56 битного вектора согласно преобразования KO.

• Вычисление функции f. Аргументами функции f являются 32-битовый вектор R_(i-1) и 48-битный ключ k_i. Для вычисления функции f последовательно используются:

  • Функция расширения E. Расширяет 32-битовый вектор R_(i-1) до 48 бит согласно таблице преобразования E.

  • Xor с ключом.

  • Преобразование S. Полученный вектор делится на 8 блоков по 6 бит каждый. Каждый из восьми блоков преобразуется согласно S-таблицам. Пара старший и младший бит из блока определяют столбец, остальные четыре бита определяют строку.

  • Перестановка P. Производится перестановка согласно таблице P. В результате получается вектор длинной 32 бита.

• Конечная перестановка OP. После 16 раундов шифрования производится конечная перестановка согласно таблице OP.

Расшифровка DES проводится в обратном порядке (рис. 2). В раундах используется обратное преобразование сетью Фейстеля.

Аппаратная реализация DES

Для написания быстрой аппаратной реализации буду использовать конвейер. За основу брал работу [2], однако генерирование ключа решил делать по-другому. Стоит обсудить стадии вычислений.

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

Самая долгая часть это раунд шифрования, а именно, вычисление функции f. Функция расширения не требует логических элементов в реализации, то же касается перестановки P. Так что потребуется время на xor с ключом, и, самое долгое, преобразование S.

Преобразование S буду реализовывать при помощи таблицы поиска.

Теперь можно обсудить конвейеризацию. Самый очевидный и практически удобный вариант разбить на стадии по каждому раунду (см. рис. 1). Так же удобно добавить входные триггеры, на рисунке это stage 0.

Перейду к блоку, который будет производить шифрование одного раунда. Это, во-первых, вычисление функции f, а во-вторых вычисление рекуррентного соотношения для R_i. На вход блока подается два вектора R_(i-1) и L_(i-1) длинны 32 бит и ключ k_i длинны 48 бит. На выходе блока формируется результат раунда R_i и L_i. Вычисление ключа сделаю в отдельном блоке. Весь код написан на языке System Verilog.

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

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

Так же понадобится реализация функции f_decrypt. Т.к. расшифровка производится обратной сетью Фейстеля, то по сути нужно просто поменять местами L_out и R_out в блоке f_encrypt. Так же придется изменить блок генерации ключей, т.к. теперь 16-й ключ нужен на первой стадии, 15-й на второй и т.д.

Все исходники загружены на мой гитхаб.

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

Имеет смысл проверить S-таблицы. Для этого я выпишу 512 = 64*8 тестовых вектора с ключом такие, что они покрывают все значения в S-таблице. Я использовал все ключи key = 64'h0, а тестовые векторы генерировал таким образом: выбираю S-таблицу, выбираю в ней ячейку, которую я хочу протестировать. Выписываю вектор, в котором нужные биты для для выбранной ячейки равны единицы, а все остальные равны нулю. Далее, я делаю обратную перестановку функции расширения E и полученный 32-битный вектор дополняю нулями до 64-битного. И, наконец, делаю обратную перестановку OP. Таким образом, каждый вектор последовательно пробегает каждую ячейку S-таблицы. С получившимися тестовыми векторами можно ознакомится в файле тестбенча на гитхабе.

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

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

Теперь, у меня есть написанный и протестированный RTL модуля DES для шифрования и дешифровки.

Аппаратная реализация алгоритма TDES

Алгоритм TDES состоит из комбинации трех стадий шифрования и расшифровки. Наиболее распространен 3DES-EDE3 (encrypt-decrypt-encrypt) с тремя разными ключами. Таким образом, длина ключа 168 бит (расширенный 192 бит), размер блока все так же равен 64 бит.

Для реализации этого алгоритма нужно соединить блоки шифрования и расшифровки. При этом нужно добавить дополнительную цепочку триггеров для задержки ключа до следующих блоков на время исполнения 16 раундов. При таком соединении блоков будут последовательно происходить перестановки IP и OP, которые являются обратными. Однако при последующем синтезе эти перестановки будут оптимизированы и заменены прямыми соединениями. RTL блока находится в приложении.

Тестовые векторы строил следующим образом: взял тестовые векторы для DES шифратора, ключ из этих векторов есть ключ первой стадии TDES. Ключи второй и третьей стадии одинаковые и равны 64'hffffffffffffffff. Таким образом, я проверяю S-блоки первого шифрования TDES, т.к. далее идет расшифровка и шифрование с одинаковым ключом, то ожидаемый результат совпадает с результатом после первой стадии, а он же результат из тестов на DES. Таким же образом тестирую последнее шифрование TDES. Если сейчас все хорошо, то я считаю, что две части из трех работают правильно, а тогда я могу проверить S-блоки стадии расшифровки с теми же входными и ожидаемыми векторами, что и в DES и ключами равными 64'h0.

Таким образом получается 512*3 = 1536 тестовых вектора. Тестовые векторы для TDES находятся в файле тестбенча на гитхабе.

Итог

Я написал и протестировал RTL алгоритмов шифрования DES и TDES-EDE3. Так же я написал тестовые векторы для этих алгоритмов. Все исходники на гитхабе, надеюсь они помогут Вам в знакомстве или даже реализации этих алгоритмов. Спасибо за внимание!

Полезные ссылки:

• [1]

• [2]

• Хорошая статья с примерами вычислений по стадиям

• Гитхаб с исходниками

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

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

Вы готовы? Тогда вперёд!

В чём основная проблема?

Если вы используете переменные CSS так же, как и препроцессоры CSS (например в Sass), то вы не полностью реализуете все их преимущества. Рассмотрите следующий пример:

:root {    --brand-primary: #7777e9;    --brand-secondary: #c96fde;}.title {    color: var(--brand-primary);}

И тут нет никакой разницы с нижеприведённым примером в Sass:

$brand-primary: #7777e9;$brand-secondary: #c96fde;.title {    color: $brand-primary;}

Да, применение переменных CSS в качестве переменных цвета ни в коей мере не является ошибкой. Но это всё равно, что покупать Apple MacBook M1 для посещения интернет-сайтов, хотя с этим и так хорошо справляется ваш старый настольный ПК, собранный в 2012 году. Какой смысл покупать ультрасовременный компьютер и делать на нём то же самое, никак не используя весь спектр его возможностей? Как вы понимаете, примерно так я и думаю об использовании переменных CSS для сохранения информации о цветах.

Цель этой статьи познакомить с различными вариантами практического применения, где полностью раскрываются возможности переменных CSS. Приступаем!

Примеры и случаи практического использования

Полные формы записи свойств

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

<!-- Base component --><header class="page-header">    <h2>...</h2>    <p>...</p></header><!-- Component variation --><header class="page-header page-header--compact">    <h2>...</h2>    <p>...</p></header>

.page-header {    --padding-start: 2.5rem;    --padding-block: 2rem;    padding: var(--padding-block) 1rem var(--padding-block) var(--padding-start);}.page-header--compact {    --padding-start: 1.5rem;    --padding-block: 1rem;}

Обратите внимание, для изменения заполнения нам потребуется всего лишь изменить значение переменной CSS. Без неё нам было бы необходимо вручную вводить полную форму записи свойства внутреннего отступа padding, чтобы изменить только одно значение в нём.

.page-header {    padding: 2rem 1rem 2rem 1.5rem;}.page-header--compact {    padding: 1rem 1rem 1rem 2.5rem;}

Всё вышесказанное применимо и для свойства внешнего отступа margin.

Свойства CSS background

Что касается свойств CSS для работы с фоном, то и здесь переменные CSS помогают сократить объём создаваемого нами кода. И даже больше того: благодаря их применению сам код CSS легче читать.

Хранение значений URL

При работе с интерфейсом пользователя вам может потребоваться добавить какое-либо изображение в декоративных целях. В таком случае хорошим решением будет использование элементов <div> и background-image. Если интерфейс должен быть динамическим, то значения для изображения нужно подставлять с помощью JavaScript.

Без применения переменных CSS соответствующий код HTML будет выглядеть так:

<section     class="newsletter"     style="background-image: url('/assets/ui/decoraitve/newsletter-lg-aj1891101.svg')"></section>

Но вместо того, чтобы напрямую изменять свойство background-image, мы можем сделать следующее.

<section     class="newsletter"     style="--thumb:url('/assets/ui/decoraitve/newsletter-lg-aj1891101.svg')"></section>

.newsletter {    background-image: var(--thumb);    background-size: cover;    background-position: 100% 50%;}

Обратите внимание, что необходимо включить элемент url() без переменной CSS.

Положение фонового изображения

В приведённом выше примере фоновое изображение помещается справа. Для макетов с направлением текста справа налево (RTL) положение фона следует перевернуть.

.newsletter {    --pos: 100% 50%;    background-image: var(--thumb);    background-size: cover;    background-position: 100% 50%;}html[dir="rtl] .newsletter {    -background-position: 0% 50%;}

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

.newsletter {    /* other styles */    background-position: var(--pos);}html[dir="rtl] .newsletter {    --pos: 0% 50%;}

Угловой градиент: часть 1

Угловой градиент также можно применять при создании макетов для нескольких языков. По умолчанию он может быть равен 45deg, и, возможно, потребуется изменить его на -45deg для макетов RTL.

.element {    --angle: 90deg;    background: linear-gradient(var(--angle), #4088vb, #C05858);}html[dir="rtl] .element {    --angle: -90deg;}

Угловой градиент: часть 2

В случае с угловым градиентом использование переменных CSS с радиальными градиентами действительно существенно упрощает настройку положения. В следующем примере положение градиента изменяется при помощи переменной --pos.

А здесь показано, как можно сделать то же самое без переменных CSS.

.card {    background: radial-gradient(        circle 200px at center top,        rgba(64, 136, 203, 0.5),        #f7f7f7    );}

Теперь предположим, что у нас есть какой-то вариант карточки .card-2 и он должен находиться в другом положении. Необходимо написать следующий код:

.card-2 {    background: radial-gradient(        circle 200px at center top,        rgba(64, 136, 203, 0.5),        #f7f7f7    );}

Таким образом, переписывается всё определение градиента. Можно ли сделать лучше? Определённо. Обратите внимание, что единственным настраиваемым значением для этого варианта является переменная --pos.

.card {    --pos: center top;    background: radial-gradient(        circle 200px at var(--pos),        rgba(64, 136, 203, 0.5),        #f7f7f7    );}.card-2 {    --pos: left top;}

Свойство clip-path

Весьма полезным случаем использования переменной CSS является изменение с её помощью значений clip-path: polygon() при переходе с настольных на мобильные устройства.

На показанном выше рисунке необходимо изменить положение вершин многоугольника. С помощью переменных CSS сделать это намного проще.

.hero {    --first: 4% 7%;    --second: 80% 0;    --thrid: 100% 95%;    --fourth: 10% 100%;    clip-path: polygon(var(--first), var(--second), var(--thrid), var(--fourth));}@media (min-width: 40rem) {    .hero {        --second: 96% 0;        --thrid: 92% 82%;    }}

Если вы хотите узнать больше о свойстве CSS clip-path, здесь вы найдёте статью за авторством вашего покорного слуги.

Элемент флажка

Великолепный пример использования переменных CSS это применение их в сочетании с функцией определения цветов hsla(). Таким образом мы можем создавать динамические компоненты, которые затем можно менять, корректируя одну или несколько переменных CSS.

Первое, что я сделал, это определил значения hsla() для корневого элемента компонента.

.form-item {    --primary-h: 240;    --primary-s: 56%;    --primary-l: 63%;    --primary-alpha: 100%;}

Теперь я могу использовать эти свойства в функции определения цветов hsla().

/* The circle that appears on hover */.form-item__label:after {    --primary-alpha: 0;    background-color: hsla(        var(--primary-h),        var(--primary-s),        var(--primary-l),        var(--primary-alpha)    );}.form-item__label:hover:after {    --primary-alpha: 15%;}

Код SVG, встроенный в CSS

Когда-то я работал над пользовательским интерфейсом для проекта одного клиента и столкнулся с такой ситуацией. У нас был раздел с двумя лентами (одна сверху, а вторая снизу). Мне необходимо было изменить цвет, угол поворота и размер этих лент, не создавая отдельный код CSS для каждой из них. Спасением стали переменные CSS!

Прежде всего я подготовил требуемый код SVG в Adobe Illustrator. Я разделил каждую ленту на три слоя:

• светлые области;

• тёмные области;

• базовый слой.

Затем я экспортировал этот код SVG и поместил его в элементах <defs> так, чтобы легко можно было использовать его повторно. Обратите внимание, я также добавил ключевое слово currentColor! Это и есть то самое магическое значение, которое заставит всё работать.

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

.tape {    width: var(--size);    transform: rotate(var(--angle));}

<svg class="tape" style="--angle: 10deg; color: red; --size: 120px;" aria-hidden="true" focusable="false" viewBox="0 0 123 47">  <use href="#tape"></use></svg>

Готово. Мы создали собственный код SVG, который можно настраивать по мере необходимости. Впечатляет, не правда ли?

Создание миксинов (примесей-шаблонов), таких, как в Sass

Об этой интересной возможности я узнал из рекомендуемого мною к просмотру выступления Ли Веру (Lea Verou). Идея состоит в том, чтобы установить исходные переменные CSS для определённого свойства, а затем переопределять их, когда это понадобится.

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

<div class="featured-section u-center"></div>

.u-center {  --mx: initial;  --my: initial;  margin: var(--my) var(--mx);}.featured-section {  --mx: auto;  --my: 2rem;}

Во-первых, я создал служебный класс .u-center с заданными по умолчанию значениями для горизонтальных и вертикальных внешних отступов. Я могу добавить этот класс к элементу и затем переопределить переменные CSS. Это может оказаться очень полезным, например, если элементу нужны определённые внешние отступы только с верхней и нижней сторон.

Использование функции calc()

Функция calc() в сочетании с переменными CSS может очень пригодиться. Мы можем создать какой-то базовый размер для компонента, а затем, меняя только одну переменную, можем делать его больше или меньше.

Это может оказаться полезным в самых разных случаях применения. Давайте предположим, что нам необходимо создать несколько вариантов для аватара пользователя.

.c-avatar {  width: calc(var(--size, 32) * 1px);  height: calc(var(--size, 32) * 1px);}

Обратите внимание, я использовал функцию var(--size, 32). Если переменная --size не определена, то значение 32 будет использовано как резервное значение. Важно указать 1px, чтобы добавить px к результирующему числу.

Таким образом, мы можем создавать вариации классов, просто добавляя переменную CSS --size.

.c-avatar--medium {    --size: 64;}.c-avatar--large {    --size: 128;}

Псевдоэлементы

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

В заголовке раздела содержится декоративная фиолетовая линия, которая является псевдоэлементом. Мы можем передать переменную CSS данному заголовку, и этот псевдоэлемент унаследует её.

.section-title {    --dot-color: #829be9;}.section-title:before {    content: "";    background-color: var(--dot-color);}

Но, кроме того, мы также можем имитировать изменение цвета псевдоэлемента с помощью Javascript.

Встроенные стили

Другим примером полезного применения переменных CSS является использование их в качестве встроенных стилей. И тут открывается множество возможностей для настройки какого-либо компонента путём изменения одной или нескольких переменных.

Рассмотрите следующий пример.

.o-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(var(--item-width, 200px), 1fr);    grid-gap: var(--gap);}

У нас есть настроенный грид и заданное по умолчанию для ширины элемента грида значение 200px. В коде HTML мы можем переопределить его, переустановив значение для переменной CSS.

<!-- Example 1 --><div class="o-grid" style="--item-width: 250px;">     <div></div>     <div></div>     <div></div></div><!-- Example 2 --><div class="o-grid" style="--item-width: 350px;">     <div></div>     <div></div>     <div></div></div>

Ну разве это не полезно? Если вы хотите узнать больше о переменных CSS со встроенными стилями, я уже писал об этом более подробно.

Заключение

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

Если фронтенд-разработка для вас давно родная стихия можно уже задуматься о грейде доFullstack-разработчика, настоящего универсала веб-разработки, которому будут рады в любом крупном проекте. На нашем курсе, помимо современной программы, вас ждет много практики в разных форматах от преподавателей с опытом коммерческой разработки. Приходите учиться, будет сложно, но интересно!

Узнайте, как прокачаться и в других специальностях или освоить их с нуля:

• Профессия Data Scientist

• Профессия Data Analyst

• Курс по Data Engineering

В этом году я видел много шумихи вокруг популярного фреймворка CSS, Tailwind CSS. И подумал, что поделюсь некоторыми мыслями и опасениями по поводу этого фреймворка UI. Я приобрёл небольшой опыт написания CSS с подходом utility-first (полезность прежде всего), когда начал свою карьеру в разработке интерфейсов, несколько лет назад.

К старту курса о Frontend-разработке делимся статьёй, автор которой решил, возможно, несколько изменить то, как воспринимается Tailwind, рассказать как о положительных, так и об отрицательных сторонах фреймворка, особенно в контексте работы с мультиязычными сайтами.

Вещи, которые я считаю интересными

Вам не нужно закрывать файл с HTML

Основной заголовок на официальном сайте Tailwind гласит:

Быстрое создание современных веб-сайтов, даже не покидая HTML.

Я согласен, что писать код в одном месте может быть быстрее, чем переключаться между разными файлами. Однако оставить в стороне свой HTML для меня не проблема. Это может помочь переключить контекст между разметкой и стилями. Разделение файлов HTML и CSS может помочь мне лучше сосредоточиться на выполнении поставленной задачи. Однако, когда разметка и стили смешиваются, когда вы работаете над сложным, многоязычным, отзывчивым сайтом и пользовательским интерфейсом с темами, всё может пойти наперекосяк.

Когда я работаю с Tailwind, это похоже на то, как если бы я держал две ручки: одну для набросков, а другую для раскрашивания. Одновременное написание разметки и CSS напоминает мне эти две ручки.

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

Проектные ограничения

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

Именование классов CSS

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

Однако, если вы придерживаетесь разделения разметки и стилей, разработка займёт гораздо больше времени. Ещё одно полезное применение Tailwind это соревнование или хакатон. Самое главное на таких событиях сделать работу и что-то получить за неё. Никому не будет дела до того, как вы написали CSS, верно?

То, с чем я не согласен

Tailwind не фреймворк utility-first

Подзаголовок на их веб-сайте сообщает, что CSS Tailwind:

Прежде всего утилитарный CSS-фреймворк, содержит такие классы, как...

Из увиденного я сделал вывод, что Tailwind это только утилитарный (utility-only) фреймворк. Может быть, название "только утилитарный" повлияет на то, как его воспримут новички? Я редко вижу какой-то сайт, использующий Tailwind и применяющий концепцию utility-first.

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

Обратите внимание на то, что я знаю о методе @apply. Рассмотрим пример из документации Tailwind:

<input  class="block appearance-none bg-white placeholder-gray-600 border border-indigo-200 rounded w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:border-indigo-400 focus:placeholder-gray-400 focus:ring-2 focus:ring-indigo-200"  placeholder="jane@example.com"/>

Это поле ввода с 17 классами CSS. Что проще: читать классы один за одним горизонтально или сканировать их сверху вниз? Вот так поле будет выглядеть стиль этого поля в файле CSS:

.c-input {  display: block;  appearance: none;  background-color: #fff;  @include placeholder(grey);  border: 1px solid rgba(199, 210, 254, var(--tw-border-opacity));  border-radius: 0.25rem;  padding: 0.75rem 1rem;  line-height: 1.25rem;  color: rgba(55, 65, 81, var(--tw-text-opacity));}.c-input:focus {  /* Focus styles.. */}

Я могу прочитать и понять, какие стили содержит это поле ввода, гораздо быстрее, чем в ситуации, когда сканирую HTML. Возможно, существуют плагины для редакторов кода, которые автоматически форматируют HTML-классы так, чтобы каждый из них располагался отдельно [на отдельной строке], но в DevTools браузера этого нет.

Я знаю о методе @apply, но каждый раз, когда я думаю о нём, я прихожу к выводу, что он противоречит основной концепции Tailwind. Вот тот же пример (поле ввода):

.c-input {  @apply block appearance-none bg-white placeholder-gray-600 border border-indigo-200 rounded w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:border-indigo-400 focus:placeholder-gray-400 focus:ring-2 focus:ring-indigo-200;}

Посмотрите на длину списка классов. Если в Tailwind в приоритете полезность, то почему в официальной документации Tailwind или в Tailwind UI мы редко видим @apply? Опять же, я вижу Tailwind как только утилитарный фреймворк.

Всегда нужно давать имена элементам

В дизайн-системе трудно обсуждать конкретный компонент, не договорившись о его названии. Причина вот в чём: вы не отправите своему коллеге сообщение вроде такого:

Привет, есть новости о bg-white w-full py-3 px-4?

На самом деле фраза будет такой:

Есть новости о дизайне поляризованной карты?

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

<person class="hair-brown length-[175] face-rounded"></person>

Код выше бессмыслица. Гораздо лучше такой код:

<person class="ahmad"></person>

Некоторые классы запутывают

Когда я только начинал использовать Tailwind, мне нужно было добавить класс, который отвечает за свойство align-items: center. Моей первой мыслью было воспользоваться align-center, но это не сработало.

Я посмотрел в документацию и впал в замешательство. Класс items-center добавит CSS-свойство align-items: center, где класс align-middle будет содержать vertical-align: middle. Чтобы запомнить их, требуется немного мышечной памяти.

Опытные веб-разработчики могут легко адаптироваться к этому, и это не будет для них большой проблемой. Но самое интересное для новичка в CSS. Изучение Tailwind без уверенного знания CSS может привести к недопониманию в будущем. Например, если разработчик начал свою карьеру только с Tailwind, то, когда его попросят написать CSS с нуля, он не сможет этого сделать. Я не говорю, что это невозможно, но это потребует времени и усилий.

Tailwind затрудняет настройку дизайна в браузере

Я занимаюсь как дизайном, так и frontend-разработкой, поэтому редактирование в браузере с помощью DevTools для меня крайне важно. С Tailwind работа в DevTools может стать сложнее. Скажем, например, я хочу изменить отступы для компонента. Когда я изменяю значение класса py-3, это влияет на каждый использующий его элемент страницы.

Единственный способ убрать его открыть меню .cls в DevTools, после чего класс можно будет переключить. Однако это не решает проблему. Что я могу сделать в этом случае? Добавить встроенный стиль через DevTools, а это мне не нравится. Проблема решится, если просто давать элементам названия. Добавлю к этому факт: общий размер файла полной сборки Tailwind составляет 12 МБ. Редактирование CSS в DevTools будет очень медленным.

Это означает, что разработка в браузере неэффективна. Недавно команда Tailwind выпустила компилятор JIT (just in time), удаляющий неиспользуемый CSS. Это мешает всей идее дизайна в браузере.

Я набрал back и получил длинный список всех доступных классов CSS. При JIT-компиляции таких подсказок не будет.

Tailwind неудобен для многоязычных сайтов

Чтобы вы больше понимали, добавлю: я работаю над веб-сайтами, которые должны работать как на английском (с направлением слева направо, LTR), так и на арабском (с направлением справа налево, RTL). Рассмотрим такой код:

/* LTR: left to right */.c-input {  padding-left: 2rem;}

В отдельном файле CSS для RTL стиль будет выглядеть так:

/* RTL: Right to left */.c-input {  padding-left: 0;  padding-right: 2rem;}

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

html[dir="rtl"] .ml-2 {   margin-right: 1rem; }

Для меня это не очень хорошее решение. Второй найденный плагин немного отличался от первого:

[dir="rtl"] .rtl\:text-2xl {  font-size: 1.5rem;  line-height: 2rem;}

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

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

Чтобы помочь в создании многоязычного веб-сайта, сейчас я использую Bi-App Sass. Вот пример:

.elem {  display: flex;  @include margin-left(10px);  @include border-right(2px solid #000);}

Код скомпилируется в два разных файла CSS. Файл ltr:

/* LTR Styles */.elem {  display: flex;  margin-left: 10px;  border-right: 2px solid #000;}

Подробнее о стилизации RTL читайте в этом руководстве от вашего покорного слуги.

Я не всегда работаю с шаблонами

Одна из проблем Tailwind заключается в том, что, если у вас есть список карточек и вы хотите изменить определённый набор классов, вам придётся вручную просматривать их в редакторе кода. Это не будет проблемой, если вы используете в своём продукте частичные файлы CSS (partial) или компоненты. Вы можете один раз написать HTML, и любое изменение будет отражено везде, где используется этот компонент.

Это не всегда так. Я работаю над простыми страницами index.html, где усилия в разделении на части или компоненты себя не оправдывают. В этом случае работа с Tailwind и редактирование CSS могут стать процессом, чреватым ошибками, поскольку вы даже не можете использовать функцию "Найти и заменить": она может пропустить некоторые другие элементы на странице.

Tailwind делает веб-сайты похожими

Команда Tailwind создала набор продуманных компонентов под названием Tailwind UI, которые легко настраиваются и готовы к использованию в вашем проекте.

Внешний вид и функциональность компонентов приятные, и мне это нравится. Хотя есть проблемы, если сайт использует Tailwind UI, есть большая вероятность, что я предскажу использовать его.

Обычно, когда вы работа Tailwind UI, это означает, что у вас нет времени на создание индивидуального дизайна, поэтому вам нужно что-то, что можно быстро запустить, верно? И это хороший вариант применения, за исключением одной детали: применение Tailwind приведёт к тому, что многие сайты будут выглядеть похожими друг на друга, подобно тому, что было много лет назад с Bootstrap.

Некоторые свойства или особенности CSS использовать невозможно

К примеру, не включено свойство clip-path, и я полностью понимаю причину. Предположим, мы хотим включить его как компонент. Где мы должны написать код? Здесь:

<article class="block appearance-none bg-white placeholder-gray-600 border border-indigo-200 rounded w-full py-3></article>

Либо примерно так включить его в конфигурацию Tailwind:

// tailwind.config.jsmodule.exports = {  theme: {    clipPath: {      // Configure your clip-path values here    }  }};

Или же сделать следующее:

.card {  @apply block appearance-none bg-white placeholder-gray-600 border border-indigo-200 rounded w-full py-3;  clip-path: inset(20px 20px 50px 20px);}

Заключительные мысли

Может ли Tailwind оборачивать CSS в свои классы во время компиляции?

Представьте себе, что Tailwind появляется только во время компиляции. То есть вы пишете обычный CSS с именованием и всё такое, а умный компилятор преобразует ваш CSS в утилитарные классы. Это было бы воплощением мечты.

Утилитарные классы мощный инструмент, если не перестараться

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

Фронтенд довольно часто выбирают как точку входа в IT. Но фронтенд это не только внешнее оформление сайтов, но и работа с базами данных, а также внешними API. Фронтенд требует системной, комплексной подготовки. Если вам или вашим знакомым интересно это направление разработки можете присмотреться к нашему курсу о Frontend-разработке, где мы касаемся не только вышеупомянутых тем, но и разработки отзывчивых сайтов при помощи flexbox, работаем с методологией БЭМ и затрагиваем другие аспекты фронтенда.

Узнайте, как прокачаться и в других специальностях или освоить их с нуля:

• Профессия Data Scientist

• Профессия Data Analyst

• Курс по Data Engineering

Поддержка логических свойств CSS со временем становится лучше. Однако мне по-прежнему трудно запомнить их, когда использую их в проекте. Что означают start и end? Несколько сложно охватить все детали без проб и ошибок.

В этой статье я нацелен прокачать вас и пробежаться по использованию логических свойств, чтобы возникло твёрдое понимание, у дизайнеров, говорящих на английском и арабском языках. Я попытался придумать визуальное объяснение логических свойств, которое, надеюсь, будет понятным. Готовы? Погружаемся!

Вступление

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

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

.avatar {  margin-right: 1rem;}html[dir="rtl"] .avatar {  margin-right: 0;  margin-left: 1rem;}

Обратите внимание, что margin-rightв макете справа налево сброшено в 0, оно здесь не нужно. Представьте, что мы делаем это для большого проекта; кода слишком много. Но логические свойства решают проблему.

.avatar {  margin-inline-end: 1rem;}

Нам нужно только установить margin-inline-end, и свойство будет работать по-разному в зависимости от направления в HTML-документе. Мощно, правда?

Разница между inline и block

Используя логические свойства, вы обычно видите inline млм block. Давайте посмотрим, что они означают.

Смысл inlineи blockменяется исходя из режима письма. В языках вроде английского inlineнаправлен горизонтально, а block вертикально. В языках вроде японского всё наоборот: inlineнаправлено вертикально, block горизонтально.

Что означает inline?

В подобных английскому и арабскому языках inlineнаправлено горизонтально. В английском start указывает на левую (left) сторону в макетах слева направо (на английском языке) и он же указывает на правую (right) сторону в арабских макетах, которые справа налево. В макетах справа налево start указывает на правую сторону, end на левую.

В примере ниже круг имеет поле (margin) с правой стороны. В макетах справа налево поле должно быть слева. Запомните, что свойства start и end зависят от контекста направления макета:

Визуализация начала и конца

Начало и конец улицы

Чтобы прояснить, что же означают start и end, я покажу пример на картинке:

Мне нравится представлять это как начало и конец улицы. Когда направление слева направо, начало находится слева, а конец справа. Когда направление справа налево, всё наоборот.

Направление чтения

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

Какие свойства можно применять как логические?

Большую часть свойств CSS можно применять как логические. Вот основные из них:

• размеры: высота, ширина (height, width);

• margin, border, padding, их подвиды;

• обтекание (floating), позиционирование;

• выравнивание текста.

Я не могу перечислить все логические свойства здесь: их много. Пожалуйста, прочитайте весь список на MDN.

Примеры и применение

Первый пример

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

У нас есть компонент со следующими свойствами:

• left-padding и right-padding;

• рамка (border) с левой стороны;

• поле (margin) для иконки.

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

.card {  padding-left: 2.5rem;  padding-right: 1rem;  border-left: 6px solid blue;}.card__icon {  margin-right: 1rem;}

А так с макетом справа налево; направления должны быть отражены.

html[dir="rtl"] .card {  padding-right: 2.5rem;  padding-left: 1rem;  border-left: 0;  border-right: 6px solid blue;}html[dir="rtl"] .card__icon {  margin-right: 1rem;}

И снова много работы. Но мы можем минимизировать CSS-код, вот так:

.card {  padding-inline-start: 2.5rem;  padding-inline-end: 1rem;  border-inline-start: 6px solid blue;}.card__icon {  margin-inline-end: 1rem;}

Второй пример: выравнивание текста

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

В английском подобное выравнивается справа, в арабском слева. Это правило прекрасный кандидат, чтобы продемонстрировать логические свойства CSS.

.indicator {  text-align: end;}

Вот как мы описали бы изложенное выше без логических свойств:

.indicator {  text-align: right;}html[dir="rtl"] .indicator {  text-align: left;}

Третий пример: позиционирование

Когда какой-то элемент позиционируется абсолютно, мы должны уделить внимание свойствам right и left:

.menu__toggle {  position: absolute;  right: 1rem;  top: 1rem;}html[dir="rtl"] .menu__toggle {  right: auto;  left: 1rem;}

Мы можем сократить код выше при помощи свойства inset Его поддержка не идеальна, но за ним будущее. Свойство inset-inline-endв макетах слева направо эквивалент правой стороны, а в макетах справа налево эквивалент левой стороны для макетов справа налево.Код выше можно написать так:

.menu__toggle {  position: absolute;  inset-inline-end: 1rem;  top: 1rem;}

Кроме того, top может выступать как inset-block-start, но это не нужно в нашем случае: мы не работаем с японским или с веб-сайтом на восточном языке.

Пример 4: float

Вы можете удивиться применению float в 2021 году. Когда у нас есть фигура и мы хотим, чтобы текст её обтекал, без старого доброго свойства floatэто не будет работать. Вот, как мы можем воплотить идею:

img {  float: left;  shape-outside: circle(50%);  margin-right: 20px;}

Код работает в макетах слева направо, для направления справа налево код CSS будет вроде такого:

html[dir="rtl"] img {  float: right;  margin-right: 0;  margin-left: 20px;}

При помощи логических свойств код на CSS сокращается, вот так:

img {  float: inline-start;  shape-outside: circle(50%);  margin-inline-end: 20px;}

Намного проще, правда?

Логические по своей природе свойства

Grid и flexbox по умолчанию логические свойства. Это означает, что они отражают направление автоматически. При помощи этих свойств CSS-код сеток и компонентов для мультиязычных сайтов сокращается до минимума.

В следующем примере у нас grid-обёртка. Обратите внимание, что элементы упорядочены согласно направления.

Чего бы мне хотелось

Единственное моё желание на данный момент, чтобы свойство background-colorстало логическим.

Зачем? Чтобы добавить иконку как изображение фона так, чтобы она разворачивалась в зависимости от направления. К сожалению, свойства вроде background-position-inlineу нас нет. Вот, что я напишу сейчас.

.input {  background: url("mail.svg") left 0.5rem center/24px no-repeat;  padding-inline-start: 2.4rem;}html[dir="rtl"] {  background: url("icon.svg") right 0.5rem center/24px no-repeat;}

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

Узнайте, как прокачаться в других специальностях или освоить их с нуля:

• Профессия Data Scientist

• Профессия Data Analyst

• Курс по Data Engineering