• #32681

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

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


    Hi Anurag,


    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.


    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.


    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.



    A block represents a high-level component (e.g. .car)
    An element represents a descendant of a component (e.g. .car__door)
    A modifier represents a particular state or variant of a block or element (e.g. .car__door_red)


Viewing 3 posts - 1 through 3 (of 3 total)

Please to reply to this topic.


We're not around right now. But you can send us an email and we'll get back to you, asap.


About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2019 Forcetalks. All Right Reserved.

Log in with your credentials


Forgot your details?