Design comparison
Solution retrospective
empty
What challenges did you encounter, and how did you overcome them?empty
What specific areas of your project would you like help with?-
What class names should we choose?
- Should it be
.card
or.social-links-profile
? - Should it be
.address
or.card__address
orsocial-links-profile__address
? - ...
- Should it be
-
How should we write selectors?
- Should it be
.social-link
or.social-links .social-link
? Do we need a descendant selector here?
- Should it be
-
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 negativemargin-left
value? -
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? -
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 themargin-top
of the following element.
- Setting the
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-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 helpful1@grace-snowPosted 8 months agoIn answer to your questions
- 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.
- Dont nest selectors if you can avoid it. Single class selectors are almost always preferable.
- 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.
- I don't know without seeing the figma file.
- 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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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