Is it considered acceptable to assign multiple BEM elements to the class of an HTML element?

In my web application, I am organizing the CSS based on the BEM convention for better structure and maintainability.

Within this setup, there is a block named item which consists of three elements: item__section, item__title, and item__description.

To implement these BEM classes effectively, I've structured them as shown below:

<div class="item">
  <div class="item__section item__title"> ... </div>
  <div class="item__section item__description"> ... </div>
</div>

The class item__section contains styles that are shared among the different elements.

I'm unsure if this approach adheres to valid BEM standards. Should I consider creating a modifier for item__section to distinguish between title and description sections?

htmlcssbem

Answer №1

Indeed, this is a legitimate concept known as mixture:

Answer №2

My suggestion would be to avoid doing that. Perhaps consider incorporating a mixin such as the following:

<div class="container">
  <div class="container__section header"> ... </div>
  <div class="container__section body"> ... </div>
</div>

It's best to refrain from using multiple elements of the same block within one tag, as it can lead to issues with specificity.

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

The CSS scale property is not working as expected when used in a React.js application, specifically

working environment ・next.js ・reacｔ ・typescript https://www.youtube.com/watch?v=ujlpzTyJp-M A Toolchip was developed based on the referenced video. However, the --scale: 1; property is not being applied. import React, { FunctionComponent ...

htmlcssreactjstypescriptcss-selectors

Unleashing the power of ::ng-deep to access CSS in an Angular child component

I'm attempting to modify the CSS class of a child component by using ::ng-deep. Despite my efforts with various iterations of the code provided below, I have been unsuccessful in accessing the CSS. The structure of the HTML component is depicted in th ...

cssangularsassng-deep

Is there a way to prevent the update status function from refreshing when the dropdownlist is changed in MVC?

Refreshing only the corresponding row when clicking on the status update is essential. Prior to that, I have implemented a dropdown onchange function which determines which table rows are displayed. cs.html: <section class="card "> < ...

javascriptjqueryhtmlasp.net-mvcasp.net-ajax

A guide to designing a responsive flexbox layout with various columns and rows

I need help designing a container that is responsive for both mobile and desktop, resembling the layout shown in this image. The initial HTML structure is as follows, but I can modify it by adding elements or classes if necessary. <div class="conta ...

htmlcssflexbox

Utilizing jQuery for validating latitude and longitude coordinates with regular expressions

I implemented jQuery validation in the following way: $("#register-form").validate({ rules: { latitude: { required: true, strongCoord: true }, longitude: { required: true, strongCoord: true } }, messages: { yrAr: { required: &a ...

javascriptjqueryhtmljquery-validate

Customize the appearance of an ASP link button within a navigation menu

Just getting started with ASP.net and CSS, I want to customize my link button using CSS similar to other <a href> buttons, but I seem to be running into some issues. This is the code for my menu: <div id="templatemo_menu"> <ul ...

htmlasp.netcss

Analyzing div tags using Nokogiri

There's a piece of code that effectively extracts tid and term data: (answered generously by Uri Agassi) for i in (1..10) doc = Nokogiri::HTML(open("http://somewebsite.com/#{i}/")) tids = doc.xpath("//div[contains(concat(' ', @class, ...

htmlruby-on-railsrubyxpathnokogiri

Selecting checkboxes in two separate divs by class name using jQuery

Here is a link to a fiddle showcasing my current project: http://jsfiddle.net/393Yk/ In my layout, I have two columns containing nested unordered lists with numerous checkboxes. The objective is for the checkboxes in the right column to mirror the select ...

javascriptjqueryhtmlcsscheckbox

AHK is unable to fully load all HTML content

I have successfully implemented code to change a frame within the webpage which is working effectively. fr1 :=IE.document.frames[13] fr1.navigate("http blablabla ") However, I am encountering an issue where I need to parse one of the tables on th ...

htmlautohotkey

CSS code for vertical navigation arrows to remain on both the left and right sides of the webpage

I'm struggling a bit with the CSS. I want to recreate the same effect as seen on . The left and right navigation arrows stay fixed vertically even when scrolling up or down the page. Does anyone have any code examples for that? ...

javascriptjqueryhtmlcss

Looking to incorporate a new title animation into my jQuery slideshow

After downloading a slideshow for my home page, I noticed it came with 2 animated text titles (H2 and H3) that slide in from the left to center. Now, I am trying to incorporate an additional line of text (H4) that should slide in from the right with a dela ...

javascriptjqueryhtmlcssanimation

How can I manipulate the text format in Typescript?

I am currently working on formatting a piece of text to ensure it is displayed correctly for the user. The particular phrase I need to format, which is stored as a variable, is currently enclosed in single quotes, making it visually unappealing. To improve ...

javascripthtmlcsstypescriptformat

Is there a way to adjust the margin widths between specific columns without causing them to wrap onto a new line? I need to maintain a total of 12 columns

Check out this JSFiddle link for the code. I am trying to adjust the vertical margin width between specific columns. I attempted to add a margin between my col-xs-4 and col-lg-4 by using mr-4. <div class="container-fluid"> <di ...

htmlcsstwitter-bootstrap-3bootstrap-4

Decreasing the size of the image will not cause its height

Is there a way for an image to automatically adjust its size based on the height of the container? I have specified a height, but my nested img tag refuses to scale down and keeps overflowing my .modal-wrapper .modal div. To prevent this, I currently have ...

htmlcss

What's the best way to make sure an image in CSS respects the height of its parent flexbox section?

This question addresses a clear problem: Flexbox - Img height conflict. However, the accepted answer does not meet my specific needs. One potential solution involves using absolute and relative positioning. While this resolves sizing issues, it interferes ...

htmlcssimageflexbox

Animating with JavaScript

I have a members button on my website that triggers a dropdown animation when clicked. However, the issue is that the animation occurs every time a page is loaded, even if the button is not clicked. I want the dropdown to only open when the button is click ...

javascriptjqueryhtmlanimation

What could be the reason for Meteor failing to display content when initiating an HTML file with `<html>` tag?

What is the reason for Meteor not rendering anything when an HTML file starts with <html>? For example, this code works: <head> <title>meteor-sample</title> </head> <body> <div> <h1>Welcome to Meteor!& ...

javascripthtmlmeteor

Changing font styles using the jMenu jQuery plugin: A step-by-step guide

I'm having trouble changing the font-family using CSS with jQuery's "jMenu" plugin. Here is the CSS I currently have: .jMenu{ position : absolute; top : 80px; left : 0px; width : 100%; display:table; margin:0; padding ...

jquerycssjmenu

Interpolation within ngStyle allows dynamic styling to be applied in

When creating a column component for use within a grid in Angular, I am struggling with implementing a media query using ngStyle. Here is what my code looks like so far: import { Component, Input } from '@angular/core' const smMin = '48em& ...

cssangulartypescriptmedia-queriesng-style

Why is the Google Map missing from the Bootstrap modal dialog?

I have multiple links on my website, each describing a different location with unique map data. I would like to display a modal bootstrap dialog with an embedded Google map when a user clicks on any of the links - ensuring that the location shown correspon ...

javascriptjqueryhtmltwitter-bootstrapgoogle-maps