JavaScript Style Sheets

Explore the advantages and challenges of writing styles in JavaScript using JSS in this 26-minute conference talk by Oleg Slobodskoi from Chatgrape, Berlin. Discover how JSS compares to other CSS solutions, learn about its good parts, and understand potential drawbacks. Dive into topics such as inline styles, global namespace issues, implicit dependencies, minification, sharing constants, and non-deterministic resolution. Examine three categories of styling approaches: pure inline, mixed mode, and pure style sheets. Learn how JSS works with React, including examples of media queries, keyframe animations, font faces, and pseudo-selectors inspired by Sass. Explore features like rules caching, rules sharing, and the speed of class names. Understand JSS's tool-agnostic nature, extensibility, and vendor prefixer plugin. Discuss inheritance and unresolved issues such as overengineered solutions, lack of standard DSL, missing dev tools, and initial rendering blocks.

Intro
React and CSS
First JSS release
Inline styles
Global Namespace
Implicit Dependencies
Minification
Sharing Constants
Non-deterministic Resolution
3 Categories
Pure Inline
Mixed Mode
Pure Style Sheets
How does it work.
Example with React
Media Queries
Keyframes Animation
Font Face
Pseudo Selectors Inspired by Sass.
Rules Caching
Rules Sharing
Class Names are fast.
Tools Agnostic
Extensible
Vendor Prefixer Plugin
Inheritance
Unsolved Problems
Overengineered Solution
No standard DSL
Missing dev tools
Blocks initial rendering.