Working with Modular CSS

Note: This page relates to a deprecated version of C3 AI UI Framework. Beginning with version 7.13, C3 AI Component Library is the supported UI framework.

Styles that you define in the CSS Library can be consumed in two different ways: as a CSS module or as a CSS bundle.

A CSS bundle is a file that contains all the styles needed for a website. If you have used bootstrap, you might know that some CDNs make it available as a single file download like bootstrap.min.css. This bundle can be easily loaded into any HTML page but most applications need styles from lots of different sources and after it has a considerable size, loading it in all pages is no longer desirable.

Another issue that CSS bundles have is that as more styles are included in them, class names and selectors might be used in two different places without intention. This can lead to needing more css to adjust such conflicts without assurances about it never happening again.

Copy link to this section

CSS Modules

CSS Modules provide a way to isolate all styles while still allowing you to reference "global" class names in your dependencies.

To achieve such isolation, all selectors will be considered "local" and have their class and id names replaced by a unique identifier and you will have to import such names into your component implementation to be interpolated into your HTML.

For example, if we create a style for .my-grid:

.my-grid {
  background-color: red;
}

The css will be generated like this:

._1LvhTn_hEGHJvX2ORAhaLI {
  background-color: red;
}

Even if other file is also using .my-grid the generated class names will be different and when imported into your component implementation, you will be able to access them as a variables whose value is the unique identifier as a string. For more information on how to use it see SDL Component Styling.

Copy link to this section

External styles as globals

Often times you will need to include styles from other libraries (like semantic-ui or kendo) where you do not have control over what class names they use in their components. For those cases, you can import and define global styles by using the :global directive.

For example, if there is need to import an external css as a global, you can do it like this:

.c3-sdl-grid {
  :global {
    @import '~@progress/kendo-theme-default/scss/input';
  }
}

With that class definition, any styles imported inside :global will not be changed and the external library (in this case kendo) will be styled with their normal class names. Since we are enclosing the global import inside our own c3-sdl-grid class, we are still ensuring that those globals will not affect any other components outside of c3-sdl-grid.

In some cases you will want to override some of those global styles. To do so, you can target global selectors with :global() but always remembering to enclose such overrides inside our local classes to avoid conflicts:

.c3-sdl-grid :global(.k-textbox) {
  border: solid black 2px;
}