Overview

In this section, we'll look at the basic concepts of EffCSS, compare it with analogues and determine when to use it.

Another CSS-in-JS?

In short - yes. EffCSS is a CSS-in-JS library which aims to be a simple tool for creating complex and predictable styles. The library is based on several abstractions:

• StyleSheet maker is just a JS function that receive an object with utilities as an argument and should return an object or string with styles; utilities contain some usefull functions that generates pseudo selectors, at-rules, BEM selectors etc.,
• Style provider is a custom HTMLScriptElement which process and manage stylesheet makers,
• Style consumer is an object through which your code can interact with the provider. In the browser, this is the Style provider element itself, and on the server, it is its emulation.

It also uses common browser APIs such as

• CSSStyleSheet API,
• Web Components,
• 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.

Main built-in features

• CSS generation on the client - you can use style sheets dynamically on the client via Style consumer,
• CSS generation on the server - Style consumer can serialize its state into an HTML string that can be used for SSR/SSG,
• CSS switching - any generated stylesheet can be switched on/off via Style consumer on/off method,
• theming support - themes can be created/updated/deleted using the theme controller object, which is available from the theme property of the Style consumer object,
• TypeScript powered stylesheets - if stylesheet maker uses TypeScript BEM-interface then Style consumer can resolve selectors with auto-completions,
• isolated and minified selectors - each stylesheet maker can use bem utility that returns selectors with unique prefix, also they can be minified via min attribute for Style provider.

Comparison

Sass / Less

Preprocessors provide their own syntax and associated constraints. EffCSS allows to use modern JavaScript and TypeScript however you want.

Tailwind

Tailwind operates utilities and requires editor setup for syntax highlighting and autocomplete. EffCSS operates stylesheets and allows selector autocomplete via TypeScript generics.

Emotion

@emotion/css has dependencies and in several cases requires another packages from related ecosystem (such as @emotion/react, @emotion/styled). EffCSS is self-confident and has no dependencies, works the same in all cases.

Styled Components

Styled Components is designed for styling React components. EffCSS is framework-agnostic.

Linaria

Linaria is zero runtime library. EffCSS creates CSS anywhere.

When to use?

Well, choosing a library is a matter of taste. In fact, there may be several other reasons:

You want to

• use a framework-agnostic tool 😍,
• use styles multiple times with a TypeScript hints 😎,
• use styles on the server without additional settings 😃.

You don't want to

• install additional build plugins in a project 😦,
• add special extensions to your editor 😨,
• learn new syntax 😠.

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