CSS Layers

Kelp uses CSS layers to control cascade order and scope CSS to the UI library.

• kelp. The parent layer for the library. Code outside this layer will take priority, making it easier for you to override Kelp with other libraries.
• kelp.theme. Use this layer to override default theme styles.
• kelp.extend. Use this layer to add new features and styles to Kelp.
• kelp.overrides. Use this layer to override existing Kelp styles.
• kelp.effects. Use this layer to add or override state-based effects (like :hover or :active).

Using CSS layers means you can load your files in any order you want, prevents unexpected side-effects when adding customizations, and lets Kelp work without any build step.