React Style Sheets
Create cascading style sheets from within your React components
About
React Style Sheets allows defining styles in your javascript in a similar way to React Native, but with a huge host of additional benefits
// Define your styles var classNames = ReactStyleSheets; // You can then use this in your React components <div className=classNamesmyClass> Hello World!</div>
Benefits
Unlike React Native (or libraries like Radium / React Style), it has the following benefits:
- Styles are only generated once, when the script is first loaded
- The styles are not inlined, instead they are added in a style tag and either available globally, or accessed by a unique class name (see examples)
- No need to manually implement hover, active, etc states, or media queries in javascript
- You can still use inline styles without the need for complex extending of styles
- Easily extend / override reusable components styles by concatenating class names
- You can add global styles for all HTML elements (by tag name)
- You can create and utilize CSS keyframe animations
- You can use media queries to adjust styles on different devices
- You can use advanced selectors like hover, active, disabled, firstChild, etc
- You can use selectors for pseudo elements like before, after, and selection
- You can nest selectors
- You can easily define styles with our intuitive API (automatically adds units, joins arrays, and allows breaking up styles with nested objects)
Benefits of React Style Sheets over using CSS, and CSS pre/post-processors include
- Keep your styles, component logic, and markup in the same file
- Easily bundle styles with your component libraries
- Automatically add vendor prefixes
- Use variables and mixins (functions)
- No additional dependencies - parse and bundle your styles with your chosen javascript build tools
- Class names are unique (and obfuscated by default) preventing accidental style inheritance
- No need to invalidate CSS cache
Examples
Obfuscated class names
// Define your stylesvar classNames = ReactStyleSheets; // And you end up with some classNames like the following myClass: 'myClass_obfus' // You can then use this in your React components<div className=classNamesmyClass> Hello World!</div>
This also generates the following style tag and appends it to the head tag
Global tag styles
ReactStyleSheets;
Generates the following styles (available globally)
Automatically add units and build up style values from arrays
ReactStyleSheets;
Generates the following styles
Break up style definitions with nesting
ReactStyleSheets;
Generates the following styles
Utilize CSS keyframe animations
var animations = ReactStyleSheets; var classNames = ReactStyleSheets
Utilize media queries
var classNames = ReactStyleSheets
Extend styles easily in reusable components
{ return <div className=classNamesmyClass + ' ' + thispropsclassName /> ;}
Use state selectors like hover, active, disabled, firstChild, etc
ReactStyleSheets;
Use pseudo element selectors like before, after and selection
ReactStyleSheets;
Nest state / pseudo element selectors
ReactStyleSheets;
Automatically prefix styles with vendor prefixes
ReactStyleSheets; var classNames = React;
Generates the following styles