Директива попутного ветра @apply против простого CSS при извлечении компонентов - PullRequest
Новая
       45

Директива попутного ветра @apply против простого CSS при извлечении компонентов

0 голосов
/ 03 мая 2020

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

В настоящее время у нас есть свои CSS стили для часто используемых элементов, использующих SASS. Например, для кнопки у нас есть базовый класс "btn", и мы можем применять различные варианты, используя SASS "& -blue", к слою в стиле btn-blue, et c. В целом, это сработало хорошо, но проблема (и почему мы свернули с попутным ветром) заключалась в том, что вы не можете учитывать каждую вещь в классах, и большая часть нашего пользовательского интерфейса указывает c на компонент. В этом контексте попутный ветер был абсолютной радостью, когда ему не нужно было писать «стиль: бла-бла» или слишком усердно думать о том, как назвать класс или что характерно для определенных классов. они упоминают извлечение компонентов, и я пытаюсь понять, чем это отличается от того, что мы делаем сейчас. На самом деле, нам кажется более обременительным в этом отношении воссоздавать каждый базовый класс, который у нас уже есть, как @apply bg-white, et c. Разве можно просто делать то, что мы делаем для базовых / общих классов, которые, как мы ЗНАЕМ, являются общими для всего приложения, а затем просто использовать попутный ветер, чтобы посыпать некоторые дополнения или создать больше пользовательских сценариев использования? Чего мне не хватает, если я не переключаюсь на @apply, чего не могу сделать в SASS?

Большое спасибо!

1 Ответ

1 голос
/ 03 мая 2020

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

Ваш "btn" является прекрасным примером того, почему @apply и извлечение компонентов могут быть полезны. Если ваша кнопка имеет для отл. 10 попутных ветров и повторение их каждый раз в макете - плохая практика. Когда вы распакуете его в .btn, его будет легко использовать.

Но вы спросили, какой смысл делать это вместо стандартного CSS / S CSS. Это вещь со всеми фреймворками. Зачем вам включать фреймворк и при этом использовать простой код, если фреймворк может сделать его короче и чище?

Вместо: 

.btn {
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: .25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;

  &.btn-blue {
    background: #2b6cb0;
  }
}

У вас есть только: 

.btn {
  @apply text-white text-lg font-bold py-2 px-4 rounded;

  &.btn-blue {
    @apply bg-blue-500;
  }
}

Или, если у вас есть синяя кнопка в одном месте, сделайте ее простой и: 

.btn {
  @apply text-white text-lg font-bold py-2 px-4 rounded;
}

И в кнопке: 

<button class="btn bg-blue-500">

Tailwind не предназначен для использования только с классом inline = "ххх гггзззз". Если вы просто придерживаетесь этого, код в конечном итоге станет действительно грязным. Вот почему есть возможность использовать @apply или в некоторых случаях theme ().

...