Mobile first job listing site with filtering

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Hi this looks really nice but there are some important learning points here

  • make sure the js generated markup is still semantically meaningful. The structure on this is lost
  • no need for an empty header on a page
  • order of imports really matters in sass. It should be variables/reset first
  • it’s very unusual to organise sass files like this. There are different ways to do it and it’s hard on such a small project that isn’t a full website… Usually I’d recommend at least organising component styles into one file per component (named with the component name). This is even easier if you’re using BEM as you can start a new file for each block as a general rule
  • be careful nesting scss where the element part of the class name is nested underneath the block part. There’s nothing inherently wrong with doing it that way but I can tell you from years of experience that this on larger projects makes the scss really unwieldy, hard to read and hard to debug. A good rule for this is to only nest pseudo elements, pseudo states, media queries and direct sibling selectors where necessary. You may need to repeat the block part of class names, but your css will be so much easier to read. Just an idea.

  Good luck with this and the next one

  1

  ---

  

  Yemisrach•1,430

  @Yemisrach15Posted almost 3 years ago

  @grace-snow Thanks for the feedback Grace 🙏🏾.

  • Can you suggest any resource for learning the semantics?
  • Whoops. I forgot to delete that.
  • I thought I imported variables/reset first. On which file do you mean?
  • Yeah what you suggested is a better approach. I'll try applying it.

  0