In exercise it is written that it is best practice create separate classes for single element,instead of putting all styles in one class? I have seen on many webpage through inspect element,for a single element they have multiple class e.g font,position etc.My Question is how would I know how many classes would I need for specific element and on what basis developer do separation of classes?Sorry if the question seems to be confusing.Or simply how to make reusable classes

You could create small utility components that you can re-use everywhere in your project.

Say you want to use the font Roboto for all your headings throughout your project. Rather than specifying font-family: "Roboto"; every time, for every single heading, you could just create an utility class that will take care of this and this only.

.roboto {
  font-family: "Roboto";

and use it throughout your HTML.

      <h1 class="roboto">The main heading</h1>
      <p>Some text</p>
      <h2 class="roboto">Some other heading</h2>
      <p>Some text</p>

Or let’s imagine that you want to use lists. Some lists might require a list-type: none, whereas others might not.

You could simply create a small utility class to apply it when necessary:

.nobullets {
  list-style: none;
  margin: 0;
  padding: 0;

It seems to me that large chunks of code for every single selector seems more “intuitive” at first. Structuring your code in a smart way, composed of small re-usable components might be more demanding at first, but then make your life much easier when the project grows big and you need to maintain it. So, small components, and comments whenever something isn’t self-explanatory would be, in my book, what should be considered good practice.

1 Like

Thankyou it was quite helpful.Things gonna be much clear with experience I Believe

1 Like