Order summary

Community feedback

• 

  John Mirage•1,590

  @john-miragePosted about 2 years ago

  Hello,

  Sure sometimes, classnames can be long but if your components (blocks) are nicely defined, it will never be a problem.

  Let's take an example of a card component.

  <article class="card">
    <img class="card__image" src="path/of/the/image.png" alt="a nice picture" />
    <h2 class="card__title">My nice card</h2>
    <p class="card__description">This is a nice card with a picture and a list of blog posts</p>
    <ul class="card__list">
      <li class="card__list-item">
        <a class="card__list-link card__list-link--blue"></a>
      </li>
      <li class="card__list-item">
        <a class="card__list-link card__list-link--blue"></a>
      </li>
    </ul>
  </article>
  

  As you can see it become really dirty when you have multiple levels.To improve this code we can have two blocks instead of one:

  <article class="card">
    <img class="card__image" src="path/of/the/image.png" alt="a nice picture" />
    <h2 class="card__title">My nice card</h2>
    <p class="card__description">This is a nice card with a picture and a list of blog posts</p>
    <ul class="list">
      <li class="list__item">
        <a class="list__link list__link--red"></a>
      </li>
      <li class="list__item">
        <a class="list__link list__link--blue"></a>
      </li>
    </ul>
  </article>
  

  Now you have 2 components (card and list), you can reuse them anywhere you want. Of course creating blocks depend of their reusability, but if a block become bloated, this is perfectly fine to make multiple blocks even if it is used only one time in the project.

  In the above example, the block names are really simple, it will not be the case if your project is really big, but dont forget that you can also use CamelCase for your class names:

  <article class="blogPostCard">
    <img class="blogPostCard__backgroundImage" src="path/of/the/image.png" alt="a nice picture" />
    <h2 class="blogPostCard__fullname">My nice card</h2>
    <p class="blogPostCard__excerpt">This is a nice card with a picture and a list of blog posts</p>
    <ul class="blogPostList">
      <li class="blogPostList__item">
        <a class="blogPostList__link blogPostList__link--featuredPost"></a>
      </li>
      <li class="blogPostList__item">
        <a class="blogPostList__link blogPostList__link--markedAsRead"></a>
      </li>
    </ul>
  </article>
  

  Marked as helpful

  0

  ---

  

  Emmiecodes•100

  @EmmiecodesPosted about 2 years ago

  @john-mirage Thank you for your comment! It was very helpful. I thought every tag within a block had to become an element and you couldn't have seperate blocks within a block so that cleared up some confusion. I just updated the code and hope it is a bit more readable now.

  0