8 replies

How would you BEM this?

<div class="application-header">
  <div class="inner-container">
    <div class="title">

<div class="application-header">
  <div class="inner-container">
    <div class="title">

ChatGPT is showing me:

<div class="application-header">
  <div class="header__inner-container">
    <div class="header__title">

<div class="application-header">
  <div class="header__inner-container">
    <div class="header__title">

But that doesn't look right to me. I suck at BEM but I always thought that

denoted the modifier.

I thought it should be something like this maybe?

.application-header
  .application-header__inner
    header__title

.application-header
  .application-header__inner
    header__title

8 replies

<div class="application-header">
  <div class="inner-container">
    <div class="title">

<div class="application-header">
  <div class="inner-container">
    <div class="title">

ChatGPT is showing me:

<div class="application-header">
  <div class="header__inner-container">
    <div class="header__title">

<div class="application-header">
  <div class="header__inner-container">
    <div class="header__title">

But that doesn't look right to me. I suck at BEM but I always thought that

denoted the modifier.

I thought it should be something like this maybe?

.application-header
  .application-header__inner
    header__title

.application-header
  .application-header__inner
    header__title