I need help, my first time using BEM, is this correct?

Question

I need help, my first time using BEM, is this correct?

55 Views Asked by Steven Tran At 08 February 2023 at 21:14

This is my first time trying to use BEM and I'm not sure if I've done it correctly. Is there anything i need to change??

<body>
    <div class="wrapper">
        <main class="main">
            <div class="main__content content">
                <div class="content__item content1">
                    <div class="content1__cirkel">
                        <img class="content1__image" src="bilder/1545876271475.jpg" alt="Saigon">
                    </div>

                    <div class="content1-info">
                        <p class="content__text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                            been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                </div>

                <div class="content__item content2">
                    <div class="content2__cirkel">
                        <img class="content2__image" src="bilder/21336448-81d8-4643-a1b9-1545d08172de.jpg" alt="Ha Long Bay">
                    </div>

                    <div class="content2-info">
                        <p class="content__text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                            been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                </div>

                <div class="content__item content3">
                    <div class="content3__cirkel">
                        <img class="content3__image" src="bilder/big-hand-ang-golden-bridge.jpg" alt="Hand Bridge">
                    </div>

                    <div class="content3-info">
                        <p class="content__text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                            been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>

I've tried reading about it and trying to tell myself if I've done it correctly but I would like a proffesional to do it aswell.

Original Q&A

There are 1 best solutions below

**Andrew** · Answer 1 · 2023-02-08T21:39:43.423000

Use double hyphens to separate block and element names
Make block names more descriptive, e.g. it's not clear what is content, but card or article would be nicer to use
Names should be consistent, don't use content1, content2, content3 and so on.

<body>
  <div class="wrapper">
    <main class="main">
      <div class="main__content content">
        <div class="content__item card">
          <div class="card__circle">
            <img class="card__image" src="bilder/1545876271475.jpg" alt="Saigon">
          </div>

          <div class="card__info">
            <p class="card__text">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
          </div>
        </div>

        <div class="content__item card">
          <div class="card__circle">
            <img class="card__image" src="bilder/21336448-81d8-4643-a1b9-1545d08172de.jpg" alt="Ha Long Bay">
          </div>

          <div class="card__info">
            <p class="card__text">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
          </div>
        </div>

        <div class="content__item card">
          <div class="card__circle">
            <img class="card__image" src="bilder/big-hand-ang-golden-bridge.jpg" alt="Hand Bridge">
          </div>

          <div class="card__info">
            <p class="card__text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>

I need help, my first time using BEM, is this correct?

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in BEM

Trending Questions

Popular # Hahtags

Popular Questions