Can BEM be Used Without the 'Element' Modifier?

Despite my experience with CSS and its pre-processors, I still lack confidence in fully embracing the Block Element Modifier (BEM) convention.

Suppose we adhere to this specific BEM format:

block-name__element-name_modifier-name_modifier-value

I am curious if it is acceptable to define a class without the element-name, featuring only the block followed by the modifier.

For instance:

<div class="menu_light-theme">
  <!-- other menu elements like buttons and icons -->
  <ul class="menu__list_light-theme>
    <li><a class="menu__list-element" href="">Home</a></li>
    <li><a class="menu__list-element" href="">About</a></li>
  </ul>
</div>

In the code snippet above, the .menu_light-theme class serves as a 'wrapper' for the menu, containing only the block and modifier.

While I acknowledge that preferences may vary, I am interested in whether this aligns with BEM principles and welcome suggestions on handling scenarios where the element component of BEM might seem unnecessary.

htmlcssbem

Answer №1

Absolutely, the information you need can be found in the official documentation: 

.button--state-success {...}

Applying this to your scenario, the code would look something like this (remember to use double dashes for the modifier):

<div class="menu--light-theme">
  <!-- other menu components like buttons and icons go here -->
  <ul class="menu__list--light-theme>
    <li><a class="menu__list-element" href="">Home</a></li>
    <li><a class="menu__list-element" href="">About</a></li>
  </ul>
</div>

Answer №2

As per the guidelines provided in the documentation (), it is recommended to use modifiers on blocks or elements while ensuring that the class name of the block or element is maintained in the HTML structure:

Preferred approach:

<div class="block block--modifier">
      <div class="block__element block__element--some-modifier">...</div>
      ...
</div>

Avoid using:

<div class="block--mod">...</div>
/* or */
<div class="block__element--mod">...</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

IE8 is not properly handling nested HTML elements that have the display:none property set

I am currently using jQuery to create a smooth fade-in effect for an <article> element that contains a <section> element. The outer element has CSS properties of display:none, position:fixed, and z-index:5. Meanwhile, the inner element is styl ...

javascriptjquerycssinternet-explorerhtml

Step-by-step guide on building an engaging Donut chart using jQuery

After spending several hours working on it, I'm struggling to draw my donut graph with JavaScript. Can anyone provide a solution? I am looking for a way to add 25% when one checkbox is selected and +25% when two checkboxes are selected. Thank you in a ...

javascripthtmljquerycss

Troubleshooting Cross-Origin Resource Sharing (CORS) problem in Jquery

When using AJAX post from jQuery to call two REST services on different domains for business logic, a CORS issue arises. By setting crossDomain: true in my AJAX call following Google references, it works fine without specifying headers. However, if I inc ...

javascriptjqueryhtmlajaxjsp

Differences in Column Height between Bootstrap 4 on Mobile and Desktop Devices

My design includes two columns on desktop, each with a size of 6. https://i.sstatic.net/M33c8.png However, on mobile, I want these columns to adjust to the height of the phone screen. https://i.sstatic.net/3Z44d.png Is there a way to make the height va ...

cssbootstrap-4flexbox

Tips for implementing bslib package pop up window within a table displayed using rhandsontable in R Shiny

I am trying to implement the template from Laurent's answer on R Shiny - Popup window when hovering over icon in my code below, which involves integrating a popup window into a rhandsontable table. My goal is to display the popup window as depicted in ...

javascriptcssrshinybslib

There is a single div sandwiched between two others, with each of the surrounding divs reaching the edge of the browser

Require a small space between the middle div and the two on each side. The middle bar should have a fixed width. Here is my attempt so far, but it seems messy: <!DOCTYPE html> <html> <head> <style> #container { width: auto; ...

htmlcss

Fresh sheet with a view through the window

I need to print a table and two popup windows when an action is triggered, but I am facing issues with the page-break in CSS. None of the solutions I have attempted so far seem to work. Currently, the two pop-up windows overlap with the table data, and I w ...

