Skip to content
Submitted 8 months ago

use sass to implement social links profile

perterHUAN•250
@perterHUAN
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

empty

What challenges did you encounter, and how did you overcome them?

empty

What specific areas of your project would you like help with?

  1. What class names should we choose?

    • Should it be .card or .social-links-profile?
    • Should it be .address or .card__address or social-links-profile__address?
    • ...

  2. How should we write selectors?

    • Should it be .social-link or .social-links .social-link? Do we need a descendant selector here?

  3. How should we set the size of this card?

    If only setting the max-width, the final width of the card would be the minimum value between its content width and max-width. That means, the width of ... (which is the widest among the card's child elements) should theoretically match the content width of the card. However, according to the design mockup, the social links below seem to extend beyond this width. Could this be achieved by using a negative margin-left value?

  4. The background color for the social links is not specified in the style-guide.md. Can it be derived by changing the opacity of another provided color?

  5. According to the design, there are various spacings between sibling elements. How should these spacings be set up?

    • Setting the margin-bottom of the preceding element.
    • Setting the margin-top of the following element.
    • Setting both the margin-bottom of the preceding element and the margin-top of the following element.

I am more inclined towards the third option because it explicitly expresses the spacing of each element relative to other elements. Although the first two methods can achieve the same visual effect, they do not clearly demonstrate the individual contribution of each element to the spacing. If we were to insert another element between them, those approaches might cause issues.

Community feedback

  • Grace•31,270
    @grace-snowPosted 8 months ago

    This looks really good, but you're making one fundamental (and very common) error in the sass. When you write css using a preprocessor, the end css should look no different to if you'd written the css from scratch. Hopefully you know about CSS specificity and why it's considered so important to keep specificity low/flat. We should be using single class selectors as much as possible, avoiding nested selectors. Take a look at my post on best practices with nesting

    The only other issue I see in this is a serious accessibility one — outline has been removed from the links without adding a new focus-visible outline in. That would be a WCAG failure because some users would now not be able to identify what is focused.

    Marked as helpful
    1
    Grace•31,270
    @grace-snowPosted 8 months ago

    In answer to your questions

    1. Choose whatever naming approach you like. One of the examples you've used there is BEM which has its merits and some drawbacks, just like any other approach.
    2. Dont nest selectors if you can avoid it. Single class selectors are almost always preferable.
    3. I'm not sure I understand. Usually you'd use width 100% and a max width in rem. There should definitely be no negative margins in this.
    4. I don't know without seeing the figma file.
    5. This is down to personal preference. If a flex column you'd use gap. Otherwise I'd usually only use margin top. You might like to google "the lobotomised owl selector" which is another approach using margin top.
    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord