Elegant way to achieve different styles for prose content

[osdiab]

Hi all, I was wondering how people approach this sort of use case—for most elements, I don't want to have margins and paddings applied by default to typographical elements since it's easier to build out UIs when they don't behave this way; CSS reset ensures this.

But in the case of an actual piece of prose, like long-form text embedded in the site, it becomes useful to do stuff like cap the content width, have paragraph tags and heading tags auto space themselves out, hyperlinks actually look like links, and so on in a consistent way.

There are several possible ways to achieve this sort of behavior with Panda, but what would people think is a particularly elegant way? Could use a CSS style with a bunch of dependent selectors, or global styles on a particular classname, or something else. What other options are there? Thanks!

[anubra266]

@osdiab I'd use globalCSS for reset styles

[osdiab]

it's not a reset style, it's a different set of styles for say a specific <article /> element on the page. i think i'm going to go with using dependent selectors despite the docs advising against that approach. something like

import { css } from "~pandacss/css";
import { SystemStyleObject } from "~pandacss/types";

const paragraphSpacingStyle: SystemStyleObject = {
  "&:not(:first-child)": { marginBlockStart: "1em" },
};

// this needs to be in this file so that panda can pick it up at compile time
export const hyperlinkStyles: SystemStyleObject = {
  color: "primaryText",
  textDecoration: "underline",
  display: "inline-block",
  cursor: "pointer",
  fontWeight: "semibold",
  border: "none",
  background: "none",
  transition: "color 0.1s linear",
  _hover: { color: "primaryHighlight" },
};

export const proseCss = css({
  "& a": hyperlinkStyles,
  "& p": paragraphSpacingStyle,
  "& h1": paragraphSpacingStyle,
  "& h2": paragraphSpacingStyle,
  "& h3": paragraphSpacingStyle,
  "& h4": paragraphSpacingStyle,
  "& h5": paragraphSpacingStyle,
  "& h6": paragraphSpacingStyle,
});

though not super elegant looking.

[anubra266]

@osdiab A neater solution

export const proseCss = css({
 "& a:not(:first-child)": { marginBlockStart: "1em" },
 "& p, & h1, & h2, & h3, & h4, & h5, & h6": {
    color: "primaryText",
    textDecoration: "underline",
    display: "inline-block",
    cursor: "pointer",
    fontWeight: "semibold",
    border: "none",
    background: "none",
    transition: "color 0.1s linear",
    _hover: { color: "primaryHighlight" },
 }
})

[osdiab]

Yeah this is what I ended up going with roughly - while the docs warn against dependent selectors like this, I think it’s cleaner than a global style and I think this is a legitimate use case for them.

[anubra266]

@osdiab Can you link me to where the docs warn against this? I'm not aware of that.

[osdiab]

https://panda-css.com/docs/concepts/writing-styles#native-css-nesting

We recommend not using descendant selectors as they can lead to specificity issues when managing style overrides. Colocating styles directly on the element is the preferred way of writing styles in Panda.

in this case though the whole point is that the underlying content is impractical to put styles on. so i think OK here.