Kyle Dharam

Block:

• sc-d7ec01c7: The main component.

Elements:

• sc-d7ec01c7-3: A part of the block (contains an SVG).
• sc-d7ec01c7-4: Another part of the block.
• sc-735e4804-0: Nested inside sc-d7ec01c7-3.
• svg: The SVG tag within sc-d7ec01c7-3.
• itfIsL: A class applied to the SVG.

Modifiers:

• ezDEfB: Modifies sc-d7ec01c7-3.
• dqXliV: Modifies sc-d7ec01c7-4.

Example Code:

html<div class="sc-d7ec01c7">
    <div class="sc-d7ec01c7-3 ezDEfB">
        <svg class="sc-735e4804-0 itfIsL"></svg>
    </div>
    <div class="sc-d7ec01c7-4 dqXliV"></div>
</div>

Key Points:

• Block: sc-d7ec01c7
• Elements: sc-d7ec01c7-3, sc-d7ec01c7-4, etc.
• Modifiers: ezDEfB, dqXliV

Inherited Properties:

1. color: Inherited because it’s related to text styling.
2. font-family: Inherited for consistent typography.

Non-Inherited Properties:

1. background: Not inherited, as backgrounds differ by element.
2. margin: Not inherited because spacing varies.

---

Inline, Block, and Inline-Block:

• Inline: Stays on the same line, no width/height.
• Block: Takes full width, starts on a new line.
• Inline-block: Stays on the same line, allows width/height.

Why Use inline-block:

Used for elements that need to align horizontally but also have size control, like buttons or cards.