Введение новых div'ов исключительно для группировки связанных классов css - PullRequest
Новая
       4

Введение новых div'ов исключительно для группировки связанных классов css

1 голос
/ 09 января 2020

При использовании https://tailwindcss.com/ мне часто случается так, что множество классов утилит попадают на один элемент. Это делает код немного нечитаемым, на мой взгляд. Пример: 

<div className="container m-auto pt-2 px-4 flex items-center justify-between md:block md:relative">
    ...
</div>

Является ли хорошей практикой ввод новых div в этом примере, чтобы просто сгруппировать связанные классы css и сделать код более читабельным? Например, как это: 

<div className="container m-auto pt-2 px-4 md:relative">
    <div className="flex items-center justify-between md:block">
        ...
    </div>
</div>

Создает ли дополнительные и, возможно, «ненужные» элементы в DOM значительную скорость / производительность / или другие проблемы?

1 Ответ

1 голос
/ 09 января 2020

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

Документация предоставляет несколько советов по извлечению компонентов - либо извлечение HTML компонентов, которые вы используете повторно, либо извлечение CSS компонентов. Извлечение CSS компонентов работает лучше всего для меня. Приведенный в документации пример .btn-blue является идеальным примером того, как я работал с Tailwind CSS, чтобы предотвратить использование 20 классов для повторно используемых элементов. 

<button class="btn-blue">
  Button
</button>

<style>
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
  @apply bg-blue-700;
}
</style>

В случае, если у вас есть один -off div, который нуждается в куче классов, я только что научился справляться с этим. Чтобы помочь некоторым элементам, имеющим много классов, я попытался создать собственную привычку группировать похожие классы. Например, я держу вместе все классы, связанные с margin, все классы, которые относятся к padding, et c. Таким образом, если я сканирую особенно длинный список классов на предмет чего-то, связанного с полем, если я вижу только mb-4, я знаю, что это будет единственный класс полей без необходимости заглядывать дальше.

Адам Уотан высказал дополнительные мысли о извлечении CSS компонентов. То, что он выражает, хорошо сработало для меня. Если на моем сайте будет один .hero, я бы не стал извлекать этот CSS в уникальный класс. Если бы мне понадобился класс .hero на каждой странице сайта, я бы создал компонент HTML или CSS.

Надеюсь, это поможет!

...