{"slug":"styling","title":"Styling","headings":["css()"],"contentHtml":"

Styling

css()

import { css } from \"ruri\"\n\nconst card = css({\n  background: \"#111\",\n  padding: \"16px\",\n  borderRadius: \"8px\",\n})\n\ndiv({ class: card }, \"styled\")

The style object is hashed into a stable class name. In the browser the rule is injected once into a <style data-ruri> element; on the server rules are collected and serialized with collectStyles():

import { collectStyles } from \"ruri/server\"\n\nconst page = `<style>${collectStyles()}</style>`

Media queries:

const wide = css({ fontSize: \"24px\" }, { media: \"(min-width: 600px)\" })
"}