https://github.com/autruonggiang/learn-bem

https://github.com/autruonggiang/learn-bem

bem bem-css css css-bem f8 html

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/autruonggiang/learn-bem
• Owner: autruonggiang
• License: mit
• Created: 2024-02-02T03:17:29.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-02-13T13:56:54.000Z (11 months ago)
• Last Synced: 2024-05-29T17:21:24.536Z (7 months ago)
• Topics: bem, bem-css, css, css-bem, f8, html
• Language: HTML
• Homepage:
• Size: 469 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# BEM

- The naming standard for writing CSS.

## Meaning:

- Abbreviation for: Block Element Modifier.

    + Block: Container.

    + Element: Component within the container.

    + Modifier: Adds meaning to a Block or Element.

## Why use BEM?

- Consistency in naming conventions.

- Avoids conflicts when multiple developers work on the same project.

- Prevents CSS styles from being overridden by others.

## Syntax

- .block

- .block__element

- .block--modifier

- .block__element--modifier

## Applications

- Building website layouts.

- Constructing components on a website.

## Advantages

- Clear and consistent naming.

- Easy reusability of code.

- Facilitates collaboration within a team.

- Encourages a modular approach, reducing the risk of style conflicts.

## Disadvantages

- Longer class names.

- Some find it visually unappealing.

## When is BEM suitable?

- Large projects with multiple team members.

- Projects with numerous pages or a high number of interface components.

## Practical examples

- Creating a button.

    + Enabled: Pointer, hover effect.

    + Disabled: Arrow, no effect.

- Designing a message.

- Developing a component for a website.

## Nested Blocks in BEM

In cases where a Block contains another Block:

- The child Block serves as a shared component.

- The child Block contains multiple elements.

## References

- https://codepen.io/ng-ngc-sn-the-bashful/pen/VwKXNyK

- https://codepen.io/ng-ngc-sn-the-bashful/pen/Exgmxqp

- https://getbem.com/introduction/

- https://dev.to/arshadayvid/write-structured-css-using-bem-syntax-16gd

- https://www.geeksforgeeks.org/understanding-the-css-bem-convention/