This project is in active development
Quarks are React components, but with all valid CSS properties available as props. They use Goober to inject styles either statically or dynamically as needed.
- Many CSS-in-JS libraries rely on tagged template literals to create component styles, sometimes offering object syntax as an alternative. However, template literals forego the benefits of Typescript since the contents of template literals are not evaluated. This allows for mistakes to go unchecked. With Quarks type-safety is always enforced.
- Most CSS-in-JS libraries provide access to a theme via a prop argument in a callback. But lazy or inexperienced developers usually don't take advantage of that and instead either import theme values or hard-code style values because it's easier ๐ฑ. One of quarks' main goals is to make referencing theme values easier than hard-coding styles, ensuring that your application's theme is consistently followed and easy to change.
- Nearly all CSS-in-JS libraries allow for conditional styling via custom props. Having to name and keep track of all of these props is a needless hassle that leads to poor naming and confusing code ๐. Since your components' state, props, or other variables are already available to quarks via props, this is never a problem.
- Most CSS-in-JS libraries require each styled element to be declared as a separate React component. That means having to come up with (yet another) descriptive name for every element. This wastes time and can lead to confusion when elements inevitably have similar or convoluted names. Since each quark is only unique in its element tag name, it's always clear what each quark represents and there's never a need to spend time trying to uniquely name them.
It's a reference to Brad Frost's Atomic Design Methodology. If atoms are your smallest design element that make up buttons, icons, text, etc., then what make up atoms? Quarks of course!