Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Component

Tedkata 50

@denislavangelov09

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What specific areas of your project would you like help with?

Any tips on writing cleaner and more maintainable code would be greatly appreciated.

Community feedback

geomydas 1,060

@geomydas

Posted

Use a preprocessor such as SASS or a framework such as Tailwind if you want to make more maintanable CSS. I'm not saying preprocessors and frameworks are a must, they are just a matter of preference. You can do large projects with vanilla CSS.

If you prefer Vanilla CSS, see below

Also, you shouldn't always add classes to every html element so that you will be able to style it. You can learn about Combinators and Selectors here:.

Let's say you have this following HTML code

<div class="cta">
<h2> Lorem ipsum </h2>
</div>

<main class='other'>
<h2> Lorem ipsum </h2>
 </main>

Most of the times, you usually put an id or class to the h2 to styles it, but you can use combinators for this and without adding ids or classes

.other h2
 {
/* Style goes here /* 
}

.cta h2  {
/* Style goes here /* 
}


0

Tedkata 50

@denislavangelov09

Posted

@geomydas In my first challenge, I was told the opposite "try to use low specificity first in your css before increasing only if necessary. You can add classes on your different elements to target them directly with a specificity of 10. Try not to style html element directly other then resets or if you are sure its a global style you want to apply on the whole website. It will improve the readability and maintainability of your code. /** examples **/ [x] .card img <--- specificity of 11 [✓] .card__image <--- specificity of 10"

0
geomydas 1,060

@geomydas

Posted

@tedkataa Oh wow! Just learnt a new thing, I was supposed to be helping you but now you helped me, haha. I am wrong

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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