Сэкономьте себе немного времени
Поскольку я в основном использую Tailwind в своих проектах React, я не могу назвать вам лучшего рецепта для создания пользовательского интерфейса, чем использование шикарного Tailwind CSS, стилизованного под JSX.
Но давайте будем честны с собой, нам не нужно писать так много Tailwind, как мы могли бы написать. Я использую Tailwind и React не более пяти месяцев, поэтому я просто учусь на ходу.
Я обнаружил, что начальная настройка проекта сэкономит вам много времени и стресса в дальнейшем. Инициализация таких вещей, как Prettier, ESLint и Postcss перед созданием любой части пользовательского интерфейса — это то, что нужно.
Следование руководству по стилю
Недавно мне назначили оценку кодирования (как интересно). Оценка кодирования заключалась в том, чтобы посмотреть на макет простой целевой страницы и создать ее. Также было предоставлено руководство по стилю, которому нужно было следовать.
Вот руководство:
Это руководство было достаточно простым, и в тот момент я понял, насколько важно внедрить это руководство по стилю в свой код.
Кодирование руководства по стилю
Создайте файл globals.css в вашей директории. Я часто располагаю его в файле ‘src’ в разделе styles (/src/styles/globals.css). Давайте начнем кодировать.
Во-первых, мы видим желаемые цвета акцентов и текста, которые должны быть использованы. Мы зададим их с помощью пользовательских переменных CSS. Я определил их в ‘:root’, чтобы к ним можно было обращаться глобально, а также в самом файле globals.css.
:root {
--color-fore-reddish: #ee2d1c;
--color-fore-blackish: #4c4c51;
--color-fore-blueish: #88939e;
}
Мы можем использовать эти корневые переменные в нашем JSX, а также в нашей кодированной системе дизайна.
Прежде чем мы создадим пользовательские классы для таких вещей, как кнопки и горизонтали, давайте определим стили для всех собственных элементов HTML.
@layer base {
html {
scroll-behavior: smooth;
}
body {
padding: 0;
margin: 0;
}
/* Base styles following our design system */
h1 {
@apply text-[48px] leading-[48px] text-white;
}
h2 {
@apply text-[36px] leading-[36px] text-blackish;
}
h3 {
@apply text-[22px] leading-[28px] text-reddish;
}
p {
@apply text-[22px] leading-[28px] text-blackish;
}
a {
@apply text-[22px] leading-[28px] text-blueish hover:text-blackish cursor-pointer transition;
}
}
В Tailwind CSS есть три основных «ведра», в которые можно добавить слой.
@layer components — используется для стилизации целых компонентов, таких как «Nav» или «cta-btn».
@layer utilities — это универсальные классы, которые присутствуют везде в вашем коде, например «flex-col» «opac-half».
@layer base — базовый слой наших стилей, «h1», «h2», «p».
При написании фактических стилей в нашей таблице стилей globals.css мы просто используем ‘@apply’, чтобы начать писать стили с помощью Tailwind.
/* Input */
h1 {
@apply text-[48px] leading-[48px] text-white;
}
h2 {
@apply text-[36px] leading-[36px] text-blackish;
}
/* Output */
h1 {
font-size: 48px;
line-height: 48px;
color: rgb(255 255 255);
}
h2 {
font-size: 36px;
line-height: 36px;
color: rgb(76 76 81);
}
Теперь давайте закончим кодирование этого руководства по стилям, определив классы компонентов и утилит.
@layer components {
.cta-btn {
@apply bg-reddish text-[22px] text-white py-3 px-8 rounded-full hover:opacity-70 transition whitespace-nowrap;
}
}
@layer utilities {
.accent-gradient {
@apply bg-gradient-to-b from-[#ee2e1d] to-[#ffb1b5];
}
.horizontal {
@apply border-b border-b-[#e8e8e8];
}
.horizontal-top {
@apply border-t border-b-[#e8e8e8];
}
}
Нахождение хорошего баланса
В зависимости от того, насколько велик ваш проект и насколько масштабируемым он должен быть, найти золотую середину для кодирования системы дизайна очень важно. Хотя вы хотите настроить свой проект с учетом масштабируемости, вы не хотите переборщить и лишить Tailwind преимуществ работы по требованию.
Также важно учитывать глубину системы проектирования (ссылки) и сложность вашего проекта. Возможно, у вас довольно простой блог, и вам нужно всего один или два макета для достижения желаемого дизайна. Тогда у вас не возникнет проблем с настройкой классов компонентов и утилит в вашей кодированной системе проектирования.
Хотя наша цель — сократить избыточность, не забывайте, как это мучительно — перебирать несколько компонентов и многократно менять одни и те же стили.
Находясь на пути к тому, чтобы каждый день становиться лучшим программистом, дизайнером и писателем, я постоянно нахожу способы быть более эффективным. Давайте продолжим разговор на LinkedIn и Twitter. Вы также можете посетить мой сайт stefankudla.com.
Счастливого кодирования и творчества!