EffCSS. Quick start

In this article, we will look at EffCSS and how to use it in your project.

Main links

• Docs
• SourceCraft
• GitHub
• NPM
• StackBlitz examples collection

Overview

EffCSS is a self-confident CSS-in-TS library which aims to be a simple tool for creating complex and predictable styles. It creates CSS styles using utilities such as variable, animation, className and so on. Under the hood the library uses the following browser APIs

• CSSStyleSheet API,
• Document adoptedStyleSheets property.

As a result, EffCSS does not require any external dependencies. It works the same way in all modern browsers and with any frameworks. You can try it with StackBlitz - there are a lot of example projects in the collection. Is that enough to interest you?

In fact, there may be several other reasons to try EffCSS:

You want to

• create styles without learning new syntax (and its limitations too),
• use a framework-agnostic tool (without "integrations", really agnostic),
• use styles multiple times with a TypeScript hints and full JavaScript power (without preprocessor or IDE extensions),
• use styles on the server side without additional settings (because EffCSS understands that it is on the server and carefully serializes all the styles).

Did you like at least one? Then let's getting started!

Install

Type in your terminal:

# npm
npm i effcss

# pnpm
pnpm add effcss

# yarn
yarn add effcss

Use

You can create single CSS rule using classname or multiple rules using classNames. classNames is generic and expects you to know what selectors you want to create:

import { className, classNames } from 'effcss';

// simply returns a string with CSS class
export const myContainerCls = className({
    display: 'flex',
    flexDirection: 'column',
    '&:hover': {
        borderRadius: '1rem'
    }
});

// we describe our styles to capture it.
// in EffCSS we call it `contract`
export type MyComponents = {
    /**
     * Card block
     */
    card: {
        /**
         * Is card rounded
         */
        rounded: true;
        /**
         * Height
         */
        h: 'full' | 'half';
        /**
         * Footer
         */
        footer: {
            /**
             * Footer visibility
             */
            visible: true;
        };
    };
    /**
     * Logo component
     */
    logo: {
        /**
         * Width
         */
        w: 's' | 'l';
    };
};

// then we implement the styles by contract
// we get a function that resolves the classnames
export const myComponentsFn = classNames<MyComponents>((selectors) => {
    // all the required selectors come as an argument
    const {card, logo} = selectors;

    return {
        [card]: { /* card styles */ },
        [card.rounded.true]: { /* rounded styles */ },
        [card.h.full]: { /* h = 'full' */ },
        [card.h.half]: { /* h = 'half' */ },
        [card.footer]: {/* card footer styles */},
        [card.footer.visible.true]: {/* visible = true */},
        [logo]: { /* logo styles */ }
    };
});

Please note that CSS property names can be described in camelCase style. And your function can use external values if there is a need.

Then get the required selectors (if you don't have them yet) and apply them to your components:

import { myContainerCls, myComponentsFn } from './styles';

// getting classNames for the card
const cardCls = myComponentsFn({
    card: {
        h: 'full',
        rounded: true
    }
});

export const App = (props: {
    css: IStyleProvider;
}) => {
    // just apply classNames to appropriate elements
    return (
        <div className={myContainerCls}>
            <div className={cardCls}>...</div>
        </div>
    );
};

Simple, isn't it?

As you can see, the selectors are output by EffCSS automatically - you don't need to memorize them, just pass the necessary parameters to the resolver.

This is the whole point of EffCSS - styles can be described as independent resources and applied to any layout.

Explore and use it to the fullest

In fact, there are many more possibilities. To save you time, here are the links to the documentation:

• Guide,
• Server side usage
• Convert CSS to EffCSS.

I will be glad if this tool is useful to you.

Enjoy your Frontend Development!