Home | CCSS

Tiny core

CCSS is an opinionated, low-level utility to deal with CSS style objects. It's not an out-of-the-box styling solution. It helps you deliver your own, tailor-made tool. It is built on the top of transformed (3.8 kB, 1.5 kB compressed) which gives you great customization options to suit your own needs.

Value maps

You can assign value maps to any CSS or custom property your design system requires. Common use cases are colors, font sizes and dimensions.

// Setup custom value maps

ccss.setProps([
  [['max-width'], { container: 1220 }],
  [['color'], { dark: '#333', light: '#eee' }],
  [['font-size'], { small: 12, large: 16 }]
])

Live Editor

ccss({
    maxWidth: 'container',
    color: 'dark',
    ':hover': {
        color: 'light'   
    }
})

ccss({
    maxWidth: 'container',
    color: 'dark',
    ':hover': {
        color: 'light'   
    }
})

Result

Plugins

Enhance the functionality of existing properties by supporting new value types and/or special rules.

Gutter
Ratio
Custom

Apply a general gutter rule to all your margin, padding, and grid-gap values. Keeping a consistent spacing of one key to a good design system. The gutter plugin helps you maintain a multiply of a pre-defined unit. Default: 5px

Learn more▶

Live Editor

ccss({
    padding: 1,
    margin: [1, 2, 3, 4],
    gridGap: 4
})

ccss({
    padding: 1,
    margin: [1, 2, 3, 4],
    gridGap: 4
})

Result

Add support for margin and padding to accept ratio value. The aspect-ratio CSS property is around the corner now, but before the so-called padding hack was used. Using this plugin you can avoid any manual calculation you might need and just provide ratio directly.

Learn more▶

Live Editor

ccss({
    paddingTop: '16:9',
    margin: ['4:3', 0, 0, '24:9']
})

ccss({
    paddingTop: '16:9',
    margin: ['4:3', 0, 0, '24:9']
})

Result

Let's create a plugin that adds support to resolve an object path. This is a popular solution among other libraries. In this example, we will add such support to the background-color property.

Check documentation▶

const colors = {
    dark: { 0: '#000', 1: '#111' }
}

ccss.setProps([
    ['backgroundColor'], null, [
        v => v.split('.').reduce((acc, val) => acc[val], colors),
        '...'
    ]
])

Live Editor

ccss({
    backgroundColor: 'dark.1'
})

ccss({
    backgroundColor: 'dark.1'
})

Result

Custom properties

Add your own custom properties to share, compose, re-use styles, and design tokens. Create amazing new features living right inside your CSS.

Keyframes
Media Query
Scroll
Custom

Using the keyframes prop you can add animation keyframes without the hassle and worrying about the naming. The generated names with the same values are cached to make them reusable.

Animated text

Learn more▶

Live Editor

ccss({
    animation: '3s infinite',
    keyframes: {
        from: { color: '#000' },
        to: { color: '#fff' }
    }
})

ccss({
    animation: '3s infinite',
    keyframes: {
        from: { color: '#000' },
        to: { color: '#fff' }
    }
})

Result

The mediaQuery (shorthands: mq, at) property adds support for @w11r/use-breakpoint's breakpoint mechanism. It's an array-based solution to maintain the order you want for specificity. It comes with built-in, customizable breakpoints for various screen sizes and common queries.

Learn more▶

Live Editor

ccss({
    fontSize: 24,
    at: [
        ['tablet', { fontSize: 20 }],
        ['mobile-', { fontSize: 16 }]
    ]
})

ccss({
    fontSize: 24,
    at: [
        ['tablet', { fontSize: 20 }],
        ['mobile-', { fontSize: 16 }]
    ]
})

Result

The scroll property can help you to easily make a container scrollable. It's a common use-case nowadays on devices to apply horizontal scroll to a container of items without any scrollbars.

🍔

Learn more▶

Live Editor

ccss({
    scroll: 'x'
})

ccss({
    scroll: 'x'
})

Result

This code will add a property named icon. It has 2 parts: a value map that will resolve the icon's character code, and a handler that will emit the necessary CSS.

In this example, we're using UTF-8 icons, but the method can work with icon fonts or any other way, it's up to you to define how it works.

I always eat a before I ride my !

Check documentation▶

const icons = {
    hamburger: '🍔',
    rocket: '🚀'
}

const handler = value =>
    ccss({
        '::before': {
            content: `"${value}"`
        }
    })

ccss.setProps([
    [['icon'], icons, [handler]]
])

Live Editor

ccss({
    icon: 'rocket'
})

ccss({
    icon: 'rocket'
})

Result

Shorthands

Work less do more! CCSS comes with shorthands for all CSS properties. Both Styled System and Tailwind CSS are coming with some shorthands out of the box. CCSS gives you the ability to use shorthands for both property names and/or values. Mix to your liking for rapid development.

Live Editor

ccss({ p: 1, m: 2, f: 1, ai: 'c' })

ccss({ p: 1, m: 2, f: 1, ai: 'c' })

Result

Live Editor

ccss({
    position: 'r',
    alignItems: 'c'
})

ccss({
    position: 'r',
    alignItems: 'c'
})

Result

Plug n' Play

Use CCSS in any existing codebase where you can apply CSS string or Style object in JS. No matter what unit system (em, rem, px, etc.) you use, CCSS supports any unit you need.

You may introduce design tokens to a monolithic codebase using multiple styling solutions.

import styled from 'styled-components'

const MyComponent = styled.div`
    ${ccss({
        width: 'site-container',
        color: 'dark',
        icon: 'rocket'
    })}
`

import jss from 'jss'

const styles = {
  button: ccss({
    color: 'dark',
    ':hover': {
      color: 'light'
    }
  })
}

const { classes } = jss.createStyleSheet(styles).attach()

document.body.innerHTML = `
  <button class="${classes.button}">Button</button>
`

Performance

CSS-in-JS by default is a trade-off on performance, no matter which library you choose. Compiling CSS dynamically at runtime will always have its costs.

During the development of CCSS strict decisions and various micro-optimizations have been made to ensure it won't affect performance seriously. The included features are limited to maintain speed and simplicity.

Another area kept in mind is static extraction. Using @you-eye/babel-plugin-react you're able to static (and even dynamic) extract your Ui components, and replace them with native DOM elements with CSS classes in your production bundle.