makeResetStyles

Atomic CSS has tradeoffs. Browser layout can slow down proportionally to the number of HTML class names that reference different rules.

There are cases when it's reasonable to flatten multiple declarations into monolithic CSS. For example, base styles for components in a UI library. Rules generated by makeResetStyles() are inserted into the CSS style sheet before all the Atomic CSS, so styles from makeStyles() will always override these rules.

makeResetStyles returns a React hook that should be called inside a component:

import { makeResetStyles } from '@griffel/react';

const useClass = makeResetStyles({
  color: 'blue',
  margin: 0,
  ':hover': { color: 'teal' },
});

Produces following CSS...

.r6gaeno {
  color: blue;
  margin: 0px;
}

.r6gaeno:hover {
  color: teal;
}

note

By its nature makeResetStyles allows the use of CSS shorthands and does not have the same limitation as makeStyles().

Usage with makeStyles

import { makeStyles, makeResetStyles, shorthands } from '@griffel/react';
import { mergeClasses } from './mergeClasses';

const useBaseClass = makeResetStyles({
  color: 'red',
  padding: 0,
  // etc.
});

const useClasses = makeStyles({
  primary: { color: 'blue' },
  circular: {
    ...shorthands.padding('5px'),
    ...shorthands.borderRadius('5px'),
  },
});

function Component(props) {
  const baseClass = useBaseClass();
  const classes = useClasses();

  return (
    <button className={mergeClasses(baseClass, props.primary && classes.primary, props.circular && classes.circular)} />
  );
}

Features support

makeResetStyles supports the same features as makeStyles() including nested selectors and at-rules.

Limitations

caution

Only one class generated by makeResetStyles() can be applied to an element. Otherwise, behavior will be non-deterministic as classes merging will not be done for this case and results depend on order of insertion.

import { makeResetStyles } from '@griffel/react';

const useClassA = makeResetStyles({
  /* styles */
});
const useClassB = makeResetStyles({
  /* styles */
});

function Component(props) {
  /* 💣 Never apply multiple rules from makeResetStyles() to the same element */
  return <button className={mergeClasses(useClassA(), useClassB())} />;
}