Mobile first using Sass and CSS grid with extra JS behaviour

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Your BEM looks really good and it is exactly BEM methodology. Your not meant to nest selectors in BEM, so this is spot on.

  Since moving jobs I have adopted a different approach to scss with BEM and I find this even easier to read and work with now. We don't nest in the middle of names using the pattern of

  .block-name {
    // block styles here 
  
    &__element {
      // element styles here 
          // nested states or media queries here... 
  

  Instead, we include the whole class name each time and only nest things like media-queries, pseudo elements, hover and other states as a general rule. Sometimes we will nest a class but this isnt often. It looks like this

  .block-name {
    // block styles here
    
    // @ nested media queries 
    // or nested states/pseudos like &:focus or &:before
  
    &.is-open {
      // rare that we use compound classes like this
    } 
  } 
  
  .block-name__element {
    // same pattern as for block
  
    .is-open & {
      // a way to nest a parent selector but keep it with the element it affects. It's saying 'if class is present on a parent, do this to this element' 
    } 
  } 
  

  The css output is the same either way so it really makes no difference. I have been surprised though, after 7+ years writing scss as you have here how easy a shift this way has been. I do find it easier to read and easier to do searches in the code for whole class names

  Sorry, lots more ideas there. I hope that's helpful nit confusing!

  2

  ---

  

  Agata Liberska•3,995

  @AgataLiberskaPosted almost 4 years ago

  @grace-snow No, it's definitely helpful. Thank you for that last selector combination, I didn't know it before and it will make things a lot easier :)

  0
• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi, If youre wanting to make whole cards clickable theres a small css solution for that. Its always better to use a css solution if one is available, as its waaay better for performance.

  How to do it:

  1. Make the card position relative
  2. Add a pseudo element to the link within the card
  3. On that pseudo: empty content, display block, height 100%, width 100%, top 0, left 0, z-index -1

  Your card is now focasable and clickable as that link.

  The other benefit is it allows you to have things like focus or hover states which are still visible to mobile users. It can be disorientating if you are navigated away from a site on first tap of something like a card that doesn't look clickable/like it contains a link.

  Hope this helps for next time

  2

  ---

  

  Agata Liberska•3,995

  @AgataLiberskaPosted almost 4 years ago

  @grace-snow thank you, I'll keep this in mind! But will that work if there are other links within the card? To be fair, if there were more links I would have UX concerns anyway - I think it would be confusing. But I saw that CSS tricks article and was doing a project with cards in it, so I couldn't not try :)

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  @AgataLiberska if there are multiple links in a card, the card definitely shouldn't be clickable, the links would need to look clickable instead.

  0
• 

  Cristian•100

  @CrisCaGoVePosted almost 4 years ago

  i'm working on the same design and i loved this one!!! question, i noticed the design has 3 different transitions depending on the screen size being one of these different than the phone and desktop designs given. why did you decided it to be like that? is that so the info on the design is doesnt change much between the different designs?

  0

  ---

  

  Agata Liberska•3,995

  @AgataLiberskaPosted almost 4 years ago

  Just a personal choice, what I thought would look good. If someone was to view the page on a tablet, there's not enough space for three columns, but you don't want too much empty space with tiny cards in the middle, because it's harder to read and use, and you don't want the cards stretched too much either, because (at least in this case) they don't look great. I'm not a professional, but I watched Jessica Chan's video course on youtube, and in it she said that you normally get a mobile and a desktop design and have to figure a tablet design on your own, it's a good thing to keep in mind :)

  0

  

  Cristian•100

  @CrisCaGoVePosted almost 4 years ago

  @AgataLiberska Love it, thanks! I’m new at all this and I learned a lot by checking your code out!

  0

  

  Agata Liberska•3,995

  @AgataLiberskaPosted almost 4 years ago

  @CrisCaGoVe Same, it's really helpful! I also definitely recommend that video Jessica made, I learnt so much from it. The full thing is on Free Code Camp channel and it's over 5 hours long, and it's also on her channel Coder Coder in smaller chunks :)

  0