Typically, I construct websites using Next.js along with external CSS files for compiling from SCSS to CSS, or static/CMS based sites/modules/plugins with Gulp handling the compiling process.
However, this approach leads to all CSS being included on every page, regardless of whether it is used or not, thus increasing the overall page size.
To address this issue, I have developed a "base" framework containing various styles that can be selectively applied based on browser width using a mobile-first approach.
.hide { display: none; }
@media (min-width: $vsmall) { .hide-vsmall { display: none; } }
@media (min-width: $small) { .hide-small { display: none; } }
@media (min-width: $medium) { .hide-medium { display: none; } }
@media (min-width: $large) { .hide-large { display: none; } }
@media (min-width: $vlarge) { .hide-vlarge { display: none; } }
To utilize a specific class like hiding content on medium breakpoints and above, I would do something like this:
<div class="hide-medium">My content</div>
Although I prefer not to use external stylesheets out of habit, I am open to exploring alternatives such as internal or inline styles if they are considered acceptable in modern web development.
The challenge lies in efficiently incorporating only the necessary CSS from the base SCSS files into the final output, whether as external files for the whole site or internal styles specific to individual pages.
Ultimately, my use of custom frameworks stems from a desire for minimalistic CSS tailored to my needs, as opposed to larger frameworks like Bootstrap which may introduce unnecessary bloat.
Therefore, the key question remains: How can I streamline the process to compile only the required SCSS into external files for the entire site or generate page-specific CSS for internal use?
Thank you