
Recipe Page using semantic elements, custom CSS properties, Sass, BEM
Design comparison
Solution retrospective
I'm most proud of the number of problems I solved in this challenge:
-
I coded a border for all the table cells but the last one
-
I aligned the cells to match the design provided
-
I coded spacings for the table cells.
-
I styled the lists. Especially the bulleted lists. I controlled their size and color.
And I did all these using the :not(:last-child) and :mark selectors, and the Sass nesting and mixin functionalities.
I'm so proud of myself and skills!
What challenges did you encounter, and how did you overcome them?No challenges. I know my onions about styling in CSS
What specific areas of your project would you like help with?None. But any feedback on my code structure, organization, and semantic elements choices would be appreciated
Community feedback
- P@DasaruPosted 2 months ago
Nice solution. One thing I would suggest using is CSS At-Rules such as @font-face and @media. Font-face is an alternative way to link fonts directly into your project as opposed to linking via CDN. Media queries are also a great way of making your page responsive for different sized devices such as mobile, tablet, and desktop.
It's also worth noting to be careful of overusing the :not pseudo-class as it can increase the specificity of the CSS rule.
1@shakirbakarePosted 2 months agoThanks Dasaru.
I stopped using the @font-face style rule when for some reason it's not working in my code. I'll stress about it later and update my code. I didn't want that to affect the time I spent on the solution.
I left out media query because the solution responds nicely without it.
About the over usage notice, do you mean the :not or the :not(:last-child)?
I used the :not(:last-child)
Again, thanks for the feedback and suggestions. I really appreciate them
1P@DasaruPosted 2 months ago@shakirbakare
About the specificity thing, now that you mention it, you are using
:last-child
and I'm not sure how that effects specificity. It might act similar to a normal class. I'd need to test it.With normal ids and classes:
HTML
Let's say you have two divs:
<div class="item first">first</div> <div class="item second">second</div>
CSS
div { width: 100px; height: 100px; margin: 20px; } .item:not(.second) { background-color: orange; } .first { background-color: red; } .second { background-color: lightblue; }
In this example,
.item:not(.second)
will always have higher specificity than.first
and the background color of the first div will always be orange.The reason why you need to be careful is that in the future you may want to change the color of
.first
. It may be hard to debug why your styles aren't updating if.item:not(.second)
is located elsewhere in your CSS file.Marked as helpful1@shakirbakarePosted 2 months ago@Dasaru
Thank you for taking the time to explain all that. Now, I get your advice.
I'd also like to know your thought after testing the :not(:last-child) selector.
I like your mind. I've followed you. Let's connect!
0
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