Card components using Html, Sass and BEM

Community feedback

• 

  P

  j5•2,290

  @jmnyaregaPosted over 3 years ago

  Good job on the challenge @tamoroso 👏👏

  • I am a big fan of sass too. They recently made a public notice on the deprecation of the @import rule, they are encouraging developers to use the @use rule instead. import

  PS: with the @use rule, your CSS partials will be namespaced.

  • It is advised not to nest elements when adopting the BEM methodology.

  • Otherwise, amazing job on the challenge. Keep coding

  Marked as helpful

  0

  ---

  

  Thomas•100

  @tamorosoPosted over 3 years ago

  Thank you very much @jmnyarega !

  Concerning the BEM methodology and SASS, I thought nesting was there to avoid rewriting BEM classe names (at least I learn it that way). If it is not advised to nest elements, how can we take advantage of both BEM methodology and SASS power to have a better dev life ?

  Again thank you for reviewing my code 🙏

  0

  

  P

  j5•2,290

  @jmnyaregaPosted over 3 years ago

  @tamoroso You may be right, but your code can get out of hand pretty quickly, my recommendation applies well when working with bigger components, but I think it is fine in this case.

  For example, the button & the card will be independent blocks despite the button being inside the card[as per the DOM structure].

  Styling the button:

    .button { // your styles }
    .button--ghost { // your styles }
    .button--primary { // your styles } 
  

  Styling the card:

    .card { // your styles }
    .card--sedans { // your styles }
    .card--suv { // your styles }
  

  • I find it useful to separate blocks from elements, it makes my code easier to read without too much nesting.

  • This also means, I can re-use my button component since it is an independent block.

  • Here is a quote from this blog

  BEM methodology doesn’t recommend using elements within elements in class names. You don’t need to resemble the DOM structure in naming. Having one level structure makes refactoring much easier.

  • Sometimes, the layer between blocks and elements can be very thin hence subjective.

  Marked as helpful

  1