Order summary card using flexbox

Community feedback

• 

  hardy•3,660

  @hardy333Posted about 3 years ago

  HI, first of all congratulations for escaping tutorial hell xD. For the first time try this is extremely good solution - nicely done.

  Few suggestions here:

  • Add hover effect on button and a tags
  • for .annual-plan__text--change link tag change text color, it is more like purple color on design files than blue, and also lower font size on it.
  • Try to choose better class names for your elements. In general try to make class names as simple and short as possible without compromising your naming system in your case BEM. For example .annual-plan__text--change class name is overly complicated long and even incorrectly set - semantically. Instead try to use something like .annual-plan__link for example this is shorter easy to understand and semantically correct.
  • You are using BEM incorrectly when you are using -- modifier syntax. For example in case of .summary__text, .summary__text--main and .summary__text--sub, summary__text is a div container which wraps all the card text including h1 and p, .summary__text--main is h1. your class name and its modifier --main implies that h1 is some kind of modification of div, which is not correct. So relationship between .summary__text, and .summary__text--main is not that one is modification of other, their relationship is more like one (h1) is child of other(div). So in your case I will use classnames like this: .summary__text for div .summary__text__heading for h1 and .summary__text__paragraph for p. Or you can even use .summary__heading and .summary__paragraph for h1 and p respectively.
  • In general I suggest to read some articles about BEM and you also can watch some tutorials on youtube, for example you can read [this article[(https://css-tricks.com/bem-101/)

  Hope this suggestions will be helpful.

  Good Luck.

  Marked as helpful

  1