Can SCSS be compiled into CSS specifically tailored for external use on a website or internal use on a specific page?

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

Answer №1

Consider utilizing tools such as PurifyCSS or UnCSS.

These helpful utilities will scan through your HTML documents and isolate the CSS selectors that are actively being utilized, removing any unnecessary CSS in the process.

It's worth mentioning:

The size of Bootstrap CSS has been minimized to avoid potential performance problems, making it a more streamlined choice for your website.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the recommended method for choosing text colors when creating GUI for app development?

Currently preparing PSDs for the development of both an iOS and Android app. When it comes to coloring text, should I: 1) Utilize #000000 for black text, adjusting opacity to achieve various shades of gray for primary and secondary text? 2) Or opt for a ...

Achieving consistent sizing for React-Bootstrap cards: A guide

In my React app, I am utilizing React-bootstrap and specifically the Card & CardGroup components. I need assistance in ensuring that all the cards have the same height. JSX component: <Card style={{flex: 1}} className="card"> ...

Creating a perpetual loop animation for two divs moving from right to left endlessly

Here is the code I have: HTML <div class="screen screen1"></div> <div class="screen screen2"></div> CSS .screen{ width: 100%; height: 50%; position: absolute; background-color:#001; background-image: radial- ...

Client-side rendering for NextJS server components is also supported

I am currently working with Material UI v5.11.16 in a nextjs environment using v13.3.0. I followed the official documentation setup for my nextjs project which can be found here. So far, I have successfully integrated Material UI components without having ...

Angular CSS: ng-style applied to only one side, the other remains unaffected

I am working on an Angular application that requires a split screen with two halves, each displaying the same array values. The width and height values are set using a service and accessed by a controller. The style is applied using ng-style in the DOM. Ho ...

Resolving NextJS multi-language next-intl hydration glitches

I am encountering some hydration errors after setting up multi-language support in NextJS 14 using next-intl. I followed the official documentation but still facing issues! Created i18n.ts Updated next.config.mjs Created middleware.ts Created [locale] fol ...

Display only the labels of percentages that exceed 5% on the pie chart using Chart JS

I'm currently diving into web development along with learning Chart.js and pie charts. In my project, the pie chart I've created displays smaller percentage values that are hardly visible, resulting in a poor user experience on our website. How c ...

When the mouse hovers over, alter the background color with React

Currently attempting to adjust the background color of a Grid section when the mouse enters. I've made some progress, but now I seem to be stuck. My current approach involves calling a function to update the background color on mouse enter. const [isS ...

Adjust div height to match the dynamic height of an image using jQuery

I'm facing an issue with my image setup. It has a width set to 100% and a min-width of 1024px, but I can't seem to get the 'shadow' div to stay on top of it as the window size changes. The height of the shadow div also needs to match th ...

Ways to apply distinct styles to various ids and common classes

When dealing with multiple IDs such as id1, id2, and id3 that share common classes like .selectize-input and .select-dropdown, it can become cumbersome to set styles individually for each ID. Instead of writing: #id1 .selectize-input, #id2 .selectize-inp ...

Styling a specific element in Svelte without needing a globally unique identifier

How can I target just the outer div using a css selector? <div> <div>...</div> <div>...</div> </div> <style> OUTER.DIV.ONLY { background: url(outer.png); } </style> Alternatively, I& ...

JQuery hover effect for dynamically added elements

Currently, I am working on a webpage that will trigger an ajax call upon loading. The response data in JSON format will be processed and the elements will then be added to the DOM as shown below: $.ajax({ type: 'POST', url: "http://mysite.de ...

What is the reason that object-fit does not affect the width or height?

I am facing an issue with an image in a div where the image is not resizing properly when using object-fit: contain. The width of the image remains unchanged, causing padding to appear around it. https://i.stack.imgur.com/D0wym.png Is there a way to make ...

Excess gap detected in dual-column design

Exploring HTML once again, I'm currently working on creating a 2 column layout that doesn't rely on floats in order to maintain the natural document flow. Most solutions I've come across involve floats or tables, which I want to avoid. I als ...

Can someone please provide me with a Javascript code snippet that accomplishes the same function

<script> document.addEventListener('DOMContentLoaded', function () { const menuItems = document.querySelectorAll('.headmenu li'); menuItems.forEach(function (menuItem) { menuItem.addEventL ...

Transforming JavaScript code with Liquid inline(s) in Shopify to make it less readable and harder to understand

Today, I discovered that reducing JavaScript in the js.liquid file can be quite challenging. I'm using gulp and typescript for my project: This is a function call from my main TypeScript file that includes inline liquid code: ajaxLoader("{{ &ap ...

Tips for adjusting the item count in mat-autocomplete

For quite some time now, I've been attempting to adjust the number of items in a mat-autocomplete without any luck. My project involves using material.angular.io Below is a snippet of my code import { Component, OnInit } from '@angular/core&a ...

The navigation bar vanishes from sight while scrolling underneath other sections

UPDATE: Problem solved! I discovered that the 'overflow:hidden' inside the #main for the media query was causing the navigation to disappear. I have a scroll navigation positioned at the top of my webpage. However, as I scroll down, the navigati ...

Changing the line spacing of label elements in HTML forms

I am encountering an issue with my form where the spacing between the two lines of the <label> element is too large and I am unable to adjust the line-height. For reference, I have applied the same CSS styles to a <label> and a <p>. Surp ...

Stop the border from curving along with the container's border radius

Currently, I am working on a tabs component that features a container with border radius. When a tab item is selected, it should display a bottom border. However, I'm facing an issue where the border curves along with the border radius instead of rem ...