Recipe Page using semantic elements, custom CSS properties, Sass, BEM

Community feedback

• 

  P

  Dallas•120

  @DasaruPosted 2 months ago

  Nice solution. One thing I would suggest using is CSS At-Rules such as @font-face and @media. Font-face is an alternative way to link fonts directly into your project as opposed to linking via CDN. Media queries are also a great way of making your page responsive for different sized devices such as mobile, tablet, and desktop.

  It's also worth noting to be careful of overusing the :not pseudo-class as it can increase the specificity of the CSS rule.

  1

  ---

  

  SHAKIR•90

  @shakirbakarePosted 2 months ago

  Thanks Dasaru.

  I stopped using the @font-face style rule when for some reason it's not working in my code. I'll stress about it later and update my code. I didn't want that to affect the time I spent on the solution.

  I left out media query because the solution responds nicely without it.

  About the over usage notice, do you mean the :not or the :not(:last-child)?

  I used the :not(:last-child)

  Again, thanks for the feedback and suggestions. I really appreciate them

  1

  

  P

  Dallas•120

  @DasaruPosted 2 months ago

  @shakirbakare

  About the specificity thing, now that you mention it, you are using :last-child and I'm not sure how that effects specificity. It might act similar to a normal class. I'd need to test it.

  With normal ids and classes:

  HTML

  Let's say you have two divs:

  <div class="item first">first</div>
  <div class="item second">second</div>
  

  CSS

  div {
      width: 100px;
      height: 100px;
      margin: 20px;
  }
  
  .item:not(.second) {
  	background-color: orange;
  }
  
  .first {
  	background-color: red;
  }
  
  .second {
  	background-color: lightblue;
  }
  

  In this example, .item:not(.second) will always have higher specificity than .first and the background color of the first div will always be orange.

  The reason why you need to be careful is that in the future you may want to change the color of .first. It may be hard to debug why your styles aren't updating if .item:not(.second) is located elsewhere in your CSS file.

  Marked as helpful

  1

  

  SHAKIR•90

  @shakirbakarePosted 2 months ago

  @Dasaru

  Thank you for taking the time to explain all that. Now, I get your advice.

  I'd also like to know your thought after testing the :not(:last-child) selector.

  I like your mind. I've followed you. Let's connect!

  0