htmlcss

Creating a visually stunning image grid akin to the meticulously designed layouts found

Forgive my lack of knowledge, but I'm curious about how to create an image or text grid similar to Tumblr using HTML and CSS. I'm looking to achieve a layout like this: ...

javascriptjqueryhtmlcss

Creating an appealing navbar in React by skillfully integrating the image logo and brand name for a

Having some trouble positioning my logo on the top left corner of the navbar. It keeps ending up in an awkward spot alongside the brand name. https://i.stack.imgur.com/XZjV9.png If anyone has any tips on how to properly align the logo and brand on the na ...

htmlcssreactjsmaterialize

Is it advisable to incorporate Material-UI into a React project?

When it comes to designing a login page in react, I stumbled upon material-ui. The real question is, should we utilize Material-UI for this purpose? Furthermore, how can we manage styles in a separate file in the given examples? It seems logical to place t ...

javascriptcssreactjsmaterial-ui

There was a problem retrieving the product information from the API

I have been struggling to pinpoint the exact issue at hand. The foundation of HTML and CSS is pre-written, with JavaScript responsible for generating the core elements to populate the DOM. Within my script, I am attempting to retrieve product data in ord ...

javascripthtmlcssfetch-api

Issue with Bootstrap Toast failing to display after Bootstrap Modal closure

I am currently working on an app for a company directory that will help the company manage its employees, departments, and locations. This app is designed to allow users to make changes to the database only after confirming their actions. The app successfu ...

javascripthtmljquerybootstrap-4toast

Slicknav is failing to appear on the screen, although it is being

After spending hours trying to implement a slicknav menu into my school project, I'm stuck and seeking guidance. Despite having some coding experience, I can't seem to find the solution to my problem. Any help, insight, or tips on fixing or impro ...

javascriptjquerycsshtmlslicknav

Content Division with Sticky Footer

I have successfully made my footer stay at the bottom of the page by following this method: Now, I am facing an issue where my #content div has borders on the left and right sides but does not expand to match the height of the #wrapper. Your help in reso ...

htmlcssxhtml

Scrollbar Excess in Windows 10 on Chrome Version 76

<div style="overflow-x: hidden"> <div style="height: 100%"> <p style="margin-bottom: 1rem"> lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan nisl id maximus gravida. </p> ...

htmlcssgoogle-chromeview

Scroll Magic not cooperating with Simple Tween local copy

Greetings! I am attempting to replicate this simple tween example using scrollmagic.js. It functions properly on jsfiddle. To confirm, I added scene.addIndicators() to observe the start, end, and trigger hook. It functions flawlessly. As displayed in the ...

javascriptjqueryhtmlcssscrollmagic

Enhance the appearance of React.Fragment with custom styling

When working with React, my components adhere to a specific file structure schema: - componentName |- componentName.tsx |- componentName.scss Some of these components are wrapped with a <React.Fragment>, like this: render() { return ( &l ...

javascriptcssreactjs

Ways to attach jQuery live to the entire window?

tag: I want to trigger specific functions whenever the mouse moves, regardless of its position on the browser window. Currently, I am using the following code snippet: $('html').on('mousemove', function(e) { ... } However, this appr ...

javascriptjqueryhtml

Incorporating full-screen viewing in the browser, these websites provide a seamless user experience with a "learn more" button strategically placed at the bottom. This button effortlessly

Have you ever noticed how websites like Heroku.com and dropbox.com automatically display a full-screen homepage tailored to your browser size? They have a clever button at the bottom that smoothly scrolls you down the page for more information. Have you wo ...

jqueryhtmlcssslidedown

Is it possible to issue commands within JavaFX-hosted Javascript?

I'm currently working on developing a JavaFX Application that assists me in creating JavaScript scripts. The application consists of a raw text Pane on the left, and an HTML Pane on the right which displays the rendered HTML content from the left Pane ...

javascriptjavahtmljavafx