Design comparison
Solution retrospective
This time, I carefully named the class so that it clearly indicates what its contents are.
What challenges did you encounter, and how did you overcome them?I knew about the box-shadow property, but I wasn't sure how to use it.
Therefore, I used MDN to adjust the CSS and create a shadow.
What specific areas of your project would you like help with?In a practical context,
I would like you to check the CSS design and the naming conventions for HTML classes.
Community feedback
- @rupali317Posted 6 months ago
Konichiwa @amakura-411
The naming is very good as it conveys the meaning efficiently! You are using rems for your font sizes. You are also using CSS custom properties in your :root definition. The HTML structure is good as well. Subarashi desu ne!
This is my advice for the following items:
- The dimension of the author's image's is 35px X 35px. I would suggest you convert them to rem because when you alter the browser's font setting to small, the image appears to be big as compared to the surrounding. Whereas for the large font, the image may appear quite small. To scale the image, it is better to use rem
- While for your project you have declared class names, keep in mind that it is better to aim for lower specificity as much as possible. In CSS, lower specificity ensures maintainability, reusability and less specificity wars. To illustrate my point, you have used
<h1 class="blog-title">HTML & CSS foundations</h1>
and you defined your css as.blog-title{...}
. I would just define it as<h1>HTML & CSS foundations</h1>
and in my css i would useh1{...}
instead of.blog-title{...}
. h1 (HTML element) has a lower specificity than .blog-title (a class). Your project just has one h1 so there is no need to define a class with h1. If there were multiple instances of an element like h1 and you need same styling for all of them, then yes, use the class name. It all depends on situations.
Hope the above feedback helps!
Marked as helpful1@amakura-411Posted 6 months ago@rupali317
Thanks for the useful advice!!
As you say, even in images, ‘rem’ is better than ‘px’ .
It's interesting to note that aiming for lower specificity is important in CSS design.
"In CSS, lower specificity ensures maintainability, reusability and less specificity wars"
It’s true that current CSS design works well for simple HTML structure, but with a complex HTML structure, it makes management difficult and results in cumbersome code.
i didn’t know this, I’m glad you told me.
Thank you, I've learned something new. =)
1@rupali317Posted 6 months ago@amakura-411 Glad you found the advice useful.
I want to rephrase my sentence "If there were multiple instances of an element like h1 and you need same styling for all of them," to "If there were multiple instances of an element like h1 and you need same styling for two of them, and another styling for other three instances of h1, then go ahead and use classes".
I realised that for my initial statement, you do not need to use class again if all the instances of h1 have the same styling. Sorry for the confusion
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