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

Removing the border from a button in CSS and HTML

Looking to build a sleek and stunning website, but struggling with removing button borders. Any help would be greatly appreciated! If you'd like to check out the issue, visit this link: . I'm aiming for no button or image borders. To review my ...

Attempting to align input fields and spans side by side

Is there a way to properly align multiple inputs next to each other with dots in between, resembling an IPv4 address? Currently, the span appears to float in the center. How can this be resolved? It's worth noting that all elements in the image have b ...

Resolving the Complete Cover Background Image problem

My current website has a full cover background image implemented using the following code: #back{ /* #back is a div */ position:absolute; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; backgroun ...

Alignment of images at the center within a container div while maintaining a height of 100%

Apologies if this question has already been addressed - I have tried numerous methods to center images horizontally without success. This particular image just does not want to align in the center! For reference, here is the JSFiddle link HTML: (Please n ...

Tips for presenting HTML source code with appropriate tag coloring, style, and indentation similar to that found in editors

I need to display the source code of an HTML file that is rendered in an iframe. The source code should be shown with proper tag colors and indentations similar to editors like Sublime Text. https://i.stack.imgur.com/IbHr0.png I managed to extract the sour ...

Display a pleasant alert message when the file is not recognized as an image during the loading

Is there someone who can assist me? I have attempted multiple times but without success. How can I display a sweet alert when a file is selected that is not an image? <input type ="file" /> ...

Creating a dynamic hover drop-down navigation bar in ASP.NET

After successfully creating a navigation bar with hover effects, I am now looking to implement a dropdown list when hovering over the items. Can anyone provide guidance on how to achieve this? Below is the current code snippet I am working with: <ul c ...

Is there a way to prevent Chrome from highlighting text that matches the content of a `position: fixed` element?

I currently have a Toc element in my HTML with the property position: fixed. (This means it remains in place as you scroll) My goal is to prevent Chrome's Find Text feature from recognizing text within that Toc element. (Ideally using JavaScript) ...

JS receiving a reference to an undefined variable from Flask

I referenced this helpful post on Stack Overflow to transfer data from Flask to a JS file. Flask: @app.route('/') def home(): content = "Hello" return render_template('index.html', content=content) HTML <head> ...

Using JavaScript to modify a section of an anchor link attribute

I am looking to dynamically update part of the URL when a specific radio button is selected. There are three purchase links, each representing a different amount. After choosing an animal, I need to select one of the three amounts to spend. How can I modi ...

Change the CSS property to override the text-overflow with ellipsis

In my specific scenario, I need to override the default ellipsis behavior that adds '...' to text when using 'text-overflow: ellipsis', and instead use two stars **. Is there a way to achieve this using only Pure CSS? It is important t ...

What could be the reason the background-color isn't changing when I apply button:hover?

body{ font-family:"Arial","Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif; font-size:12px; } p, h1, form, button{border:0; margin:0; padding:0;} .spacer{clear:both; height:1px;} /* ----------- My Form ----------- */ .myform{ margin:0 ...

Developing an HTML table for room reservations using PHP - a comprehensive booking system

I'm currently working on creating an HTML table for a room booking system, but I've run into a problem trying to figure out how to insert data into cells. Right now, I'm retrieving data from a database (start time and end time for the bookin ...

Learn how to connect a button to a webpage using jquery while also executing another function when clicked

I would like the showAll button click to redirect to another page where the showAll function is executed and the results are displayed on the new page. Additionally, I am looking for a way to modify the console.log statement to output the result on the new ...

Uninterrupted text streaming with dynamic content that seamlessly transitions without any gaps

I'm currently facing a challenge with an outdated element like <marquee>. Here's a fiddle where you can check it out: https://jsfiddle.net/qbqz0kay/1/ This is just one of the many attempts I've made, and I'm struggling with two m ...

The height of divs spontaneously changes after resizing without any instructions

I am developing a jQuery function to vertically center an element. The function is triggered on load and here is the code: JQuery var $window_height; function Centerize(content) { content.css('margin-top', (($window_height - content.height( ...

CSS3 alternative to width:calc(100% - 10px)

Currently, I am in need of an alternative solution for migrating my CSS file since some CSS3 features are not being rendered properly on QtWebKit yet. The CSS code that I am working with is as follows: .fit { width: -moz-calc(100% - 10px); width: ...

When using the ngFor directive, the select tag with ngModel does not correctly select options based on the specified

Issue with select dropdown not pre-selecting values in ngFor based on ngModel. Take a look at the relevant component and html code: testArr = [ { id : '1', value: 'one' }, { id : '2', ...

Analyzing the browser's address bar and creating a navigation link derived from it

Is there a way to create a script that can extract information from the address bar? For example, if we have a link like this: We want to be able to take the "page-2011" part and dynamically generate navigation links like this: « <a href="/page-2010 ...

What is the best way to overlay my slider with a div containing content?

In the hero section of my website, there is a slider with 3 slides. I am looking to add a div element that will display content over these slides at all times, regardless of which slide is currently showing. ...