Creating a Framework for CSS Project-Wide Variables

Having experience in mobile development, I am accustomed to using a shared stylesheet that sets the basic styles for the entire project. In Flutter, this would be translated into CSS as follows:

:root {
    // Setting spacing values
    sizeSm: 8px; // or rem/etc
    sizeMed: 16px;
    ...

    // Defining corner radius
    cornerSmall: 8px
    cornerBig: 32px;

    // Additional properties like box shadow, strokes, animation durations, colors, etc.

}

When embarking on a larger project, it seems logical to establish this common styling to maintain consistency across all pages and components. However, upon further exploration, this practice seems less common than expected.

While there are approaches like class styling (such as Tailwind) and component libraries (like MaterialUI) that provide pre-built components, they address different needs and do not negate the necessity of a unified CSS style definition.

As a newcomer to web development, I wonder if my perspective is skewed. Although this question may not have a definitive answer, any insights on whether my approach is misguided would be greatly appreciated. I aim to lay the groundwork for our project, so best practices are encouraged!

PS: Our project utilizes NextJS in conjunction with CSS modules - (aimed at large-scale implementation)

Answer №1

If you're embarking on a significant project, starting with SCSS could be the way to go.

Breaking down your CSS into smaller, more manageable SCSS files makes maintenance a breeze. Begin with _reset.scss where you gather all necessary resets for your project (user agent, frameworks, etc.). Then create your _config.scss file where you define your root variables like in this instance:

:root {
  // Breakpoints
  --bp-sm: 35em;
  --bp-md: 48em;
  --bp-lg: 62em;
  --bp-xl: 92em;

  /* Fonts */
  --font-primary: "Raleway", sans-serif;
  --font-secondary: "Libre Bodoni", serif;
  --font-cursive: 'Black Ops One', cursive;;

  /* Sizes */
  --container-width: 95%;
  --container-max-width: 1366px;

  --header-height: 75px;
  --scroll-offset: 75px;
  --footer-height: 50px;
  --line-height: 1.4;
  --spacing: 1.25em;

  @media (min-width: $bp-md) {
    --spacing: 1.5em;
    --line-height: 1.5625;
  }
... and so forth...

You can then utilize your variables like var(--font-primary)

How you structure your SCSS is up to you, but always keep it organized in small, logical files. The SCSS compiler will consolidate everything into one cohesive CSS file.

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

How can I alter the image using the success function in jQuery?

I'm encountering an issue with my jQuery voting script. Everything seems to be working correctly, except for the fact that the image in the success function of the AJAX request is not updating as expected. jQuery: $("a.vote_down").click(function(){ ...

What sets iron-session apart from next-auth?

What are the advantages of using iron-session over next-auth? Does next-auth support traditional username/password log-in as well as Social log-ins, whereas iron-session only supports the former? ...

Struggling to get the Content Security Policy (CSP) to function properly within Next.js

I have been working on a NextJS project and I am currently facing a challenge in setting up secure headers in the next.config.js file of my project. I have attempted various solutions found online, but unfortunately, none of them seem to be working for me ...

What is causing the cleanup function of useEffect to unexpectedly close a modal in Next.js?

I am currently working on implementing a modal dialog feature using the latest version of Next.JS (version 12.3.1). My goal is to have the modal open immediately, display a loading message while a request is being made, and then show the result of the requ ...

Creating aesthetically pleasing and flexible rows with left-floated div elements of varying heights

I need to arrange a series of elements in rows that look like tables, with fixed width but variable height determined by the content. Each element is set to float left and have the same width value. The issue I'm facing is that sometimes the elements ...

Adjust the text size of Twitter Bootstrap on mobile screens

I recently started using Twitter Bootstrap. I am currently hiding certain <tr> elements on phone screens by utilizing the class="hidden-phone". However, I am now looking to resize the displayed text to better fit the screen. Is there a way to adjus ...

Is it possible to utilize the Linear-gradient property for creating a vertical background color effect?

I'm currently attempting the following: body { height:100%; background: -moz-linear-gradient(left, #DB2B39 50%, #2B303A 50%); background: -webkit-linear-gradient(left, #DB2B39 50%,#2B303A 50%); background: linear-gradient(to right, #D ...

Tips for implementing a unique design within a nested component using NextJS App Router

https://i.stack.imgur.com/EaYOG.png Here is the structure of my app router: The root layout must be shared with everyone. However, within the login component, there is another layout.jsx that should not share the root layout but override it and use the l ...

Adjustable height for Material UI tab components

I encountered an issue that I initially thought was related to the general configuration of my app and the height I assigned to my page wrapping classes. However, after creating a simple out-of-the-box material UI tab example, it became clear that this beh ...

Problem with animated text in CSS

I am facing an issue with the code below. It is supposed to display "Dedicated People" when scrolling down, however, it is not working in my browser. Could it be that I forgot to include a reference in the head section? The code works fine in CodePen, but ...

Strapi x Next.js page with slug “/” is failing to display

Currently, I am in the process of developing a website using Strapi and Next.js. This project is based on the restaurant starter provided by strapi. However, I have come across an unusual problem while adding pages to the site... When I create a page with ...

The Google APIs sheet API is throwing an error message stating "Invalid grant: account not found"

I need to retrieve data from a spreadsheet using the Sheet API. After setting up a project in Google Cloud Platform and creating a service account, I granted the account permission to edit the spreadsheet. I then downloaded the credentials in JSON format. ...

SharePoint 2013 on a mobile device does not support scrolling within iframes

Recently, I set up a SharePoint 2013 website with a few iframes. However, when I access the site on my mobile devices (iPad and Android), I am unable to scroll through the entire page by touching within the iframe. I attempted to solve this issue by inclu ...

Wrapping flex items inside a table in IE11: A guide

I am facing an issue with the code (codepen here) that works in normal browsers but not in IE11... I need the cards to be wrapped within the displayed window vertically, without any horizontal scrolling. https://i.sstatic.net/PnxR9.png .table {display: ...

What are the best practices for effectively utilizing Media Queries?

Currently, I am in the process of developing 3 HTML5 responsive websites that will need to be optimized for various devices. So far, I have successfully implemented media queries for smaller devices such as 320px, 375px, 425px, 480px, 768px, and 1024px. H ...

Tips for arranging two columns and two rows on mobile using Bootstrap 5

I'm currently using bootstrap 5, and I need to display 2 columns and 2 rows on my mobile device, but it's only showing 1 row. I have two PSDs for this layout in desktop mode: https://i.sstatic.net/HWG6e.png And for mobile mode: https://i.ssta ...

Creating a Drop-down Menu Item using React Material UI

I am experiencing an issue with displaying a MenuItem in my Dialog2 within my React app. Despite setting the zIndex: 1900 to a higher value than the two dialogs, the MenuItem remains hidden behind the dialogs instead of appearing at the front. Please revi ...

Updating a route in Next.js? Make sure to remove the classList as you

Looking to remove a specific class whenever the route changes in Next.js, I've attempted the following approach: React.useEffect(() => { const activatedLink = router.query.tags const classActivated = document.querySelector('.'+activated ...

Tips for creating a CSS transition that reverses direction

Is there a way to create a hover effect where a border appears at the bottom of an element when it is being hovered over, and then retracts back when the mouse leaves the element? I've managed to get the border to appear on hover using CSS, but I&apos ...

Creating visually pleasing HTML emails with uniform table data heights

Struggling with Outlook while designing an HTML template. My row has 2 td elements with different content, and setting equal heights is proving to be a challenge. The fixed height on the td causes issues when switching to mobile view in Outlook as text wra ...