HTML CSS SASS BEM

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Great that I saw your solution on this:>

  Layout in general looks good.

  For modifiers, you usually look on the layout if there are certain components that are somehow similar which can be just altered by a modifier. If you look at it, the proceed to payment and cancel order is just the same a tag that is customized to look like a button.

  For example, both on those a tag, you can have card__button. Then on the blue button, you can add a card__button--filled as an extra class. This way you can reuse that selector:

  .card {
    
    &__button {}
    &__button--filled {}
  }
  

  Also, since this is just one component, you can just replace the plan to use the parent selector card, so that it could be card__plan. Since even if this were a real site, there won't be another instance of plan therefore it can't be reuse, where the .card occupies the whole component as one.

  Other suggestions would be that:

  • Do not use the height: 100vh on a large container, remove that from the main and instead use min-height: 100vh as this is much flexible than using a fixed height.
  • The wavy background-image should be hidden by using alt="' and extra aria-hidden="true" attribute on the img. If you are using an image, if the image is just for decoration, you must hide it all times. Only use meaningful alt if and only if the image adds content to the site.
  • The vector image should be hidden as well since it is just a decorative image. Usually, vector images like those are hidden because they are just vector images. If you have for example a gallery on site, you could make use of descriptive alt values for those because you are showcasing them, but cases like these, images are just decorative.
  • Music icon should be hidden as well.
  • The annual plan should use a heading tag, since it describes what is the section is all about, hence the pricing plan of the user.
  • Also, do not use just use strong tag to wrap a text, use p tag on them. Always use p tag or any other text-content html elements for text, strong span if you use them, make sure that they are inside a meaningful element like p tag.
  • When you use section element, it always expect a heading tag inside it. Your .card__footer could just be a div.
  • Lastly, the .attribution should be inside a footer tag. As you can see in your issues, all contents must be inside landmark elements. header, main, footer, aside, nav those are landmark elements and contents needs to be inside a landmark elements to be properly navigated by users.

  Aside from those, great work again on this one.

  Marked as helpful

  1