Oleg Slobodskoi, Chatgrape, Berlin — Javascript Style Sheets
Oleg Slobodskoi, Chatgrape, Berlin — Javascript Style Sheets
About the good parts of writing styles in javascript using JSS. Comparison to other existing CSS solutions and points about negative aspects got so far.
2 Plan Plan 1. React and CSS. 2. What are inline styles. 3. Problems solved by inline styles. 4. Interesting CSS in JS libs. 5. What is JSS. 6. Problems solved by JSS. 7. Unsolved problems.
9 Dead code Dead code A task for a compiler. function module() { var styles = { button: { color: 'green' }, myButton: { color: 'red' } } // Renders a button. button({style: styles.myButton}) } function module(){button({style:{color:"red"}})};
10 Minification Minification function test(a) { var obj = {a: a, b: 2}; return obj.a + obj.b; } window.a = test(1) window.a=3; No selectors to minify. JavaScript compressor for the rest.
24 What is JSS. What is JSS. Good parts of CSS only. Designed with components in mind. Declarative JavaScript. JavaScript to CSS compiler. Easy to reason about.
25 How does it work. How does it work. Virtual CSS Tree Process Render Run plugins on every VRule Output <br/>with CSS.<br/>Abstraction for<br/>CSS Rules<br/>Manipulation<br/>
27 Example with React Example with React import React from 'react' import {useSheet} from 'react-jss' @useSheet({ button: { color: 'green' } }) export default function Button(props) { const {classes} = props.sheet return {props.text} } No magic in code.
39 Class Names are fast. Class Names are fast. 1. Find modified props. 2. Find props to unset. 3. Ensure valid property name, value, default unit. 4. Apply each property to an element
45 JSS-ISOLATE JSS-ISOLATE Created a JSS plugin. and SOLVED INHERITANCE PROBLEM Maxim Koretskiy “ This plugin protects styles from inheritance. It automatically creates a reset rule and applies it to every user's rule.
53 Takeaways Takeaways CSS in JS is not only for big projects, it's for any maintainable project. Use Inline Styles for: 1. State styles. For e.g. when a "width" of a component depends on its state. 2. Animations. Don't be religious. Keep an open mind. Use tools that solve your problems!