This project is a part of
*-mixins, with goal to provide a better CSS experience
to the React infected people.
// import classes you need from the library you need.;// use them as mixinsconst Component = styleddiv`z-index: 1;`;
if you need more - raise an issue, open a PR, or use webpack`s css-to-js-loader.
Atomic (or Functional) css is quite good methodology, but as long it solves many issues - it also introduces a new one.
You can create a Button, and you can describe how it must look like.
<button class="bg-purple f6 br3 ph3 pv2 white hover-bg-light-purple">Button Text</button>
But you will soil HTML code with details of behavior. Both css driven by html or html driven by css is bad. Something in the middle - BEM - is also not very usable.
You can use LESS to combine all modificators, to have single control point
But result CSS will be HUGE.
But you can use client-side CSS framework, to do the same. To get a
Component. And you will love the result.
const Button = styledbutton`;;;;;;`
*-Mixins can provide only mixins. A single class, style, or an atom.
If some library has selector like:
*-Mixins will provide only .someclass, and adding .someanotherClass to the html markup - is your duty. No magic.
One cannot use real
css names in js, so we have to convert names to a js-friendly format:
- ".class" becomes class
- "tag" becomes tag_tag
- "#id" becomes $id
- "hover-bg" becomes hover_bg
- "block--element" becomes block$$element
- ".class.anotherclass" becomes class_and_anotherclass
Idea was found here - https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
This is just an adoptation for a different style of CSS generation.