close

Filter

loading table of contents...

Studio Developer Manual / Version 2301

Table Of Contents

9.16.5 Usage of BEM and Spacing Plugins

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>

Example 9.63. BEM Example HTML Code


The corresponding SCSS file would look like this:

.bem-block {

  color: white;

  &__item {
    margin-bottom: 10px;
  }

  &--error {
    color: red;
  }
}

Example 9.64. BEM Example SCSS Code


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",
    })
  ],
})

Example 9.65. Usage of the BEM Plugin


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",
      }),
    })
  ]
})

Example 9.66. Using BEM Plugin with Element


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",
      }),
    })
  ]
})

Example 9.67. Usage of the BEM Mixin


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,
    }),
  ],
})

Example 9.68. VerticalSpacing Plugin Example


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.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.