Lightweight basic CSS style sheets.

If you get tired of setting up a comprehensive styling scaffold, you may try returning back to this primitive styling ways.

• Simple Style Light theme

  
  
• Simple Style Dark theme

  
  

See the releases.

yarn add styled-css-base (or npm/pnpm)

import 'styled-css-base/presets/simple/index.css';

@import "styled-css-base/presets/simple/index.css";

<link rel="stylesheet" href="https://unpkg.com/styled-css-base/presets/simple/index.css">

import 'https://unpkg.com/styled-css-base/presets/simple/index.css'

@import "https://unpkg.com/styled-css-base/presets/simple/index.css"

Add HTML attributes [data-prefers-color-scheme-auto], [data-prefers-color-scheme-light], [data-prefers-color-scheme-dark] to themify its children elements.

<div [data-prefers-color-scheme-auto]>
    <button>Ok</button>
    <button>Cancel</button>
</div>

• [data-prefers-color-scheme-auto]: switch theme by user's system preference.
• [data-prefers-color-scheme-light]: force using light theme.
• [data-prefers-color-scheme-dark]: force using dark theme.

Considering these styles only use the CSS tag selectors, if you care about isolating them from other page's stylesheets, it's recommended to use the CSS preprocessors or the shadow DOM.

The CSS Descendant combinator can scope our styles and we recommend nesting the styled-css-base by these common CSS preprocessors:

scss:

.showcase {
    @import "styled-css-base/presets/simple/index";
}

less:

.showcase {
  @import "styled-css-base/presets/simple/index";
}

or:

.showcase {
  @import (less) "styled-css-base/presets/simple/index.css";
}

stylus:

.showcase {
    @import "styled-css-base/presets/simple/index";
}

Style Encapsulation is the built-in feature of Shadow DOM.

// Apply external styles to the Shadow DOM
const linkElem = document.createElement('link');
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('href', 'https://unpkg.com/styled-css-base/presets/simple/index.css');

// Attach the created element to the Shadow DOM
shadow.appendChild(linkElem);