Functional CSS

@diegomura

diegomura

The real way to scale css, is to stop writing css

Have you ever...?

• Spent a lot of time looking for an existing class to reuse?
• Created reusable mixins/placeholders or classes and then forget about it?
• Had trouble to name classes?
• Had to review a bunch of stylesheets, checking if BEM is being used correctly?
• Had to split one class in two because you can no longer reuse it?

An overwhelming majority of css you would need for your site has already been written

How does it look like?

const Card = ({ title, content }) => (
  <div className='flex flex-column border rounded max-width-1'>
    <img className='fit' src='' />
    <div className='p1'>
      <h2 className='h2'>{title}</h2>
      <p className='ml1'>{content}</p>
      <button className='btn btn-primary right'>Next</button>
    </div>
  </div>
);

Tools

• Basscss
• Tachyons

Setup with React

PostCSS

const postcssImport = require('postcss-import');
const postcssCssnext = require('postcss-cssnext');

module.exports = {
  plugins: [
    postcssImport,
    postcssCssnext
  ]
};

Basscss

import React from 'react';
import ReactDOM from 'react-dom';
import 'styles/index.css';
// ...

@import 'basscss';

* {
  margin: 0px;
  padding: 0px;
}

html {
  height: 100%;
}
/* ... */

Addons

@import 'basscss';
@import 'basscss-btn';

* {
  margin: 0px;
  padding: 0px;
}

html {
  height: 100%;
}

/* ... */

Customizations

@import 'basscss';
@import 'basscss-btn';
@import './forms';
@import './colors';
@import './animations';
/* ... */

:root {
  --button-font-weight: normal;
  --button-background-color: #62b3d2;
}

* {
  margin: 0px;
  padding: 0px;
}

html {
  height: 100%;
}

/* ... */

Pros & cons

Pros

• Rarely write new CSS
• %99.99® reusable styles
• Team understanding
• Small CSS bundle -> faster load time
• More control over bundled code
• Forces style guide
• No styles definitions inside JS
• No component.scss

Cons

• Less semantic class names
• Learn propietary class names
• Fixed units for margins, paddings, etc.
• Hacky when you need a custom style
• Find and replace problem

Sources

• https://github.com/chibicode/react-functional-css-protips
• http://basscss.com/

Thanks!