Results Summary Component (HTML/CSS/JS)

Hi there!

This is a great fluid responsive component.

To improve on your html semantically. You can use the section element to separate the result and the summary sections.

For a small component like this one css file should be fine! If you want to start separating css files you should look into using sass and sass partials! It can be easily setup within you projects with a live sass compiler.

Also class naming should be done using '-' and not '_'. This is called hyphen delimited string and is the standard convention for class naming in html and css.

Other than that its a great second solution!

Hello Pavle, I think you did a great job.

Regarding your question, you don't need to divide your CSS file into multiple files since most modern servers are minifying and compressing the CSS file on the server side. You can use Netlify or Vercel as your host which both offer this feature.

One common practice is to create all the media queries in a separate file and @import it in your style.css or main.css file. You can also inject CSS with javascript for the elements that you are dynamically creating. For bigger applications, you can use a framework such as React or VUE which gives you the opportunity to create individual components and write specific styling for each component in a separate file. For example, you can create a card component and use that multiple times over your project.

All that said, I think you are doing a great job, and can't wait to see your next project.