如何在CSS -尾风中对类进行分组

Question

我正在尝试对类进行分组，这样代码就会更加清晰和清晰。在Tailwind的文档中，它谈到了"@apply"，它可以用于这个目标，但我使用的是CDN，因此这不适用于我。所以我的问题是，，有什么形式我可以完成我想要的吗？，也许可以使用SASS/SCSS或更少？

下面是我所关注的一个例子：

<ul class="md:flex md:items-center z-[-1] md:z-auto md:static absolute bg-gray-800 w-full left-0 md:w-auto md:py-0 py-4 md:pr-0 pr-7 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-200">
  <li class="nav-element">
    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Home</a>
  </li>
  <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">About Us</a>
  </li>
  <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Services</a>
  </li>
  <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Contact Us</a>
  </li>
  <button class="md:w-auto w-full bg-transparent text-white font-[Poppins] duration-500 px-6 py-2 hover:bg-white hover:text-gray-800 border border-white border-dotted rounded-lg">
    Log In
  </button>
  <button class="md:w-auto w-full bg-yellow-500 text-white font-[Poppins] duration-500 px-6 py-2 md:mx-4 hover:bg-yellow-600 rounded-lg">
    Sign In
  </button>
</ul>

<ul class="nav-elemnts">
  <li class="nav-element">
    <a href="#" class="nav-link">Home</a>
  </li>
  <li class="nav-element">
    <a href="#" class="nav-link">About Us</a>
  </li>
  <li class="nav-element">
    <a href="#" class="nav-link">Services</a>
  </li>
  <li class="nav-element">
    <a href="#" class="nav-link">Contact Us</a>
  </li>
  <button class="button-login">
    Log In
  </button>
  <button class="button-signin">
    Sign In
  </button>
</ul>

Answer 1

顺风鼓励您使用组件。您应该使用允许您创建和使用组件的系统，而不是将类复制粘贴到各处。

因为你的问题仅仅是HTML + CSS，所以你没有正确的工具来解决这个问题。但是，如果您使用像JS、Python、PHP等脚本语言，您可以从元素中创建组件并重用它们。由于我熟悉React框架，所以我可以给出一个例子：

function NavElement(props) {
  return (
    <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
      <a href={props.href} class="text-x1 md:hover:text-yellow-300 duration-500">{props.children}</a>
    </li>
  )
}

然后用它作为

function NavElements() {
  return (
    <ul class="md:flex md:items-center z-[-1] md:z-auto md:static absolute bg-gray-800 w-full left-0 md:w-auto md:py-0 py-4 md:pr-0 pr-7 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-200">
      <NavElement href="/">Home</NavElement>
      <NavElement href="/services">Services</NavElement>
      <NavElement href="/about-us">About us</NavElement>
    </ul>
  )
}

正如您所看到的，通过这种方法，您可以将庞大的修饰符列表提取到一个小组件中，您可以在代码中多次使用这些修饰符，而不会有太多重复。

您可以自由选择任何工具、语言、系统来实现组件的制作。这就是泰尔风希望你做的事。

Answer 2

你试过做：

<style type="text/tailwindcss">
    @layer components {
      .some-class {
        @apply px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500;
      }
    }
</style>

Answer 3

我知道您要求SASS/更少类型的方法，但我认为这增加了您可能不需要的额外复杂性。我认为一些简单的JS将是一个很好的候选解决方案。

我所做的方法是用类名的JSON对象替换CSS或StyledComponents，并使用一个实用函数将它们转换为一个大字符串。

首先是实用程序。把它放在共享的地方：

// turns a JSON object's values into a single string (keys are irrelevant)

export const classify = (classes) => Object.values(classes).join(' ')

然后，在一个类似于styles.js的index.js旁边的文件中，我应该有：

import { classify } from 'shared/utils'

export const nav = classify({
  base: 'absolute bg-gray-800 w-full left-0 pr-7 pl-7 py-4 opacity-0 top-[-400px] z-[-1]',
  animation: 'transition-all ease-in duration-200',
  larger: 'md:flex md:items-center md:z-auto md:static md:w-auto md:py-0  md:pr-0 md:pl-0 md:opacity-100'
})

export const navItem = classify({
  base: 'px-4 py-6 hover:bg-yellow-500 text-white',
  resp: 'md:py-0 md:hover:bg-transparent',
  anim: 'duration-500'
})

这就像你的CSS文件。是的，您必须给变量命名，但也必须将组件命名为另一种方式，这样就可以减少文件的散乱。您还可以看到HTML结构而不是一堆组件名称(这些名称很可能只是div，smh)。此外，您可以在JSON中包含任意数量的键/值，但是您认为在维护的同时组织起来可以减少认知负荷。

然后，HTML/JSX：

import * as styles from './styles'

export default Component = (props) => (
  <ul className={styles.nav}>
    <li className={styles.navItem}> ... </li>
    <li className={styles.navItem}> ... </li>
    <li className={styles.navItem}> ... </li>
  </ul>
)

我喜欢这种方法的一点是，它非常类似于CSS工作流，JSON对象允许您以任何方式组织类名(理想情况下，不要嵌套类名，否则需要更复杂的classify())。使用组件时，您仍然有很长的字符串要处理，当您应用了数十个类时，这是很烦人的。您甚至可以在同一个文件中完成这些操作，如果您愿意的话，它只是JavaScript。

您甚至可以以这种方式创建实用程序样式/类，并将它们与模板字符串连接：

import * as utilStyles from 'utils/styles'
import * as styles from './styles'

<section className={`${utilStyles.shadowPanel} ${styles.mainSection}`>
...
</section>