CSS Layering

One important aspect of utilizing our CSS, is to ensure that the ordering is correct. This will ensure that styles are applied correctly.

From time to time, you may need to override some of our CSS to make adjustments, one solution for ensuring that your CSS is applied correctly is to use CSS Layers. CSS Layers Full documentation.

CSS layers will have define the order of precedence when you are applying multiple different stylesheets

Basic Example

Here is a basic example of using CSS Layers in conjunction with our CSS.

For the sake of this example, I have added three layers.

• base: Root styles that are applied first
• designsystem: Our internal Design System styles
• overrides: CSS Overrides that you want to apply

These names are not important, you can name your layers however you would like.

globals.css

@layer base, designsystem, overrides;

@import "@cfa/react-core/dist/index.css" layer(designsystem);

@layer base {
  html,
  body {
    padding: 0;
    margin: 0;
  }
}

We are importing the CSS from react-core as part of the designsystem layer, this should allow your custom CSS to take precedence.

Now, when you are writing your standard CSS, you can either use the overrides layer, or just write standard CSS, and it should take precedence

CustomComponent.module.css

@layer overrides {
  .customButtonClass {
    background-color: aqua;
  }
}

/* OR */

.customButtonClass {
  background-color: aqua;
}

Based on the above layers, the precedence would be as follows.

1. Unlayered
2. overrides
3. designsystem
4. base

One plus to having an overrides layer, is that you can have your Design System overrides easily distinquished from your regular app CSS. This might help with maintenance later.

You can find more extensive documentation on the layer priorities here

PostCSS Config

One note here, usage of @import like this in your CSS files might require you to add a postcss.config.mjs file into your project. For example, this is what it would look like in NextJS.

npm install postcss-import -D

postcss.config.js

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    "postcss-import": {},
  },
};

export default config;

If you already have a postcss.config.js, then you can just add this new plugin.