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 eachStyleSheet maker
, - scoped identifiers - many of maker utilities creates scoped identifiers by default (at-rules, bem selectors etc.),
- theming support -
Style provider
settings includesvars
field which contains global CSS vars for each theme; theme can be switched viatheme
-setter ofStyle 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!