Question about authoring many stylesheets or one

[zaydek]

I think I may know the answer to this question but this is something I've been struggling with a bit lately and I wanted to seek some clarification.

Say I have like 8-10 classes I'm declaring as such. Would it not make sense to author it as few distinct stylesheets so that it's easier to name things (like mastheadStyles.container, as opposed to styles.mastheadContainer).

My guess is that the convention is to use one stylesheet and if you have too much complexity just break it out into another file. Anyway, what is recommended here?

const styles = stylex.create({
  mastheadContainer: {
    alignSelf: "flex-start",
    display: "flex",
    flexDirection: "column",
    position: "relative",
  },
  masthead: {
    backgroundColor: "#6C38FF",
    blockSize: 40,
    borderRadius: 1e3,
    boxShadow: "0 0 0 1px white",
    inlineSize: 40,
  },
  // This is the badge that shows the product the user is affiliated with
  badge: {
    backgroundColor: "purple",
    blockSize: 20,
    borderRadius: 1e3,
    boxShadow: `0 0 0 1px white, 0 0 0 4px ${vars.colorBase}`,
    inlineSize: 20,
    insetBlockEnd: 0,
    insetInlineEnd: -10,
    position: "absolute",
  },
  checkboxItem: {
    alignItems: "center",
    backgroundColor: "rgba(255, 255, 255, 0.05)",
    borderRadius: 1e3,
    display: "flex",
    paddingInline: 4,
  },
  checkboxItemIconContainer: {
    alignItems: "center",
    blockSize: 32,
    display: "flex",
    inlineSize: 32,
    justifyContent: "center",
  },
  checkboxItemIcon: {
    blockSize: 16,
    inlineSize: 16,
  },
  head: {
    backgroundColor: "green",
    blockSize: 20,
    borderRadius: 1e3,
    boxShadow: `0 0 0 1px white, 0 0 0 4px ${vars.colorBase}`,
    inlineSize: 20,
    marginInlineStart: {
      default: -4,
      ":first-child": 0,
    },
  },
  extra: {
    alignItems: "center",
    backgroundColor: "white",
    blockSize: 20,
    borderRadius: 1e3,
    boxShadow: `0 0 0 1px white, 0 0 0 4px ${vars.colorBase}`,
    color: "black",
    display: "flex",
    fontWeight: 500,
    marginInlineStart: {
      default: -4,
      ":first-child": 0,
    },
    paddingInline: 8,
  },
  submit: {
    alignItems: "center",
    backgroundColor: "#6C38FF",
    blockSize: 32,
    borderRadius: 1e3,
    display: "flex",
    flexShrink: 0, // Not sure
    fontWeight: 700,
    justifyContent: "center",
    paddingInline: 8,
  },
});

const mastheadStyles = stylex.create({
  mastheadContainer: {
    alignSelf: "flex-start",
    display: "flex",
    flexDirection: "column",
    position: "relative",
  },
  masthead: {
    backgroundColor: "#6C38FF",
    blockSize: 40,
    borderRadius: 1e3,
    boxShadow: "0 0 0 1px white",
    inlineSize: 40,
  },
  // This is the badge that shows the product the user is affiliated with
  badge: {
    backgroundColor: "purple",
    blockSize: 20,
    borderRadius: 1e3,
    boxShadow: `0 0 0 1px white, 0 0 0 4px ${vars.colorBase}`,
    inlineSize: 20,
    insetBlockEnd: 0,
    insetInlineEnd: -10,
    position: "absolute",
  },
})

const checkboxStyles = stylex.create({
  container: {
    alignItems: "center",
    backgroundColor: "rgba(255, 255, 255, 0.05)",
    borderRadius: 1e3,
    display: "flex",
    paddingInline: 4,
  },
  iconContainer: {
    alignItems: "center",
    blockSize: 32,
    display: "flex",
    inlineSize: 32,
    justifyContent: "center",
  },
  icon: {
    blockSize: 16,
    inlineSize: 16,
  },
})

const socialProofStyles = stylex.create({
  head: {
    backgroundColor: "green",
    blockSize: 20,
    borderRadius: 1e3,
    boxShadow: `0 0 0 1px white, 0 0 0 4px ${vars.colorBase}`,
    inlineSize: 20,
    marginInlineStart: {
      default: -4,
      ":first-child": 0,
    },
  },
  extra: {
    alignItems: "center",
    backgroundColor: "white",
    blockSize: 20,
    borderRadius: 1e3,
    boxShadow: `0 0 0 1px white, 0 0 0 4px ${vars.colorBase}`,
    color: "black",
    display: "flex",
    fontWeight: 500,
    marginInlineStart: {
      default: -4,
      ":first-child": 0,
    },
    paddingInline: 8,
  },
})

const submitStyles = stylex.create({
  button: {
    alignItems: "center",
    backgroundColor: "#6C38FF",
    blockSize: 32,
    borderRadius: 1e3,
    display: "flex",
    flexShrink: 0, // Not sure
    fontWeight: 700,
    justifyContent: "center",
    paddingInline: 8,
  },
});

Thanks!

[nmn]

In this example, the second example, i.e checkboxStyles, submitStyles etc is fine. Feel free to break up the styles object into as many objects as you need for organisation. There is no downside to it.

[zaydek]

Thanks!

[nmn]

Here's a quick clarification. Both your examples would result in the exact same Css file.

[zaydek]

Awesome. That's great to hear. Authoring stylesheets this way and using this little plugin to fold and unfold stylesheets (in VS Code) has made working with StyleX so much easier. https://x.com/username_ZAYDEK/status/1798661847719280724