Скачать или смотреть Understanding BEM: Are Spans Inside an H1 Block Elements or Modifiers?

Delve into BEM methodologies to clarify whether spans in an H1 block are considered elements or modifiers, and discover the correct way to name classes.
---
This video is based on the question https://stackoverflow.com/q/68186126/ asked by the user 'Mostafizur Rahman' ( https://stackoverflow.com/u/16270293/ ) and on the answer https://stackoverflow.com/a/68464783/ provided by the user 'LongHike' ( https://stackoverflow.com/u/716568/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: In BEM, are spans inside h1 block considered as elements or modifiers?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding BEM: Are Spans Inside an H1 Block Elements or Modifiers?

When it comes to structuring our frontend code, methodologies like BEM (Block, Element, Modifier) provide a framework to maintain clear and understandable relationships between CSS classes and HTML elements. One common question developers might face is: are spans inside an H1 block considered as elements or modifiers? Let’s dive into this perplexing scenario to uncover the answer.

The BEM Methodology Overview

First, let’s briefly recap what BEM is all about:

Block: Represents a standalone component that is meaningful on its own (e.g., heading).

Element: Is a part of a block and has no standalone meaning (e.g., heading__main, heading__sub).

Modifier: Is a flag on a block or element that changes its appearance or behavior (e.g., heading--main).

Understanding these definitions is crucial as it sets the stage for our discussion about the h1 block and its spans.

Analyzing the Code Examples

Let’s take a look at the two code snippets presented in the introduction:

Code Example 1

[[See Video to Reveal this Text or Code Snippet]]

Code Example 2

[[See Video to Reveal this Text or Code Snippet]]

Examining the Code

From a BEM point of view, the main concern isn’t about the semantic nature of the HTML elements. Instead, it’s about how these elements relate to each other in terms of their CSS classes.

Focusing on Code Example 1

The first code example is accurate because it correctly identifies the span elements as parts of the h1 block.

The spans, with classes heading__main and heading__sub, function as elements of the heading block.

Understanding Code Example 2

The second code example is misleading because it treats the spans as if they were modifiers of the heading block.

When you apply heading--main to a span, you suggest that the span is modifying the block itself, which is incorrect in this context.

The Principle of Modifiers in BEM

According to the BEM methodology, a modifier should always be directly associated with its block. This means that if you want to modify the heading block, the modifier class (like heading--main) should only be applied to the h1 tag that has the heading block class. Applying it to the spans violates the principle of BEM.

Conclusion and Recommendations

To sum it all up, the spans inside an h1 block are considered elements rather than modifiers in the BEM lexicon. As such, it is essential to use the correct naming convention:

Use underscores for elements: heading__main and heading__sub.

Use dashes exclusively for modifiers applied to the block itself: like heading--main used directly with h1 tag.

By sticking to these conventions, your code will remain organized, clear, and in line with BEM practices. So, when implementing BEM, always ensure you are correctly identifying blocks, elements, and modifiers to maintain the integrity of your codebase.