// Compile your Style object into CSS; use this for the innerHTML of your style element Style.CSS({ '.btn:hover' : { color: 'red' } }); // => '_scoped-1 .btn:hover {background-color: red}' ``` Why Make This =========== `scoped-css` was created to have **↑ cohesion and ↓ coupling of files _without_ sacrificing the power of CSS** (classes, pseudo-elements, pseudo-classes, and media queries). Loved the cohesion of Inline styles, no more flipping between HTML and CSS, with React it is all in one place. However-- ended up needing features of CSS not possible with Inline styles. And worse, found myself in the unenviable position of reimplementing CSS features in JavaScript. With Inline styling we lose access to [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) like `:hover` and `:nth-of-type` or [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) like `:before` and `:after`, and [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). When we start recreating CSS features in JavaScript--especially at scale--we end up with what basically amounts to custom CSS APIs on a _per component or developer basis_ (Spaghetti served daily@work from 9:00AM - 5:00PM). Reimplementing CSS features in JavaScript: - creates more code to maintain - adds style noise to components (`index === 0 ? //do : //something;` vs `.foo:first-of-type`) - slows the pace of development - reduces agility - and is a productivity barrier as new developers are onboarded (each devs implementation must be learned for _each_ component). Hence the conclusion: **Inline styles do not scale.** There must be a better way.. lets have our cake and eat it too: `scoped-css` takes a middle-of-the-road approach bringing together benefits of Inline styling and External stylesheets by way of an Embedded style element and scoped selectors (read more about [scoped style elements on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style)). Inline ---- [Embedded] ---- External **Top Reasons to Use `scoped-css` Instead of Inline Styles:** 1. You already know and understand it, this is just CSS wrapped in JavaScript objects; selectors are keys and declaration blocks are objects of property-value pairs 2. Media queries, pseudo-classes, pseudo-elements, selectors are available: full power of CSS at your fingertips 3. Linting of CSS rule property-value pairs (internally leverage Reacts CSSPropertyOperations and warning system); Selector linting coming soon 4. Reduce noise in components (no more index based conditionals in loops to recreate pseudo-classes like `nth-of-type()` or `:first-child`) 5. Inline style cohesion and scoping benefits without the selector tradeoff 6. ... **Problems with CSS at Scale (from FB [Christopher Viuexx](http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html)) and the ones `scoped-css` solves:** - [x] Global namespace (via scoped) - [x] Dependencies (via composition, JavaScript modules, and scoped) - [ ] Dead code elimination - [ ] Minification (Possible _relative to Inline styles_ with a CSS declaration block registry system) - [x] Sharing Constants (via JavaScript modules and variables) - [ ] Non-deterministic Resolution (Possible; linting to warn against identical selector statements) - [x] Isolation (via scoped) Usage ========== ```js import React, { Component } from 'react'); import Style from 'scoped-css'; class myComponent extends Component { render() { return (

// =>

// = // = // =

// =

); } } export default myComponent; ``` Using Media Queries ========== Media queries are conditonal wrapping statements that execute a set of Styles if conditions are true. Just like in CSS, `scoped-css` uses nesting to signal that the parent is to wrap the child. This looks something like: ```js import React, { Component } from 'react'); import Style from 'scoped-css'; class myComponent extends Component { render() { return (

); } } export default myComponent; ``` And is output as: ```html

``` With ES6 there is support for computed property names. So we can prettify long @media strings with `+` operators if the key is wrapped in `[]`. Looks something like this: ```js ... ... ``` In the near future short strings like `'@media iphone6'` or `'@media iphone6plus'` will map to the proper media query. ## License [MIT](LICENSE). Copyright (c) 2016-present Joshua Robinson. --- _Source: https://npm.io/package/scoped-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._