Research BEM - Block, Element, Modifier - Architercture

  • What is BEM?:

    • BEM is a popular naming convention used in CSS to organize code in a modular and reusable way.

    • It stands for:

      • Block: A standalone entity like a button or menu (.button).

      • Element: A part of the block that has a specific function (.button__icon).

      • Modifier: A variation of the block or element (.button--primary).

  • Advantages of BEM:

    • Improves code readability.

    • Encourages modularity, making it easy to manage large projects.

    • Helps avoid CSS conflicts.

  • Practice:

    • Create an HTML structure using BEM naming conventions and write CSS to style it.

  • Document Your Work:

    • Write about your findings and examples on Hashnode.com or Medium.com.

    • include code snippets

    • include screenshot

    • repo

Updated on
Research CSS
Research OOCSS - Object-Oriented CSS