Пользовательские стили или создание общего компонента

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

Чтобы уменьшить это дублирование стилей, я думаю, у нас есть два варианта:

1. Использовать собственные стили в Tailwind
2. Создать компонент текстового поля, которому передаются название, id и т. д. для использования и который содержит стили

Мой вопрос: разбивка текстовых полей на компонент – это слишком мелко? Я предвижу, что со временем все может стать более сложным, например, поддержка опций показа/скрытия пароля, масок ввода и т. д., и этот компонент может стать очень тяжелым.

Я склоняюсь к тому, что ответ – это собственные стили в Tailwind, но мне хотелось бы узнать мнение других людей.

Заранее спасибо.

Вы можете делать все, что хотите, в next.js, и имейте в виду, что «каждый ответ, который вы получите, является личным советом от других разработчиков, и он может быть совершенно необязательным».

Для меня:

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

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

• Я люблю Tailwind. Это отличный инструмент для создания пользовательского интерфейса. Но сейчас я не использую его напрямую. Потому что вам нужно добавлять классы повсюду! Я предпочитаю использовать мощный UI-фреймворк. Например, на мой взгляд, Chakra UI – это полностью настраиваемый, мощный и простой инструмент, с которым я могу работать. Это так просто и делает мой проект компактным. Вам не нужно добавлять классы Tailwind в ваш компонент, вам просто нужно вызвать необходимый компонент, настроить его в конфигурации – и готово! Вы можете изменить все, что хотите, в компонентах Chakra.

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

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

Если вам нужно повторно использовать некоторые стили в нескольких файлах, лучшая стратегия – создать компонент, если вы используете фронтенд-фреймворк, такой как React, Svelte или Vue, или шаблонный фрагмент, если вы используете язык шаблонов, такой как Blade, ERB, Twig или Nunjucks.

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

Вы можете обернуть <input />, чтобы просто добавить стандартные стили и сохранить остальную часть ввода без изменений. Таким образом, ваш компонент может быть изменен на самом тонком уровне.

import { DetailedHTMLProps, InputHTMLAttributes } from "react";

export default function MyStylizedInput({className, ...props}: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) {
  return <input {...props} className={`bg-transparent ${className}`} />
}