What is the best choice for my CSS: creating a block or an element using BEM methodology

** According to the official BEM website **

Create a block: If a section of code can be reused and does not rely on other page components being implemented.

Create an element: If a section of code cannot be used separately without the parent entity (the block).

I have an "about section" block. Its elements depend on the parent and are not reusable on the website. How should I structure this code according to BEM? This code is breaking the BEM rule because it's BEM, not BEEM.

<section class="about">
    <div class="about__container">
      <div class="about__header">
        <h2 class="about__title">about title</h2>
        <p class="about__sub-title">about sub title </p>
      </div>
      <div class="about__stats">
        <div class="about__stats__item">
          <div class="about__stats__title">stats title</div>
          <div class="about__stats__sub-title">stats sub title</div>
        </div>
      </div>
      <div class="about__features">
        <div class="about__features__item">
          <div class="about__features__icon">features icon </div>
          <div class="about__features__title">features title </div>
        </div>
      </div>
    </div>
  </section>

Answer №1

There are two possible solutions to consider:

<section class="about">
<div class="about__container">
  ...
  <div class="about__stats">
    <div class="about__item">
      <div class="about__title">stats title</div>
      <div class="about__sub-title">stats sub title</div>
    </div>
  </div>
  <div class="about__features">
    <div class="about__item">
      <div class="about__icon">features icon </div>
      <div class="about__title">features title </div>
    </div>
  </div>
</div>

or:

<section class="about">
<div class="about__container">
  ...
  <div class="stats">
    <div class="stats__item">
      <div class="stats__title">stats title</div>
      <div class="stats__sub-title">stats sub title</div>
    </div>
  </div>
  <div class="features">
    <div class="features__item">
      <div class="features__icon">features icon </div>
      <div class="features__title">features title </div>
    </div>
  </div>
</div>

Solution 1 should be chosen if the CSS titles inside the stats/features block are identical.

Solution 2 could be considered if you decide to relocate the entire features/stats block.

However, it is generally not advisable to have a grandchild (referred to as BEEM) in this structure.

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

Best practice for encapsulating property expressions in Angular templates

Repeating expression In my Angular 6 component template, I have the a && (b || c) expression repeated 3 times. I am looking for a way to abstract it instead of duplicating the code. parent.component.html <component [prop1]="1" [prop2]="a ...

I'm wondering if anyone has any insights as to why the CSS rule `body{ overflow: auto;}` is not functioning properly for me. Despite my attempts of adding a class to the body tag and

I am facing an issue where adding body tags to my code in Visual Studio code does not yield the desired results. Interestingly, it doesn't seem to be a syntax error in CSS. body{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI&apo ...

Utilizing pixel values for Material-UI breakpoints rather than using the default sm, md, lg, xl options

Below is the code snippet that I am using: [theme.breakpoints.only('lg')]: {} The above code works perfectly and shifts at the desired breakpoint. However, when I implement the following: [theme.breakpoints.between('1200', '1021&a ...

Displaying JSON data using FormControls in Angular 5

Upon receiving Json values from the server, I am encountering an issue while binding them to respective textboxes. The problem arises as the value in the textbox appears as [object object] <h1>{{title}}</h1> <h3>Catalog</h3> ...

Guide on invoking a JavaScript function within a jQuery upon a specific event, such as clicking a hyperlink

I have a website page where I display some important information. However, I want to make this text hidden initially and only visible when a user clicks on a specific link or button. I attempted to achieve this functionality using the following code snippe ...

Display one of two divs after clicking a button depending on the input from a form field

My apologies for my limited knowledge in JavaScript and jQuery. I'm attempting to show one of two divs based on input from a form. Specifically, there's a button next to a form field that asks users to enter their zip code to check if they are wi ...

Click event dynamically bound to list items

I have a web application built with Durandal and Knockout. Here is the HTML code snippet: <ul id="header"> </ul> In a JavaScript function, I am dynamically adding a list item as follows: $("#header).append('<li id="btn"><a hre ...

What is the best place in Rails to add @media CSS tags?

Currently, my layout.html.erb contains some CSS rules with @media queries. <style> @media (max-width: 900px) { .green-button{ display: none!important; } .chat_button{ margin-top: 20px!important; } #myCarousel{ ...

csslimit overflow display only left side

I am struggling to implement a drag and drop feature resembling a shopping cart. Unfortunately, the content within the box is concealing the div I want to drag when moving out of the box. Is there a method to display only the content on the left side? Che ...

Creating a div that functions as a scrollbar controller

I am in search of a unique way to customize the scrolling functionality on my application, resembling more of a navbar that scrolls. However, I have not been able to find any existing plugins that meet my specific requirements. My inquiry includes: Whic ...

Modify the border color of a div contained within another div

I recently incorporated a Vue component (available at ): <vue-editor id="description" name="description" :class="{'uk-form-danger': errors.has('description') }" v-model="description" :editorToolbar="customToolbar" v-validate="' ...

Using Jquery Regex to Validate Numeric Range Input on KeyUp Event in an Input Field

I have been spending quite a few hours attempting to figure out a solution for this issue, but unfortunately, I haven't had much success. My goal is to add a Keyup/KeyPress event that only allows values between 2 and 1827. I am using an aspx inputbox ...

unexpected behavior when using jquery click function

I am currently working on a unique custom radio element that showcases images instead of the standard radio buttons. The basic HTML structure looks like this: <div id="wrap"> <p></p> <input type="radio" data-check='class-c ...

Personalizing CSS classes in ASP.NET

In the project I'm currently developing, users will have the ability to customize the font color of header titles. These header titles are styled using values from a cssClass, which includes properties such as font-size, font-color, font-weight, and ...

How can an input field with a checkbox type be properly placed within a table data tag in a table nested within an AngularJS modal?

Below is the code for my modal: <!-- modal for viewing permissions --> <div id="modal-user-permissions" class="modal"> <div class="modal-content"> <h4 id= ...

The CSS and JS codes are not successfully integrating into the webpage

I am encountering an issue with loading CSS and JS files onto my page. My project involves PHP and Xampp. The file structure is as follows: My Site - CSS - index.css - JS - index.js - Index.php (Apologies for the lack of a folder tre ...

Can the load API in jQuery be utilized to load fragments using a class selector instead of an id?

I've been working on enhancing a website's dashboard by incorporating more widgets onto the page. Interestingly, these widgets are already present on another page within the same domain. After some research, I discovered that utilizing the load A ...

What separates text-align:center from margin auto?

As someone who is just beginning to learn about CSS, I have come across the properties: text-align:center; and margin:auto; Both of these seem to center elements, but how exactly do they differ from each other? Any insights would be much appreciated. T ...

Clearing HTML Text Input Box When User Presses Enter

Currently, I am working on a lengthy program that is functioning almost flawlessly. However, there is one persistent issue: whenever I hit the Enter key while the text box is clicked, it clears the box and appends the data to the URL as if it were a GET re ...

Tips for incorporating extensive amounts of HTML into Internet Explorer without causing excessive strain on the CPU

I have been exploring a more ajax-based approach to loading data on a page in order to avoid postbacks. I can easily retrieve server-generated HTML through an ajax call, and adding it to the DOM is straightforward with jQuery's .append or .replaceWith ...