Easy to use Data Styles
npm install @web-atoms/data-stylesdata-styles.d.ts provides intellisense to add corresponding data attributes in JSX.
data-styles.css.
data-styles.js.
tsx
data-font-weight="bold"
data-color="red"/>
`
Change attribute based on condition
`tsx
data-font-weight={ isSomethingTrue ? "bold" : "normal" }
data-color={ isValid ? "default" : "red" }
/>
`
Why?
1. Data Styles are composable, you can combine multiple attributes on single node.
Why not style attribute?
1. Style attribute is heavy, there is additional CSSStyleDeclaration created and associated with each element along with actual style that to be displayed.
2. Style attribute requires parsing every time the style has been set, where else when set in data attribute, all styles are already parsed and they are associated with element quickly.
3. Style attribute is not customizable, for example, we have a styled call data-layout="accent-button"`. When you are creating reusable components, you can specify initial styles using data attributes. And end user can customize styles based on desired design needs. Inline style does not allow other customizations such as media queries, pseudo elements, hover, active etc.