As I ponder the best approach to take, I find myself torn between two options and wondering what the 'best practice' in this situation might be.
My objective is to implement a selector that removes the standard global margin of 20px that I have established for typography elements.
Option 1: I could create a global selector class that can be utilized throughout the DOM to achieve the desired outcome:
SCSS
html {margin: 20px 0;}
.no-margin {margin: 0;}
HTML
<h1 class="no-margin">Title here</h1>
<p class=no-margin">Text here</p>
Option 2: Alternatively, I could apply specificity on a more granular level to define these values within the SCSS:
SCSS
html {margin: 20px 0;}
.box {
h1, p {
margin: 0;
}
}
HTML
<div class="box">
<h1>Title here</h1>
<p>Text here</p>
</div>
Therefore, my question revolves around whether it is preferable to have a cluttered SCSS file and cleaner HTML structure without repeated class usage. OR To only specify the SCSS once even if it results in a cluttered DOM?