How to define CSS common variables for project

Issue

Coming from a mobile dev world, I'm used to having a common stylesheet that defines some of the basics used for the whole project, e.g (that's how I'd do it for Flutter, basically translated to CSS).

:root {
    // Used for spacing: e.g. padding, margin
    sizeSm: 8px; // or rem/etc
    sizeMed: 16px;
    ...

    // Used for corner radius
    cornerSmall: 8px
    cornerBig: 32px;

   // Box shadow
   // Strokes
   // Anim durations
   // Colors
   // etc
}

I'd expect people to do this when starting work on a bigger project to keep their styling consistent across all pages/components. However, the more I look into it, the less I see this.

I understand there are class styling (e.g. how tailwind does it) or even component libraries that provide whole components (e.g. MaterialUI), but to me those solve different issues, and the need for common CSS styling still persists.

As I'm relatively new to web dev, am I completely off here? I understand this question does not have a clear YES/NO answer, but I'd appreciate guidance on whether I'm in the wrong mindset here. I'm trying to establish the foundation for our project, so best practises are welcomed!

PS: Not sure if it matters, but our project is in NextJS along with CSS modules - (large scale project)

Solution

I think the best to begin somewhere (big project!!!) is to use SCSS.

You divide your css in small different logical scss, lot easier to maintain. And you begin by _reset.scss where you put all reset needed for your project (user agent, frameworks...). After you make your _config.scss where you put your root, like in this example:

: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 on...

you use your variable var(--font-primary)

After it's up to you to structure your scss as you want but always in small logical files. SCSS compiler will make one big CSS.

Answered By - pier farrugia