Skip to content

Concepts

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 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.

It also uses common browser APIs such as

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

  • runtime CSS generation - you can use stylesheets both on the server and on the client via Style consumer, but they will be prepared only in the browser,
  • server-side compatible - Style consumer can serialize it`s state into HTML string that can be used for SSR / SSG,
  • BEM support - bem utility can resolve correct CSS selectors in each StyleSheet maker,
  • scoped identifiers - many of maker utilities creates scoped identifiers by default (at-rules, bem selectors etc.),
  • theming support - Style provider settings includes vars field which contains global CSS vars for each theme; theme can be switched via theme-setter of Style consumer,
  • CSS switching - any generated stylesheet can be switched on/off via Style consumer on/off method,
  • typed stylesheets - if stylesheet maker uses BEM TypeScript interface then Style consumer can resolve selectors with TypeScript auto-completions.

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 only in runtime.

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!

Released under the Apache-2.0 License.