General question about authoring styles versus components

[zaydek]

I saw @necolas mention somewhere that components have a non-trivial impact on performance and it made me wonder:

Is it more idiomatic to write stylesheet-oriented files where you write one or more stylesheets per file, export them, and simply apply style objects directly to DOM elements

- OR -

Is it more idiomatic to write component-oriented files where you write one or more components per file, that obscure internals like styling, but accept props like:

import * as stylex from "@stylexjs/stylex";
import { vars } from "../../styles/vars.stylex";

const styles = stylex.create({
  primary: {
    alignItems: "center",
    backgroundColor: { default: vars.brandColor, ":hover": vars.brandColorHover, ":active": vars.brandColorActive },
    blockSize: vars.buttonBlockSize,
    borderRadius: 1e3,
    boxShadow: vars.primaryButtonBoxShadow,
    color: "white",
    display: "flex",
    fontWeight: 600,
    gap: 8,
    justifyContent: "center",
    paddingInline: 16,
  },
  secondary: {
    alignItems: "center",
    backgroundColor: { default: vars.BLACK_3, ":hover": vars.BLACK_4, ":active": vars.BLACK_5 },
    blockSize: vars.buttonBlockSize,
    borderRadius: 1e3,
    display: "flex",
    gap: 8,
    justifyContent: "center",
    paddingInline: 16,
  },
});

export function PrimaryButton(props: React.ComponentProps<"button">) {
  return <button {...props} {...stylex.props(styles.primary)} />;
}

export function SecondaryButton(props: React.ComponentProps<"button">) {
  return <button {...props} {...stylex.props(styles.secondary)} />;
}

Thanks, I've just been wondering about this for a few days, to have a styles directory that only exports stylesheets or a self-contained components directory that only exports components.

[nmn]

Nicolas's comment was specifically against the "styled-components" way of doing things where every div with custom styles is turned into a custom component. Don't do that. Other than that, continue to create components that accepts props or styles as props and apply styles conditionally.

The example you've provided above is fine. But something like this would also be idiomatic:

import * as stylex from "@stylexjs/stylex";
import { vars } from "../../styles/vars.stylex";

const styles = stylex.create({
  base: {
    alignItems: "center",
    blockSize: vars.buttonBlockSize,
    borderRadius: 1e3,
    display: "flex",
    gap: 8,
    justifyContent: "center",
    paddingInline: 16,
  },
  primary: {
    backgroundColor: { 
      default: vars.brandColor,
      ":hover": vars.brandColorHover,
      ":active": vars.brandColorActive,
    },
    boxShadow: vars.primaryButtonBoxShadow,
    color: "white",
    fontWeight: 600,
  },
  secondary: {
    backgroundColor: {
      default: vars.BLACK_3,
      ":hover": vars.BLACK_4,
      ":active": vars.BLACK_5,
    },
  },
});

export function Button({variant, ...props}: React.ComponentProps<"button">) {
  return <button {...props} {...stylex.props(styles.base, styles[variant)} />;
}

Which pattern you choose when splitting components is up to you.

The idea is not to discourage you from making custom components. The idea is to avoid making avery little variation of styles into another layer of custom react components. This is particularly relevant in complex components like cards where it's better to make one custom component that uses many primitive elements within directly, rather than turn every div into a custom element even though it will never be used outside of the card component.

[zaydek]

Much appreciate thank you Naman.