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 helpful
@amakura-411
Posted
@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. =)
@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 helpful
