effcss v2.0.2

Effcss is a self-confident CSS-in-JS library based only on the browser APIs.

Some features

• zero-dependency
• framework agnostic
• runtime stylesheets generation
• built-in BEM support
• server-side rendering compatible

Links

• Docs (in development)
• Repository
• Github mirror

Use with

• React
• React SSR
• Svelte
• Svelte SSR
• Vue
• Preact
• Qwik
• Solid js
• Lit
• Angular
• HTML only

Try with

• Storybook
• Vitest benchmarking

Installation

Type in your terminal:

# npm
npm i effcss

# pnpm
pnpm add effcss

# yarn
yarn add effcss

Quick start

First you need to connect the <style-provider>. One script is all it takes:

  <script src="https://unpkg.com/effcss/dist/build/define-provider.min.js" crossorigin="anonymous"></script>

Then you only need to create the necessary styles before rendering. The easiest way to do this is via the createDispatcher:

main.js

import { createDispatcher } from "effcss/utils/browser";

const styleDispatcher = createDispatcher();

const root = createRoot(document.getElementById('root'));
root.render(<App css={styleDispatcher}/>);

App.js

import { useRef } from 'react'

const cardStyle = {
  c: {
    // block
    _: {
      display: 'flex',
      justifyContent: 'center'
    },
    // element
    __logo: {
      padding: '2em'
    },
    // boolean element modifier
    __logo_c_: {
      color: '#888',
      ':hover': {
        color: 'black',
      }
    },
    // element modifier with value
    __logo_sz_lg: {
      width: '5rem'
    },
    // ordinary CSS
    '.square': {
      aspectRatio: 1,
      ':focus': {
        aspectRatio: '1/2'
      }
    },
    body: {
      boxSizing: 'border-box'
    }
  }
};

export const App = (props) => {
  const { css } = props;

  const attrsRef = useRef();
  if (!stylesRef.current) {
    const cardCSS = css.use(cardStyle);
    attrsRef.current = {
      // just block selector
      block: cardCSS()(),
      // element with modifiers
      logoMod: cardCSS('logo')({
        c: '',
        sz: 'lg'
      }),
    };
  }
  const styles = attrsRef.current;

  // apply attributes to appropriate nodes
  return <div {...styles.block}>
    <div {...styles.logoMod}>
      ...
    </div>
  </div>;
}

That's all. Enjoy simplicity.