How to think atomic

CSS is a programming language, just like JavaScript is a programming language. To handle complexity and create consistency in our code we use a concept called abstractions. You can think of fetch as an abstraction over XMLHttpRequest. Where axios would be an even higher abstraction. In CSS we do not really think about abstractions, cause even though using Less or Sass, or patterns like BEM, we still write all the CSS properties explicitly.
Classy-UI is an actual abstraction over CSS properties, you simply will not write CSS properties. Instead you have what we call atomic classnames. The means you will not write something like:
.my-class {
  padding-top: 2rem;
  border-width: 1px;
  border-color: red;
}
Classy-UI rather dynamically creates all the classnames for you, from tokens, where each classname represents a specific CSS property and the token with its value.
.padding-top__SPACE_40 {
  padding-top: 2rem;
}
.border-width__WIDTH_10 {
  border-width: 1px;
}
.borde-color__RED_50 {
  border-color: red;
}
No CSS properties, nested selectors, pseudo selectors or anything like that. The only thing you do is compose tokens in your code:
import { compose, tokens } from 'classy-ui'
​
export const myClass = compose(
  tokens.paddingTop.SPACE_20,
  tokens.borderWidth.WIDTH_10,
  toens.borderColor.RED_50
)
By only allowing you to consume atomic classnames you reduce the complexity of CSS, as there are no nested selectors or CSS properties to define. You also increase consistency as there is only a limited set of tokens available to you, based on the configuration. This also makes your CSS highly optimized and the tokens are discoverable and documented in your code.
10 system
The tokens of Classy-UI is built on a "10" system, meaning that we define for example space as SPACE_10, SPACE_20, SPACE_30 etc. This gives you a chance to define "in between" values with a custom configuration. For example you might want to add SPACE_15, as you need a value between 10 and 20. Where values has a specific range, for example opacity, you will see OPACITY_25, OPACITY_50 etc. reflecting the underlying values.
If you were to define a custom config you can completely change this though. Maybe SMALL, NARROW  etc. are more preferable.
Introduction
How to use
Last modified 3yr ago