Currently in the process of learning SASS and Bootstrap 4, I have set up some .scss partial files and imported them into my site.scss file as required. Making changes to Bootstrap involved modifying my _my-theme.scss file. But now, I'm wondering about the best practice when it comes to making simple CSS changes unrelated to Bootstrap - should they be directly inserted into the site.scss file or placed in the _my-theme file?
For example, if I just need to create a new class like page-title, would it be more advisable to include it in my site.scss file or add it to the _my-theme.scss file? Is there a specific reason for either approach?
I understand that the class should only reside in one of the files, but I'm unsure which one is the ideal placement?
This is how my site.scss looks:
@import "scss/_custom-variables.scss";
@import "bootstrap/bootstrap.scss";
@import "scss/_my-theme.scss";
.page-title {
color: red;
font-weight: bold;
}
And here is a snippet from the _my-theme.scss file:
body {
padding-top: 0px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.page-title {
color: red;
font-weight: bold;
}