Community feedback

• 

  Mahdi Aljaza'iri•250

  @MahdiAljazairi

  Posted over 2 years ago

  @steeven509 Now have I figured out why this isn't working! And tbh, it's kinda embarassing 😅

  The :hover pseudo-class must be put after .card__img, not ::before! Just like this:

  .card__img:hover::before { ... }
  

  Why? Because, according to the spec, pseudo-elements (like ::before) can't have pseudo-classes (like :hover). So you have to apply :hover to an actual element (like .card__img) for it to work.

  For that reason, the selectors in main.scss should be arranged like this:

  .card {
    ...
    &__img {
      ...
      &::before {
        ...
      }
      &:hover::before {
        ...
      }
    }
    /* rest of the selectors.. */
  }
  

  13

  Marked as helpful
• 

  Mahdi Aljaza'iri•250

  @MahdiAljazairi

  Posted over 2 years ago

  Hi There! I have spotted some flaws in main.scss:

  • In line 62, the ampersand was placed incorrectly:

    :hover &{
    

    Then the output in style.css was:

    :hover .card__img::before {
    

    Which caused the ::before to appear wherever you hover on the page.

    It's no big problem, though. Just put the ampersand before :hover and thats it!

  • The font weight for .ethereum should be bold.

  • In line 94, there is .card__data-info instead of just &-info. For which the output in style.css was:

    .card__data .card__data-info {
      ...
    .card__data .card__data-info .ethereum,
    .card__data .card__data-info .clock {
      ...
    /* and so on.. */
    

    This has added an unnecessary layer of specificity. It won't break the webpage. But in terms of reusability, it might make changing the styles of this part a bit more difficult further in the code --say, in a media query, for instance. Not to mention that this actually kills the purpose of using BEM in the first place!

  Now, as well as the above, I have some suggestions for overall improvement:

  • Since you're already using Sass, why not make use of Sass variables ($xxxx), instead of CSS custom properties (--xxxx)? As long as you don't intend to alter the values of these variables via Javascript, Sass variables are the best option because they are compiled into their actual values in the output file.

    Also, CSS custom properties are not supported in Internet Explorer. So if you want users that --are forced to-- use IE to be able to view your website, this is another reason to prefer Sass variables.

  • There is an element called <hr>, short for 'Horizontal Rule'. It is used to make a break in the flow of content. Its effect isn't only visual --as you can always change how it looks like. It also gives assistive technology a hint to announce to their users this break in the content.

    This element could be used in this project for the line that seperates the author's info from the rest of the component.

  That's about it! I hope it was helpful. And as they say: Happy Coding!

  11

  Marked as helpful