I’m working on implementing a design for a client. The design calls for the following:
- 3 button colors
- 3 button types (solid, outlined, text)
- 3 button sizes (large, medium, small)
I’m using BEM, and I’m not sure if I’m using the best approach.
My initial implementation used combo classes, but this got out of hand quickly.
.button .button--outline .button--red .button--large
With this approach, if I want to update the .button–large padding across all colors and styles, I need to update it in 9 different combo classes. It’s not SO bad right now, but the design will expand in the future to include more colors.
My current approach uses a single base class for my button for font, letter spacing, border-radius, and transitions. I then created the global classes (using dummy divs) and added the classes to my buttons. With this setup, I can adjust the global classes on the divs, and everything updates nicely. You can see the current implementation in the link below.
What I don’t like about the current setup:
- I had to combine the button type and color in a single class (e.g., button–outline-red). I couldn’t figure out a better way to do it. Maybe somebody has a better idea?
- I have to keep the dummy divs around so I can make global adjustments. Feels hacky.
- If I rename the global classes in the dummy, the classes applied to the buttons loose their styling because their names don’t update.
I’m wondering if there’s a better way to go about this. Any gurus out there who have tackled something similar in Webflow?