CSS File Types

The lism-css package ships with several pre-built CSS files for different needs. Swapping which file you import is all it takes to toggle @layer on/off or switch to the full build. Use main.css by default, and switch to another file only when you need to.

Disabling @layer

You can disable @layer by importing lism-css/main_no_layer.css instead of lism-css/main.css. No other configuration is needed.

The @layer-free builds are intended for environments where you have no control over how your styles are prioritized relative to other CSS (the cascade), such as existing sites or WordPress themes. Since layers are not available for ordering, they reproduce the same “Property Class > Utility Class > other classes” precedence as main.css in the following way.

Keep the following in mind when using the @layer-free builds:

• A Property Class wins even if you set the same property via an inline style or JavaScript. To change the value, swap the class itself (for classes that read their value from a CSS variable, such as -p with --p, rewriting the variable also works).
• Overriding a Utility Class in your own CSS requires a specificity of at least .u--trim.u--trim.
• defaultImportant: false in lism.config.js and $default_important: 0 in SCSS are ignored by the @layer-free builds, which always output !important. A per-prop important: 0 in props is ignored in the same way.

Using the full build (full.css)

Importing lism-css/full.css instead of lism-css/main.css gives you a full build that includes classes beyond those in main.css.

import 'lism-css/full.css'; // For the version without @layer, use 'lism-css/full_no_layer.css'

In addition to everything in main.css, full.css includes:

• Breakpoint support classes (such as -ta_lg) for all Property Classes, except the following:
  • Variable-only properties (isVar — these emit only a CSS variable, not a class)
  • Border shorthands (bd and directional variants like bd-x)
  • lh
• Breakpoint support classes for the border sub-properties bds / bdc. Both are variable-only properties, but they are added as an exception (bdw supports breakpoints in main.css already). Responsive borders are handled via sub-properties, not the shorthands.
• Classes for every color token on the color Property Classes (bgc / c / bdc), such as -bgc:red. main.css only outputs classes for a curated set of semantic colors plus keycolor, while full.css covers all tokens including the palette colors.

This makes the CSS larger than main.css, so full.css is intended for use with CSS Purge, which removes unused classes at build time.