Responsive single price grid component solution (SASS, BEM)

Community feedback

• 

  haquanq•1,565

  @haquanq

  Posted 11 months ago

  Hello @denissejoyce 👋👋👋

  Nice work on the challenge!! It is looking good and close to the design. I notice that you are using extra hidden heading (sr-only) and it is good practice (improve semantic).

  Here is my feed back for you:

  • About naming classes, instead of naming it with parent & child relationship, for each small section you can pick an unique name for it. For example,

  // you can flat it out to avoid deep nesting
  intro__section
      intro__title
      intro__subtitle
      intro__description
  subscription__section
      subscription__title
      subscription__price
      subscription__description
      subscription__link
  why__section
      why__title
      why__list
          why__item
  

  • About naming variables (colors), depend on the scale of the project you could simply name all the variants of each color such as color-500, color-600 and use them directly. Or if you want your system to be more robust you can define local colors variable for each component like item--clr-hover and use it for itself or child elements. However since you are using SASS, there are so many way to utilize functions/mixins to solve different problems. At the end, you need to practice a lot to figure out what do you need.

  Hope this help 🌴🌴🌴

  11

  Marked as helpful