Notifications in Vue3.js & SASS

Hi @fontainm 👋

You did a great job on this challenge. 👍

I had a look at your code and here are a few things that might help you with your class names and the structure of your markup:

• I get the impression you tried to use the BEM methodology to write your CSS but you did not applied it 100%. You have defined .notifications as a Block which has the .notifications__header and .notifications__list as its Elements. This is good 👍. However, the .notifications Block has other Elements inside it which you chose to target differently. To be honest, it's not a bad thing as such but if you'd like to go the full BEM way, here's a suggestion for the class names and markup:

<div class="notifications">
  <header class="notifications__header">
    <h1 class="notifications__title">Notifications</h1>
    <span class="notifications__count">{{ countUnread }}</span>
    <button type="button" class="notifications__btn">Mark all as read</button>
  </header>

  <ul class="notifications__list">
    <li class="notifications__item">
      <img class="notifications__avatar"/>

      <div class="notifications__content">
        <div class="notifications__sender"></div>

        <span class="notifications__time"></span>

        <div class="notifications__body"></div>
      </div>
    </li>
  </ul>
</div>

With the above markup, you will end up with the following CSS:

.notifications { ... }

.notifications__header { ... }

.notifications__title { ... }

.notifications__count { ... }

.notifications__btn { ... }

.notifications__list { ... }

.notifications__item { ... }

.notifications__item--unread { ... } // This will be your `Modifier` to style an unread item

.notifications__avatar { ... }

.notifications__content { ... }

.notifications__sender { ... }

.notifications__time { ... }

.notifications__body { ... }

As you can see, if you follow the BEM methodology, your final CSS is completely flat, i.e you'll not have selectors like .notifications__list .notification .message { ... }

• One last thing, use semantic elements where needed. For example, the Mark all as read should be a <button> instead of a <div>

I hope this helps.

Keep it up.