Design comparison
Solution retrospective
Feedbacks would be appreciated
Community feedback
- @vanzasetiaPosted almost 2 years ago
Hi, Ikechukwu! 👋
First, remove the
remixicon.css
. The site doesn't use it at all. I took a look at the Coverage tab in Chrome DevTools and discovered thatremixicon.css
is 100% not being used. So, remove it.Then, I suggest formatting the code to improve readability. It is much easier to read code that has a consistent format. You can use Prettier or even your code editor might be able to do it for you.
Some more suggestions:
<span class="heading">Order Summary</span>
Use heading tag.- The "Proceed to Payment" button should have
type="button"
. It is not a submit button since there's nothing to be submitted. Usually, submit button is used when the button is inside theform
element. - Use single class selectors for styling whenever possible. Currently,
main.css
has very high specificity.
I hope this helps! Happy coding!
Marked as helpful0@Aikaykalu17Posted almost 2 years ago@vanzasetia Thank you for your feedback In regard to "Single class selector" , you're saying i should style like this when possible ".profile-card" instead of ".main-container .main .profile-card" right?? Explain further what you mean by main.css has a high specificity Thank You
0@vanzasetiaPosted almost 2 years ago@Aikaykalu17
You are welcome!
The example that you gave is what I meant about single-class selectors. From the
main.css
, I notice.main-container .main .details .select .audio-text .audio-sec
. That only needs to be.audio-sec
.High specificity stylesheet means that there are high-specificity selectors. Like the example that I give before. It makes the stylesheet hard to maintain especially on a larger project because it makes overriding styling harder.
So, when you need to override the styling of the
.audio-sec
, you need to make sure that it has the same amount of specificity. Otherwise, the styling won't get applied. Also, since it is CSS, there won't be any error messages. It can be frustrating when things don't work as expected.Marked as helpful0
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