BEM multiple button modifiers in Webflow

Design help General
1

Hey everyone!

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.

Example: .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:

  1. 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?
  2. I have to keep the dummy divs around so I can make global adjustments. Feels hacky.
  3. 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?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @raz important on BEM is to understand what is different between Element and Modifire. Here is simple example you can use for Buttons
B - .btn => global
M - .btn--success => color
M - .btn--large => size
M - .btn--outlined => style
E - .btn__text => inner text
EM - .btn__icon--spinner => inner icon (element with modifier)

But you do not need to use BEM just use something that make sense to you. :slight_smile:

3

Thanks @Stan.

Actually, I’m aware of how elements and modifiers work in BEM. Modifiers can be applied directly to a block, and multiple modifiers can be chained (as in my example above). In my particular case, I’m styling a Webflow button which cannot have children elements, so I can’t add elements even if I wanted to.

For clarity:

  • btn–outline modifies the outline and background appearance of the button.
  • btn–red modifies the outline and background appearance of the button.
  • btn–large modifies the padding of the button.
4

hi @raz so just stop using predefined button and create one from scratch. The only problem is that WF doesn’t allow to set element semantically with tag button and that is no good for accessibility but you have no other option. Actually you have one option by using an embed but IMO this is total overkill just for creating semantically correct button.