Вся правда о CSS-in-JS

Что такое CSS-in-JS

Выражения fn`some string here`; называются Tagged Template Literal

Стили будут добавлены в CSSOM с помощью вызова insertRule(...)

			<style type="text/css">
  .eIxVkz { border-radius: 3px; padding: 0.25em 1em; margin: 0 1em;
    background: transparent; color: palevioletred; 
    border: 2px solid palevioletred; }
  .kqEuGv { border-radius: 3px;padding: 0.25em 1em; margin: 0 1em;
	background: transparent; color: palevioletred;
    border: 2px solid palevioletred;
    background:palevioletred; color:white; }
</style>
		

Что такое CSS-in-JS

Можем использовать Button как обычный React-компонент

Расширение стилей

Стилизация существующих компонентов

А может, не надо?

В чем профит?

• Более лаконичный код
React + classnames

vs

React + Styled Components

• Общий код у CSS и у JS

Инструменты

Atom

Sublime Text

VS Code

VIM NeoVim

WebStorm + другие JetBrains IDE

Субъективное сравнение

Верстка на SASS, LESS, PostCSS, БЭМ

Верстка на CSS-in-JS

Ссылки

1. styled-components
2. CSS-IN-JS-Benchmarks
3. emotion
4. Exploring the CSSOM: Making a CSS Object Analyzer
5. Awesome CSS in JS
6. CSS in JS
7. Stop using CSS in JavaScript for web development