Применение эффекта сразу к нескольким псевдоклассам при попутном ветре

Я ищу хорошее сокращение, чтобы применить один и тот же эффект к нескольким псевдоклассам в попутном ветре.

Например, я могу захотеть применить синий фон к состояниям :hover и :focus в div.

В настоящее время мне пришлось бы написать следующее:

<div className = "hover:bg-blue focus:bg-blue>Text<div>

ИЛИ, я мог бы использовать apply для создания пользовательского класса, подобного этому:

.hover-focus-bg-blue {
  @apply hover:bg-blue focus:bg-blue
}

Но ни один из этих вариантов не является отличным вариантом, когда мне нужно применять сложные состояния (в моем текущем проекте мне нужно охватить 11 состояний для одного элемента (отдых/наведение/активность/фокус/фокус-видимый/фокус-видимый && наведение и т. д.).

Метод применения сохраняет код только в том случае, если он используется несколько раз.

То, что я хотел бы видеть, это что-то вроде:

<div className = "[hover, focus]:bg-blue">Text</div>

Кто-нибудь знает такой синтаксис? Нигде не могу найти.

Я знаю, что это не работает с псевдоселекторами, и я почти уверен, что здесь применима та же логика. Читайте здесь: stackoverflow.com/questions/74166688/…

ChenBr 15.11.2022 14:59

Это здорово - спасибо, вставьте это как ответ на вопросы, и я отмечу это правильно. Ваше здоровье!

PeteG 15.11.2022 15:58
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
2
2
147
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Это вопрос, который задают часто. В основном речь идет о группировке классов в один сгруппированный синтаксис (например, hover:(bg-red-500 border-2).

Это ответ, который я получил после поиска решения этого вопроса. Короче говоря, этого функционала пока нет. Несмотря на то, что этот ответ относится к группировке утилит в один селектор, та же логика должна применяться к группировке псевдоселекторов:

В какой-то момент разработчики Tailwind рассмотрели эту функцию, но в конечном итоге решили пока отложить ее. Смотрите эту тему в Твиттере: https://twitter.com/adamwathan/status/1461519820411789314

Итак, как вы можете видеть из ответа и ленты в Твиттере, в настоящее время он приостановлен. В ветке Twitter разработчики тестировали эту функцию на предмет производительности, и похоже, что эта функция в своем текущем состоянии дублирует CSS по сравнению с использованием отдельных утилит:

Поэтому мы провели тест, в котором преобразовали каждый отдельный шаблон пользовательского интерфейса Tailwind (более 500 файлов) для использования сгруппированного синтаксиса, чтобы увидеть, сколько пропускной способности сэкономит вам группировка пропускной способности при обслуживании HTML.

Это имеет смысл, если подумать, потому что использование сгруппированного синтаксиса (например, focus:(font-bold,underline)) приводит к меньшему количеству повторяющихся символов в документе, потому что теперь есть больше уникальных имен классов.

Используя негрупповой синтаксис, каждый экземпляр focus:font-bold можно сжать и заменить коротким заполнителем (например, %). Используя групповой синтаксис, focus:font-bold и focus:(font-bold,underline) нельзя сжать, потому что они больше не совпадают. Поворот сюжета: после сжатия файлы становятся больше, а не меньше!

Нижняя линия:

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

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

Я думаю, что вопрос сформулирован немного иначе, чем вы ответили. Человек спрашивает, как добавить несколько псевдоселекторов в один стиль, а не наоборот. В любом случае, я не думаю, что эта функция существует.

sayandcode 18.01.2023 08:36

Обновлено: эти функции бесполезны, потому что ваш сайт будет запущен еще до того, как эти функции запустятся. Оставьте их здесь на случай, если вы сможете использовать их, если не используете vite.

Недавно я дал ответ на другой вопрос о группировке классов здесь, но ваш вопрос немного отличается, поэтому вот улучшенная версия предыдущей функции:

const pseudoJoin = (selectors, str) => {
  let result = "";
  selectors.forEach(selector=> result+=selector+":"+str.split(" ").join(" "+selector+":")+" ")
  return result;
}

Теперь вы можете вызывать его где угодно, например:

<div className=`${pseudoJoin(['hover','focus'],"classes you want on hover & focus")} some more classes here ${pseudoJoin(['focus'],"classes when focused")}`>Hello World!</div>

Или когда вы используете фреймворк classnames:

<div className = { classnames(
   pseudoJoin(['hover','focused'], "classes you want on hover & focused"),
   "Other classes here",
   pseudoJoin(['focused'], "classes when focused")
)}>Hello World!</div>

Чтобы сделать его еще короче, вы можете заменить pseudoJoin на более короткое имя, потому что я не мог придумать лучшего имени.

Мой предыдущий ответ был легкой и быстрой функцией, но этот не фокусируется на производительности, а скорее объясняет простоту.

const pseudoJoin = (str) => {
  let result= [];
  let storedvar;
  str=str.split(" ");

  str.forEach(function(s,i){
      if ((/\:\(/).test(s)) storedvar=i;
      if (!storedvar) result.push(s);
      if (s.endsWith(")")){
          result.push(str.slice(storedvar,i+1).join(" "))
          storedvar=null;
      }
  })
  
  str=[]
  result.forEach(function(s,i){
    if ((/\w\:/).test(s)){
      storedvar = s.split(/\:(.*)/s);
      
      if (s.endsWith(")")){
        storedvar[1].slice(1,-1).split(" ").forEach(function(t){
          storedvar[0].split("+").forEach(function(x){str.push(x+":"+t)})
        })
      } else {
        storedvar[0].split("+").forEach(function(x){
          str.push(x+":"+storedvar[1])
        })
      }
    } else {
      str.push(s)
    }
  })
  return str.join(" ");
}

Вот пример использования новой функции:

pseudoJoin("hover:text-black hover+focus+active:(bg-white margin-[3.2rem] underline) before+after:content-[Hello_\+_I_am_groot] sm:hidden"));


Другие вопросы по теме