Why this is bad (you might think)
- 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)
Why this is good
- You know the exact states your component can be in
- There is no cleverness / dynamic classes going on -> More maintable
- There is no
classNameprop, 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 add
- 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
Thanks for sharing your method @crimelabs786 . I'm fairly new to TS so this part was unclear to me:
I still had to manually update 2 places with the method you shared (i.e.
variantMaps). Just recently though I came across this awesome article by Kent Dodds on constrained identity functions. Have started using the CIF pattern instead.
With the CIF pattern, I now only need to update one place instead.