SolidJS•2y ago

Is `style={}` performant?

I am using Vanilla Extract's Sprinkles API in my project to get static performance and a css-in-js feel but I can't put every style I need in a utility class. For instance sometimes I want to define a specific grid layout or gradient background. As far as I can tell my best options are using a style tag inline in the element which puts the css rules all together or to use vanilla extract's css modules which defines those specific styles in a separate file. What I don't know is the difference in performance between them. I know that in html the style tag is seen as not performant, is Solid different? Example with style tags: (I like this but don't know about performance)

// Hero.tsx
const Hero = () => ({
  <div
    class={sprinkles({
      height: 40,
      display: 'flex',
      flexDirection: 'column',  
      justifyContent: 'center',
      alignItems: 'center',
    })}
    style={
      background-image: `linear-gradient(to right, transparent, ${colors.primary}, transparent)`
    }
  >
    {content}
  </div>
})

// Hero.tsx
const Hero = () => ({
  <div
    class={sprinkles({
      height: 40,
      display: 'flex',
      flexDirection: 'column',  
      justifyContent: 'center',
      alignItems: 'center',
    })}
    style={
      background-image: `linear-gradient(to right, transparent, ${colors.primary}, transparent)`
    }
  >
    {content}
  </div>
})

Example with modules: (what I'm doing now but it's a bit clunky and I'd like to use the css in js patterns)

// Hero.tsx
const Hero = () => {
  <div class={styles.hero}>{content}</div>
}

// Hero.css.ts
export const hero = style([
  sprinkles({
    height: 40,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  }),
  {
    backgroundImage: `linear-gradient(to right, transparent, ${colors.primary}, transparent)`,
  },
]);

// Hero.tsx
const Hero = () => {
  <div class={styles.hero}>{content}</div>
}

// Hero.css.ts
export const hero = style([
  sprinkles({
    height: 40,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  }),
  {
    backgroundImage: `linear-gradient(to right, transparent, ${colors.primary}, transparent)`,
  },
]);

6 Replies

Alex Lohr•2y ago

Yes, solid's handling of style attributes is remarkably performant. However, the browser usually prefers <style> tags to <node style> attributes. It will only make a difference at scale.

jesseb34r•2y ago

what do you mean by <style> vs <node style>? @lexlohr do you mean like

<div>This is some <strong>bold</strong> text</div>

<div>This is some <strong>bold</strong> text</div>

<div>This is some <span style={font-weight: 800}>bold</span> text</div>

<div>This is some <span style={font-weight: 800}>bold</span> text</div>

Alex Lohr•2y ago

Yes.

jesseb34r•2y ago

interesting. but that only works for some things right? because I really only plan on using style={} for complex styles that don't have semantic elements that I would otherwise define with my utility classes or semantic elements

Alex Lohr•2y ago

Don't overly avoid style, that would fall under premature optimization.

jesseb34r•2y ago

cool. I'll move forward using class for sprinkles and style for more complex stuff. thanks so much!

Gaming

Programming

Is `style={}` performant?