![\"Style](\"https://s3.amazonaws.com/style-it/style-it.svg\")
\nStyle It is a component for writing plaintext CSS in JavaScript apps. Use the same\nfamiliar CSS syntax you already know and love -- now inside of your components.\n\n[![](\"https://img.shields.io/npm/v/style-it.svg?style=flat-square\" "\\"Version\\"")
](https://www.npmjs.org/package/style-it) [![](\"https://img.shields.io/badge/status-maintained-brightgreen.svg?style=flat-square\" "\\"Maintenance"){kind=icon}
](https://github.com/buildbreakdo/style-it/pulse) [![](\"https://travis-ci.org/buildbreakdo/style-it.svg?branch=master\" "\\"Build")
](https://travis-ci.org/buildbreakdo/style-it/) [](https://coveralls.io/github/buildbreakdo/style-it?branch=master)\n\nProponent of eat your own dog food. If you want to see Style It live head over to [Pholder.com](https://pholder.com/r/oldschoolcool), serving thousands daily. Question, issue, or request? [Open an issue](https://github.com/buildbreakdo/style-it/issues) or [reach out on gitter](https://gitter.im/Style-It/Lobby).\n\n| Feature | Style It | Inline Style | |\n| :-------------------- | :------------: | :----------: | :--------- |\n| Nothing new to learn | ✔ | | With Style It, you use the same familiar CSS syntax you already know and love -- now inside of your components. Just wrap your component with Style It and start writing CSS. |\n| Fully featured | ✔ | | There is no abstraction to go through -- Style It is just CSS. Use any CSS feature available. |\n| Scoped selectors | ✔ | | Move your CSS out of the global name space. Style It automatically scopes selectors for you to the component's root element and acts as a polyfill for sub-tree scoping (learn more on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement/scoped)). |\n| [Layout styling](#layout-styling) | ✔ | | Style your layout without using an external CSS file. Style It makes keeping all of your CSS in the App component hierarchy easy -- from global layout to component specific styles. |\n\n\n`, etc. When the root node of a component is another component, this becomes a much more tricky problem because it is not known how deep the component root node nesting will go (e.g., multiple passthrough components composed inside of one another).\n\nFor this reason, components which serve as root nodes for other components must have their `className` attribute set to `this.props.className` to have the CSS scoping class name properly set (without the scope class name CSS styles will not apply). So the ChildComponent (since it is used as a root node in the ParentComponent) becomes:\n\n```js\n...\nclass ChildComponent extends Component {\n render() {\n return (\n
\n {this.props.children}\n
\n )\n }\n}\n...\n```\n\nSo all we added was an explicit className assignment from props (this snippet `className={this.props.className}`). Would argue that this is best practices anyway for a component that can be a root node; likely should use the spread operator (e.g., `{...this.props}`) to cover all your bases and include events a would be user of your component may attach.\n\nIf you would like to play with this scenario online, you can [open this example in JSFIDDLE](https://jsfiddle.net/pk9L2j4d/1/).\n\n### Additional Usage\n\n#### JavaScript variables in your CSS [![](\"https://img.shields.io/badge/OPEN%20IN%20JSFIDDLE--eaeff2.svg\" "\\"OPEN"){kind=icon}
](https://jsfiddle.net/jw9hpfxm/1/)\nIn:\n```js\nimport React from 'react';\nimport Style from 'style-it';\n\nclass Intro extends React.Component {\n render() {\n const fontSize = 13;\n\n return Style.it(`\n .intro {\n font-size: ${ fontSize }px; // ES2015 & ES6 Template Literal string interpolation\n }\n .package {\n color: blue;\n }\n .package:hover {\n color: aqua;\n }\n `,\n CSS-in-JS made simple -- just Style It.
\n );\n }\n}\n\nexport default Intro;\n```\n\nOut:\n```html\n\n \n\n CSS-in-JS made simple -- just Style It.\n
\n```\n\n#### Layout styling[](https://jsfiddle.net/r3hhzaze/1/)\nStyle your layout without using an external CSS file. Style It makes keeping all of your CSS in the App component hierarchy easy -- from global layout to component specific styles (uses JSX syntax).\n\nIn:\n```js\nimport React from 'react';\nimport Style from 'style-it';\n\nclass App extends React.Component {\n render() {\n return (\n \n \n\n
\n );\n }\n}\n\nexport default App;\n```\n\nOut:\n```html\n\n \n\n
\n```\n### More Features\n\n| Feature | Style It | Inline Style | |\n| :----------------------------------------- | :---------------: | :----------: | :--------- |\n| Increase cohesion | ✔ | ✔ | Self contained and complete components. With Style It there is no need to fragment your component by creating an external CSS file when you need to use pseudo-classes, pseudo-selectors, at-media rules, or one of Reacts unsupported vendor prefixes (like flexbox or cursor grab). |\n| Write less code | ✔ | | Use the right tool for the right job. With Style It the full power of CSS is available so we can stop reimplementing CSS language features like `:hover` and `nth-of-type` in JavaScript. |\n| Faster build times | ✔ | ✔ | Remove the preprocessor middle man -- this is just CSS. Style It brings back the simplicity of writing CSS and removes the need for managing and executing a build step. |\n| Increase readability | ✔ | | Maintain the simplicity, symmetry, and beauty of HTML's open and close syntax. With Style It you can achieve cohesion and clean separation while still bringing component concerns together as a single self-contained unit of code. |\n| Isomorphic | ✔ | ✔ | Style It is completely isomorphic and renders the same markup on server and client. |\n| Increase new hire productivity | ✔ | ✔ | On boarding of new developers is quick and easy with Style It -- there is nothing new to learn. Get your new developers styling today! |\n| Better workflow | ✔ | | Better workflow, a classic workflow. Not often we are able to say that, because Style It requires no transformations to your CSS you can make adjustments in your browser and simply copy and paste the style rules into your component. |\n| Easily portable | ✔ | | By simply being CSS Style It makes porting styles elsewhere easy with no special syntax or quirks to transform. |\n| Share styles | ✔ | ✔ | Easily share styles across multiple components by leveraging JavaScript import notation you already know.|\n| Small size | | | Style It is tiny at only 1.84kB gzipped. |\n| Better composition | ✔ | | More easily evaluate when to break down a component. CSS complexity is an oft forgotten input when evaluating component complexity (+selectors, +pseudo states). Unifying HTML-CSS-JS in one place ensures CSS complexity is a part of your -- when should I decompose -- equation. |\n\n### Behind The Scenes (bonus)\n\n#### How scopes work\nTo isolate styles Style It iterates over child component prop data and generates a hash that is used as a scoping class. Preference would be to use `Math.random()` however HTML rendered on the server would not be identical to the HTML rendered on the client. Use of `Math.random()` would create a server-client mismatch and benefits of the serverside render would be lost. Working within these constraints, Style It collects child component props and hashes them to generate a -- unique as possible -- identifier on client and server. Relative to how iterating through children is historically done, by going to the DOM and reading values, React allows us to perform this operation incredibly fast by leveraging the component hierarchy already held in memory. The hash of the prop data is then used to create a class name (e.g., _scope-472614893) which is automatically prefixed to selectors for you.\n\n#### Optimization\nFirm believer in Don Knuth's Literate Programmer movement: 'the most important function of computer code is to communicate the programmer's intent to a human reader' and that we should not prematurely optimize; optimizations tend to vary and be scenario specific, making code less idiomatic and obtuse, bad for readability and maintainability.\n\nPoint being: _You probably do not need to worry about this section._\n\nThat said, every usage scenario cannot be predicted, so an escape hatch is built into the library. If performance is sluggish this is potentially due to class name scope thrashing. Prop data used to create the class name scope is changing quickly causing the DOM sub-tree to rerender (e.g., live data). To tell Style It to ignore this prop during hash generation mark the prop as internal by prefixing `_` to the prop name (e.g, `_someProp`).\n\nProps like `value` on `` and `` are automatically ignored, as are props internal to React (they are not idempotent and change from server to client).\n\n\n### License\n[MIT](LICENSE). Copyright © 2016-present Joshua Robinson.\n","maintainers":[{"name":"joshuarobinson","email":"jbrobin2@gmail.com"}],"time":{"modified":"2022-06-27T01:29:15.033Z","created":"2016-09-06T02:14:26.051Z","1.2.0":"2016-09-06T02:14:26.051Z","1.2.1":"2016-09-07T04:20:03.416Z","1.2.2":"2016-09-07T04:38:41.130Z","1.2.3":"2016-09-07T11:33:21.212Z","1.2.4":"2016-09-07T11:50:17.521Z","1.2.5":"2016-09-07T12:46:24.910Z","1.2.6":"2016-09-07T12:50:32.260Z","1.2.7":"2016-09-07T12:55:45.289Z","1.2.8":"2016-09-08T01:13:13.733Z","1.2.9":"2016-09-08T01:40:00.908Z","1.2.10":"2016-09-08T05:36:34.118Z","1.2.11":"2016-10-18T12:44:47.541Z","1.2.12":"2016-12-03T06:09:57.251Z","1.3.12":"2016-12-31T03:35:04.629Z","1.3.1":"2016-12-31T06:59:58.701Z","1.3.2":"2016-12-31T07:02:55.098Z","1.3.3":"2016-12-31T10:13:43.749Z","1.4.0":"2016-12-31T10:31:23.503Z","1.4.1":"2016-12-31T10:39:56.770Z","1.4.2":"2016-12-31T10:41:46.617Z","1.4.3":"2016-12-31T10:48:07.161Z","1.5.0":"2016-12-31T10:52:46.348Z","1.5.1":"2016-12-31T19:11:15.533Z","1.5.2":"2016-12-31T19:17:04.461Z","1.5.3":"2016-12-31T19:26:45.295Z","1.5.4":"2017-01-10T06:43:14.352Z","1.5.5":"2017-01-13T16:18:54.009Z","1.5.6":"2017-02-20T01:26:15.504Z","1.6.0":"2017-02-25T05:09:27.480Z","1.6.1":"2017-02-25T06:11:03.569Z","1.6.2":"2017-02-25T06:50:22.816Z","1.6.3":"2017-02-25T08:25:35.106Z","1.6.4":"2017-02-26T11:42:36.551Z","1.6.5":"2017-02-27T14:42:25.006Z","1.6.6":"2017-03-09T02:43:28.629Z","1.6.7":"2017-03-09T04:43:55.266Z","1.6.8":"2017-05-02T14:03:51.407Z","1.6.9":"2017-05-13T02:44:27.701Z","1.6.10":"2017-05-13T03:33:39.050Z","1.6.11":"2017-05-13T03:57:19.117Z","1.6.12":"2017-05-13T04:44:31.246Z","1.6.13":"2017-08-24T04:05:02.646Z","2.0.0":"2017-12-25T10:30:16.431Z","2.1.0":"2018-12-15T18:11:50.587Z","2.1.1":"2019-01-03T23:11:46.962Z","2.1.2":"2019-01-03T23:50:49.680Z","2.1.3":"2019-04-24T20:53:26.655Z","2.1.4":"2019-06-16T16:49:21.584Z"},"homepage":"https://github.com/buildbreakdo/style-it","keywords":["react-style","style-it","react","scope","scoped","inline","embed","embedded","style-element","style","styles","styling","css","classes","classname","classnames","util","utility","react-component","aphrodite","babel-plugin-css-in-js","bloody-react-styled","cess-loader","classy","csjs","css-loader","css-ns","cssx-loader","hyperstyles","es-css-modules","j2c","jsxstyle","radium","react-css-builder","react-css-components","react-css-modules","react-cxs","react-free-style","react-inline-css","react-inline","react-inline-style","react-jss","react-look","react-native-web","react-statics-styles","react-styl","react-styleable","react-stylematic","react-theme","react-vstyle","reactcss","scope-styles","smart-css","stilr","styling","stile","react-media-queries"],"repository":{"type":"git","url":"git+https://github.com/buildbreakdo/style-it.git"},"author":{"name":"buildbreakdo"},"bugs":{"url":"https://github.com/buildbreakdo/style-it/issues"},"license":"MIT","readmeFilename":"README.md"}