个人写码感悟：TailwindCSS不要忽视子选择器

前段时间刷小红书看到这样一个贴子，其中作者配了这样一张图：

感觉很受启发，有时候自己嫌麻烦会在子组件上重复复制粘贴很多遍相同的样式代码，实际在其父组件中通过子选择器就可避免代码冗余的情况，刷过之后留了个印象。

今天在使用shadcn/ui的tabs组件时，我为了设置每个tab再悬浮时光标手势为pointer，未激活时字体为白色，背景为灰色，悬浮背景为浅灰色；激活时字体为黑色，背景为白色，悬浮背景不变色，我忽然想起了这个贴子，便想实际操作一下。

按照以往的写码习惯这些样式的编写会是下面这样：

<TabsList className="flex-none w-full bg-gray-800 border-b border-gray-700 rounded-none h-auto">
    {CheckComponent && (
        <TabsTrigger
            value="check"
            className="flex-1 cursor-pointer text-white hover:bg-gray-700 data-[state=active]:text-black data-[state=active]:hover:bg-transparent"
        >
            Check
        </TabsTrigger>
    )}
    {CreateComponent && (
        <TabsTrigger
            value="create"
            className="flex-1 cursor-pointer text-white hover:bg-gray-700 data-[state=active]:text-black data-[state=active]:hover:bg-transparent"
        >
            Create
        </TabsTrigger>
    )}
    {EditComponent && (
        <TabsTrigger
            value="edit"
            className="flex-1 cursor-pointer text-white hover:bg-gray-700 data-[state=active]:text-black data-[state=active]:hover:bg-transparent"
        >
            Edit
        </TabsTrigger>
    )}
</TabsList>

而利用子选择器思路则是直接在每个TabsTrigger的父组件上用父级规则批量设置子组件样式：

<TabsList className="flex-none w-full bg-gray-800 border-b border-gray-700 rounded-none h-auto 
    [&_button]:cursor-pointer 
    [&_button]:text-white 
    [&_button:not([data-state=active])]:hover:bg-gray-700 
    [&_button[data-state=active]]:text-black"
>
    {CheckComponent && (
        <TabsTrigger value="check" className="flex-1">
            Check
        </TabsTrigger>
    )}
    {CreateComponent && (
        <TabsTrigger value="create" className="flex-1">
            Create
        </TabsTrigger>
    )}
    {EditComponent && (
        <TabsTrigger value="edit" className="flex-1">
            Edit
        </TabsTrigger>
    )}
</TabsList>

这样做的优点在于方便后期做整体样式调整，而无需对每个TabsTrigger做一对一的修改，有效避免代码冗余，降低维护难度。