Optimized Block Element Modifier (OBEM) with Hyphen-Separated Words

Introduction

Optimized Block Element Modifier (OBEM) with hyphen-separated words is an advanced variation of the Block Element Modifier (BEM) methodology, meticulously designed to create a structured and highly efficient CSS codebase. This approach uses hyphens ( - ) as separators in class names, empowering developers with a more organized and intuitive way to manage CSS styles.

Embracing Hyphen-Separated Words for Enhanced Structure and Efficiency

In this optimized OBEM variation, we use hyphens to separate words in class names, ensuring a clear and meaningful representation of the elements. The format is as follows:

.my_element {} /* Represents a block, a stand-alone, meaningful component. */
.my_element-children {} /* Represents a child element within the `my_element` block. */
.my_element-children--modifier {} /* Represents a modifier that alters the appearance or behavior of the `my_element-children` element. */

By adopting hyphen-separated words, our CSS class names become even more descriptive and well-structured, making it easier to understand the hierarchy of blocks, elements, and modifiers.

BEM's Syntax Agnostic Nature

It's essential to note that BEM, the Block Element Modifier methodology, is inherently syntax agnostic. While we have discussed the optimized OBEM with hyphen-separated words as an advanced variation, it's important to highlight that this custom BEM syntax, such as .my_element-children--modifier , remains perfectly valid.

Efficient Selection of Logical Entities

One significant advantage of using optimized OBEM with hyphen-separated words is the efficient selection of logical entities using keyboard shortcuts. On macOS, you can use Cmd + D ("Multi-Cursor" / "Multiple Selection") in code editors to quickly select all occurrences of a particular logical entity, such as a parent block, child element, or modifier.

For example, with Cmd + D , you can effortlessly select and modify all instances of a specific block ( my_element ), all child elements ( my_element-children ), or all occurrences of a particular modifier ( my_element-children--modifier ). This efficient selection drastically reduces development time and ensures consistent styling across the project.

Benefits

• Highly Efficient Codebase : Optimized OBEM with hyphen-separated words promotes a highly efficient and organized CSS codebase, enabling better performance and faster rendering.
• Maintainability : The descriptive class names improve maintainability, enabling developers to quickly identify and modify specific elements.
• Readability : Clear and meaningful class names enhance code readability, contributing to better collaboration and reduced errors.

Live Naming Demo (OBEM)

A tiny illustrative component showing .my_element , .my_element-children , and a modifier .my_element-children--modifier .

<div class="my_element">
  <h3 class="my_element-title">my_element (Block)</h3>
  <div class="my_element-children">
    <div class="my_element-children-item">item</div>
  </div>
  <div class="my_element-children my_element-children--modifier">
    <div class="my_element-children-item">item (modifier)</div>
  </div>
</div>

Conclusion

Optimized Block Element Modifier (OBEM) with hyphen-separated words offers a powerful and modern approach to writing structured CSS code. By embracing this variation, we elevate the maintainability and scalability of our projects while adhering to the core principles that make OBEM a reliable and effective methodology for managing CSS styles. Additionally, the efficient selection of logical entities using Cmd + D further enhances our development workflow and productivity, setting the stage for successful and streamlined CSS development.