Modifiers

The M in BEM stands for modifier. In BEM two underscores (__) are used as a modifier separator. In Suit it is a double dash. On the left side of the — you have a single component CSS class name or a CSS descending list. Such as MainMenu-NavItem-A or MainMenu. On the right you have a modifier name, which is lower case with a dash separator. For example the name theme-dark.

The modifier may be global with no descending list on the left, just something like px-3 that can be used on any block to set the x border. In Suit they also have a dot separator to indicate that the CSS indicates state. You could have NavItem-A.isActive to set the colors of the NavItem A part when active.

The SuitBaseComponent class has a ChildCssClass function for adding class names to the child components. In MainMenu, on the NavItem

the result will be:

If we have @ChildCss(-.isActive)

the result is:

If the class name starts with a . or - then the name will be expanded on the left side. A single dot or dash causes the tag name of the item being rendered to be added to the name. If the name starts with two characters -. or — then the name of the current rendering class, in this case MainMenu is also added. The result is MainMenu-NavItem.isActive.

If you have

the result is:

If you had used two dashes —red-style the result would be

IIf you have [A]—red-style the result will be applied to the a part:

This may not be what you wanted.

If you have [A]--+red-style, two dashes and a plus sign

the result is

The plus sign adds the part name.

As you can see both sides have a single dash separator. The descending names, on the left indicates on what statements the class can to be applied to.

You might ask, what about a descending names list with more than 3 levels? The answer is don’t create any. No component should have more than 3 levels. Break it up into more components.

CSS Naming Part-3

Modifiers