Concerning CSS in JS

CSS in JS is concerning and this is a talk concerning CSS in JS

Kent C. Dodds

Utah

1 wife, 3 kids

PayPal, Inc.

@kentcdodds

@kentcdodds

kcd.im/concerning-css-in-js

Please Stand...

if you are able

What this talk is

• The "why" of CSS in JS
• Trade-offs
• Problems looking for solutions

What this talk is not

• An attempt to get you to use CSS in JS
• Badmouthing CSS or those who use/like it as it is.

JavaScript + HTML = JSX

class Toggle extends Component {
  state = { toggledOn: false };

  handleToggleClick = () => {
    this.setState(
      ({ toggledOn }) => ({ toggledOn: !toggledOn }),
      (...args) => {
        this.props.onToggle(this.state.toggledOn);
      },
    );
  };

  render() {
    const { children } = this.props;
    const { toggledOn } = this.state;
    const active = toggledOn ? 'active' : '';
    return (
      <button
        className={`btn btn-primary ${active}`}
        onClick={this.handleToggleClick}
      >
        {children}
      </button>
    );
  }
}

export default Toggle;

Components!

import { PrimaryButton } from './css-buttons';

class Toggle extends Component {
  state = { toggledOn: false };

  handleToggleClick = () => {
    this.setState(
      ({ toggledOn }) => ({ toggledOn: !toggledOn }),
      (...args) => {
        this.props.onToggle(this.state.toggledOn);
      },
    );
  };

  render() {
    const { children } = this.props;
    const { toggledOn } = this.state;
    const active = toggledOn ? 'active' : '';
    return (
      <PrimaryButton
        active={active}
        onClick={this.handleToggleClick}
      >
        {children}
      </PrimaryButton>
    );
  }
}

export default Toggle;

Components!

function AppButton({ className = '', active, ...props }) {
  return (
    <button
      className={`btn ${className} ${active ? 'active' : ''}`}
      {...props}
    />
  );
}

function PrimaryButton({ className = '', ...props }) {
  return <AppButton className={`btn-primary ${className}`} {...props} />;
}

export default AppButton;
export { PrimaryButton };

CSS? 🤔

1. Conventions?
2. Who's using these styles?
3. Can I delete these styles?
4. Can I change these styles?

Pit of Success

a well-designed system makes it easy to do the right things and annoying (but not impossible) to do the wrong things.

blog.codinghorror.com/falling-into-the-pit-of-success/

Convention

Using conventions is just us compensating for not having a wide enough pit of success.

The P2P Funnel Page

Our CSS...

What impact will my change have elsewhere?

Components

Styled

Unstyled

Components

What is a UI component made of?

Remember our CSS?

Glamor!

import { css } from 'glamor';

const appButtonClassName = css({
  display: 'inline-block',
  fontWeight: '400',
  lineHeight: '1.25',
  textAlign: 'center',
  whiteSpace: 'nowrap',
  verticalAlign: 'middle',
  userSelect: 'none',
  border: '1px solid transparent',
  padding: '.5rem 1rem',
  fontSize: '1rem',
  borderRadius: '.25rem',
  transition: 'all .2s ease-in-out',
});

const highlightStyles = {
  backgroundColor: '#025aa5',
  borderColor: '#01549b',
};

const primaryButtonClassName = css({
  color: '#fff',
  backgroundColor: '#0275d8',
  borderColor: '#0275d8',
  ':hover': highlightStyles,
});

const activeClassName = css(highlightStyles);

function AppButton({ className = '', active, ...props }) {
  return (
    <button
      className={`${appButtonClassName} ${className} ${active ? activeClassName : ''}`}
      {...props}
    />
  );
}

function PrimaryButton({ className = '', ...props }) {
  return (
    <AppButton
      className={`${primaryButtonClassName} ${className}`}
      {...props}
    />
  );
}

export default AppButton;
export { PrimaryButton };

Enter glamorous 💄 

import glamorous from 'glamorous';

const AppButton = glamorous.button({
  display: 'inline-block',
  fontWeight: '400',
  lineHeight: '1.25',
  textAlign: 'center',
  whiteSpace: 'nowrap',
  verticalAlign: 'middle',
  userSelect: 'none',
  border: '1px solid transparent',
  padding: '.5rem 1rem',
  fontSize: '1rem',
  borderRadius: '.25rem',
  transition: 'all .2s ease-in-out',
});

const highlightStyles = {
  backgroundColor: '#025aa5',
  borderColor: '#01549b',
};

const PrimaryButton = glamorous(AppButton)(
  {
    color: '#fff',
    backgroundColor: '#0275d8',
    borderColor: '#0275d8',
    ':hover': highlightStyles,
  },
  ({ active }) => (active ? highlightStyles : null),
);

export default AppButton;
export { PrimaryButton };

jest-glamor-react

📸

Now for the concerns...

Why is CSS in JS so concerning?

Familiarity

1. styled-components 💅  / emotion 👩‍🎤
2. CSS to CSS in JS (Atom Plugin)

Workflow/IDE

1. Create ESLint plugin for CSS in JS
2. TypeScript/Flow support

Performance

Performance

1. css-in-js-precompiler
2. emotion
3. babel-plugin-styled-components
4. babel-plugin-polished
5. prepack?