What is a block, an element and a modifier in SLDS?

Hi Anurag,

Block:

A block represents the main component name. If you were building a house component, the class name would be .house. All of the properties you want included for all houses would be included in the base .house class.

Element:

An element represents a part of a component and is separated by two underscores. The door of the house would be represented by the class.house__door. A window would be .house__window.

Modifier:

A modifier is a component or element variation and is separated by a single underscore. The variation can apply to the overall component or it can be applied to an element within the component.

Since the properties that should apply to every house are placed on the main .house class, all houses receive the.house class as the base. If there is a variation of a house — perhaps it is gray — the .house_gray class would be added to the component in addition to the .house class.

If the house has a pink door, a variation can be placed on the door element itself — .house__door_pink.