CSS selector or CSS classNames? [closed] - css

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 days ago.
Improve this question
Is it preferable to use selectors or classNames for nested code in CSS? In the example below, where there are parent divs with text inside, is it better to just use selectors to style the children? Or should they have classNames? Does it matter? And if it matters, is it because of readability/clean code, performance/optimization or something else?
Example 1 - using className:
Html
<div className="flexbox-parent">
<div className="flexbox-header">
<h1 className="primary-title">Title</h1>
</div>
<div className="content">
<h3 className="tertiary-title"> Tertiary title </h3>
<p className="text-content"> A paragraph with some text</p>
<br/>
<p className="text-content"> A paragraph with some text</p>
</div>
</div>
Css
.flexbox-parent {
display: flex;
justify-content: center;
.flexbox-header {
display: flex;
justify-content: center;
.primary-title {
font-size: 2rem;
color: grey;
}
}
}
Or example 2 - using selectors:
Html
<div className="flexbox-parent">
<div className="flexbox-header">
<h1>Title</h1>
</div>
<div className="content">
<h3> Tertiary title </h3>
<p>A paragraph with some text</p>
<br/>
<p>A paragraph with some text</p>
</div>
</div>
css:
.flexbox-parent {
display: flex;
justify-content: center;
.flexbox-header {
display: flex;
justify-content: center;
h1 {
font-size: 2rem;
color: grey;
}
p {
font-size: 0.8rem;
color: green;
}
}
}
Which is better?

Answer 1

One thing I would say, is that you should read up on specificity within CSS. Try to avoid nesting classes at all costs.
There isn't really a wrong or right way of doing what you want to achieve, it'll be opinions, but read here: https://css-tricks.com/specifics-on-css-specificity/
It'll help you avoid running into problems later.