Can BEVM be deemed legitimate or should we solely rely on the modifier?

Exploring Chainable BEM Modifiers

I recently came across the concept of chainable BEM modifiers and I'm excited to incorporate this idea into my next project. However, upon checking getbem.com, I discovered that it's not recommended to use a modifier alone in BEM methodology.

Good

<div class="block block--mod">...</div>
<div class="block block--size-big
block--shadow-yes">...</div>

Bad

<div class="block--mod">...</div>

On the other hand, in the BEVM approach, it seems acceptable to use a modifier alone within an element. Can anyone provide any suggestions or insights on how to navigate this difference?

htmlcssbem

Answer №1

BEM methodology discourages the use of modifiers without a block class itself, as they are meant to modify existing elements.

Multiple modifiers can be applied to a block simultaneously to avoid repeating basic styles in each modifier. These modifiers can be dynamically added or removed, requiring an entity (block or element) for them to be attached to or removed from.

For further information, please visit

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

Is there a variance in window.innerWidth between Chrome and Firefox?

body, html { position:absolute; width:100%; height:100%; margin: 0; padding: 0; overflow: hidden; } When using window.innerWidth, there is a discrepancy between the values returned by Firefox and Chrome. Firefox return ...

javascripthtmlcsswidth

Avoid reloading the page in PHP when the browser back button is clicked

I've built an HTML form where the values are passed to a second page using POST method. On the second page, I have an edit button that, when clicked, redirects back to the HTML form page with the user's typed values. However, my dilemma is figuri ...

javascriptphphtml

Difficulty executing for loop due to multiple buttons, resulting in malfunctioning buttons in JavaScript code

Currently encountering an issue while trying to implement modal windows on my first website. Everything works fine without the for loop, but I wanted to have multiple buttons and windows, so I decided to use a for loop to handle each button. Strangely, the ...

javascripthtml

Struggling to align the push menu properly within the Bootstrap framework

I am currently utilizing Bootstrap as my UI framework and attempting to create a push menu on the left side of the page. While I have made progress towards achieving this goal, there are some bugs in the system that I am encountering. Specifically, I am ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using single page anchor tags in Next.js to toggle content visibility

The Issue Currently working on a project using Next.js and facing a challenge: needing to hide or replace content based on the selected category without reloading the page or navigating to another route. Furthermore, ensuring that when the page is reloade ...

javascriptcssreactjsnext.js

A step-by-step guide on generating a single chip using the same word in Angular

I'm trying to find a solution to ensure that only one chip is created from the same word inputted, instead of generating duplicates. Currently, users can input variations such as "apple," "APPLE," "apPPle," "aPpLe," and I want to automatically conver ...

htmlangularjsangulartypescriptangular-material

How to create a full-screen 2x2 grid layout using divs in HTML

I am attempting to create a grid layout of 4 divs arranged in a 2x2 configuration. I would like to have a 1 pixel border between these divs, similar to the following structure: 1|2 -+- 3|4 Each div should have equal size and collectively fill the entire ...

csshtml

Making the black background stretch to the full height and allowing for scrolling when necessary

Check out this webpage where the text in the box extends beyond the page when scrolling, revealing the full content while the black background expands correctly. Visit this page to see that the text in the box is small, but I want the black background t ...

css

What is the best way to connect the value of my range slider input to the corresponding input field in the HTML table?

I'm currently working with Django formsets. Within my HTML table body, I have a range slider. As of now, when I move the slider, it updates the last text box in the table as intended (with JavaScript handling this). However, what I want is for each s ...

javascripthtmldjango

How to conceal overflow within a div content on the left side when resizing the browser using bootstrap

I've searched through all the SO questions and tried Google, but I still can't find an answer. I have a bootstrap layout and I want the content to hide from both sides (left and right) when the browser is resized. If I use overflow-x:hidden, ...

htmltwitter-bootstrapcss

How can you position navbar links to the right in Bootstrap?

I have been given an assignment that requires me to create HTML code to replicate a specific webpage design, which can be viewed here: https://i.sstatic.net/GC68r.png One of the requirements is to align the Home, Contact, About Us, and Messages links to t ...

htmlbootstrap-4

Creating a multi-column dropdown menu: options for two, three, or multiple columns

Is there a way to implement multiple columns in a dropdown menu using the grid system in Bootstrap 4? Here is the code I have tried so far, but it's not working as expected (please note that the snippet is mobile-responsive) <!DOCTYPE html> ...

htmlcssbootstrap-4

Develop a responsive component on the right side

I am encountering an issue with creating a responsive div that matches the height of the image on the left side. I want to include text in this div, however, when I do so, the paragraph expands in height along with the div element when I attempt to change ...

htmlcss

What causes discrepancies between jQuery set attributes and .html() output?

In an attempt to set attributes on HTML snippets, I am aiming to repopulate a form with previously entered values. Despite using .attr() to set the attributes, they do not appear after using .html(). For reference, I have provided a simple example here: h ...

javascriptjqueryhtml

Using the context_processors variable within a Django "if" condition

Developing themes for my Django website is my current project, and one of my goals is to adjust the HTML text color based on a context_processors variable. The context_processors variable options are : Datasystems or Cameroun (I currently have two themes, ...

pythonhtmldjango

Various height divs are arranged in two columns and float accordingly

My goal is to have two columns that stack divs of varying heights in the order they appear. These divs are created dynamically, causing some challenges with alignment when floated at 50% width. For example, div #4 may end up being significantly taller tha ...

htmlcss

What is a more efficient method for generating HTML code using PHP variables?

My online store showcases a variety of products, each housed in a div with the id content block. The link, image, background, description, and price for each product are all retrieved from a mySQL table. Initially, I planned to store the HTML code below as ...

phpmysqlhtml

What is the method for implementing two-way binding on a checkbox in Angular?

Within my accordion, I have a series of options in the form of checkboxes. Users are able to select these checkboxes, but I am seeking a way to pre-select certain checkboxes based on specific conditions. The challenge arises when these conditions are deter ...

javascripthtmlarraysangulartypescript

Sending an ID from an array within a *ngFor loop to a different component in Angular: a step-by-step guide

I have a collection of items that I loop through using ngFor. My goal is to pass all its attributes to another component. I attempted to accomplish this with the following code: *ngFor='let item of postList [routerLink]="['/detailed-post&ap ...

htmlangulartypescript

Is it feasible to utilize a prop for styling in Vue using SCSS/SASS?

I am currently working on enabling custom theming for my component that utilizes bootstrap. I am aiming to define its $primary tag in SCSS within the section of the Vue component. Currently, my styling setup looks like this: <style scoped lang="scss"& ...

javascriptcssvue.jssassbootstrap-4