Notifications in Vue3.js & SASS

Community feedback

• 

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 1 year ago

  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.

  Marked as helpful

  1

  ---

  

  fontainm•80

  @fontainmPosted over 1 year ago

  Hi @christopher-adolphe, this is great feedback, thank you! I will try to use the BEM method properly in my upcoming projects 👍

  0

  

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 1 year ago

  @fontainm you are welcome.

  I'm happy to help and glad to see this was helpful to you. 🙂

  See you on the next one.

  Best regards.

  0