Block Element Modifier (BEM) is a methodology that helps to write neat, reusable CSS classes. Components usually consist of a block and multiple elements inside this block. To apply styles to a component you simply add a CSS class to the block. BEM also requires you to add classes to the elements to make sure styles apply even if the DOM changes. Modifiers can be used to describe a special mutation of a block. Learn more about BEM at https://en.bem.info. A typical BEM pattern looks like this:

<div class="bem-block">
  <div class="bem-block__item">...</div>
  <div class="bem-block__item">...</div>
  <div class="bem-block__item">...</div>
</div>

<div class="bem-block bem-block--error">
  <div class="bem-block__item">...</div>
  <div class="bem-block__item">...</div>
</div>

The corresponding SCSS file would look like this:

.bem-block {

  color: white;

  &__item {
    margin-bottom: 10px;
  }

  &--error {
    color: red;
  }
}

The easiest way to apply all those CSS classes correctly is to use the BEMPlugin. To learn how to use Plugins, see Section 9.3, “Studio Plugins”. You will have to apply the plugin to the container and all items will automatically be provided with the correct CSS classes. The Plugin even takes care of items that are added later on.

Config(Container, {
  items: [
    // ...
  ],
  plugins: [
    Config(BemPlugin, {
      block: "bem-block",
      defaultElement: "item",
      modifier: "error",
    })
  ],
})

BEM-Element classes can be applied by using the bemElement configuration provided by BEMMixin as long as the one of its parent containers utilizes a corresponding BEMPlugin:

Config(Container, {
  plugins: [
    Config(BEMPlugin, {
      block: "bem-block",
    }),
  ],
  items: [
    Config(Button, {
      itemId: "my-button",
      ...Config<BEMMixin>({
        bemElement: "my-button",
      }),
    })
  ]
})

The previous example adds the .bem-block__my-button CSS class to the button component. If the configuration of the BEMMixin is the only configuration that should be provided to the Button (for example, if you also want to omit the itemId in the previous example) you also need to cast the inner config to Button as otherwise the TypeScript compiler assumes that it must be an error:

Config(Container, {
  plugins: [
    Config(BEMPlugin, {
      block: "bem-block",
    }),
  ],
  items: [
    Config(Button, {
      ...Config<Button & BEMMixin>({
        bemElement: "my-button",
      }),
    })
  ]
})

If you want to add space between items of a container you can use the HorizontalSpacingPlugin or VerticalSpacingPlugin, which internally make use of the BEMPlugin and its default Element parameter.

Config(Container, {
  items: [
    // ...
  ],
  plugins: [
    Config(VerticalSpacingPlugin, {
      modifier: SpacingBEMEntities.VERTICAL_SPACING_MODIFIER_200,
    }),
  ],
})

The default spacing between items in a container that uses VerticalSpacingPlugin or HorizontalSpacingPlugin is small. By using a modifier, this spacing can be adjusted. You can also enhance the plugin by passing other strings as the modifier parameter, but you will obviously have to write own styles for the resulting CSS classes. Please inspect the constants exposed by the corresponding plugins to find possible modifiers.