Maintaining code base by refactoring styles with class and/or CSS custom properties

[zannain]

Avoid combining element selectors with class or id selectors. This is generally not considered best practice and a better alternative is to just use an id instead if its a unique style.

If it's a common style you can create a specific class for that style and call it in in the HTML

.pd-10 {
   padding: 10px;
}

<div class="pd-10">
    <p>Hello World</p>
</div>
<div class="pd-10">
    <p>Bye World</p>
</div>

This is actually how CSS frameworks such as Bootstrap work!

Alternatively, you can also use CSS variables, these are new to CSS3 but they make it much easier to update a style found in several elements at once because you don't need to do a search for every element that has a certain style.

:root {
    --font-size: 1.75rem;
    --font-weight: bold;
}

h1 {
     font-size: var(--font-size);
}

.className {
    font-weight: var(--font-weight);
}

[xiaobin900114]

Thanks for your advice. I have a concern here. In the previous lessons, it said we should avoid define id in the css file, then I chose to use classes instead. I'm not sure if I remember it correct.