CSS in JavaScript
In November 2014, Christopher Chedeau, also known as vjeux, gave a talk at the NationJS conference (https://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html) that sparked a revolution in the way React components are styled. As a contributor to React and an employee of Meta, Christopher outlined the many issues Facebook faced with CSS at scale. Understanding these issues is important because they are common in web development and will help us introduce concepts such as inline styles and locally scoped class names.
The following is a list of the issues with CSS, which are basically problems with CSS at scale:
- Global namespace
- Dependencies
- Dead code elimination
- Minification
- Sharing constants
- Non-deterministic resolution
- Isolation
The first well-known problem of CSS is that all the selectors are global. No matter how organized our styles are by using namespaces or a procedure such as the Block, Element...
