- The file is big
- The file might look unmaintainable:
- You have to update the class map & the enum (spoiler: TypeScript will ensure this is in sync)
- There is a lot of duplicate code (the classNames per variant are almost the same except for the color)
- You know the exact states your component can be in
- There is no cleverness / dynamic classes going on -> More maintable
- There is no
className
prop, this means that we know what states / variants our component can be in, we don't introduce new implicit states (a large badge if we addclassName="text-xl"
) - If one of the values need an extra class, you can add it, no need for clever tricks. (E.g.: Let's say a yellow color needs a darker text color)
- PurgeCSS can easily remove non-used css classes
Here is a bad example: https://gist.github.com/RobinMalfait/7cf7a0498039027a1d591f5f2b908a95
In case someone stumbles over this again:
Is there anything wrong with using doing it like this, now that we have
satisfies
?