Slides from my talk on React Moscow Meetup 2 at March 15, 2017.

1. PreJSS: the final point
in the CSS war
Denis Izmaylov
Mar 15, 2017

2. Denis Izmaylov
1. Over 17 years of Software and Web
development experience
2. The last 7 years focused exclusively on
Front-end and Web: 15+ projects,
including React.js, SPA and high-load
3. Open Source contributor
4. Talks: HighLoad++ 2015, AgileDays 2016,
DevConf 2016, React Amsterdam, etc
5. Regular speaker on MoscowJS
6. Few popular articles and interviews
on Medium and Habrahabr
7. Events: Moscow Node.js Meetup, Moscow
Kubernetes Meetup and this one

3. Web and Mobile development services

4. 1. We develop Web, Mobile
and DevOps projects for
our customers
2. Global international
market (EU, APAC, US, HK)
3. Most efficient and
performant technologies
4. More than 20 talents
engineers and designers
5. Remote-friendly

5. Prerequisite Knowledge
1. SCSS
2. PostCSS
3. JSS
5

6. Huge thanks to everyone
in JavaScript community
who made those years better

7. 7
1994

8. 8
Better
1. Scripts in hypertext documents
2. XHR (aka AJAX)
3. Styling elements

9. 9
Draw UI in documents

10. “It is a triumph of
performance over semantics”
10

11. Let’s hack
Document Object Model
(DOM)
11

13. But

14. Pure Applications

15. Requirements are growing

16. 16

17. Code refactoring and
technical debts are expensive

18. New abstractions
to deliver changes faster
18

19. More abstractions –
more source code

20. Split by scripts
20

21. More requirements –
more scripts

22. Load order hell

23. Split by scripts

24. 1. Require.js
2. AMD
3. CommonJS
4. Dependencies
5. Pre-build step
2009

25. JavaScript bundles

26. 26
1. Modules
2. Images
3. Fonts
4. Data
5. CSS
JavaScript bundles

27. 27
1. Modules
2. Images
3. Fonts
4. Data
5. CSS
JavaScript bundles

28. More requirements -
more CSS

29. New abstractions
to deliver changes faster
29

30. More abstractions -
more source code

31. CSS became scripts
31
1. Variables
2. Functions
3. Mixins
4. Templates
5. Nesting
6. etc

32. 32

33. CSS formats hell
33
1. LESS
2. SASS/SCSS
3. Stylus
4. …

34. There was long years of CSS
preprocessors war

35. SASS finally won
35

36. SASS finally won
36
M
onolithic

37. 2nd Generation
37
1. Rework/Styl
2. PostCSS

38. PostCSS
38

39. PostCSS
39
1. Parse CSS to AST/JSON tree
2. Apply plugins to this tree
3. Compile final tree to CSS

40. PostCSS
40
1. Parse CSS to AST/JSON tree
2. Apply plugins to this tree
3. Compile final tree to CSS
• CSS powered by plugins
• CSS modules

41. PostCSS
41
“Post-modern”
|
“after CSS”

42. CSS in Applications
42
1. Build step
2. Build time
3. CSS is not about styling my documents
4. CSS is about UI and components
5. CSS is a script language
6. CSS is a part of your code

43. Complexity

44. 44

45. After PostCSS
45
1. Do not parse CSS.
Define styles in JavaScript objects.
2. Do not use plugins for everything.
Use plain functions instead.
3. Use default plugins presets, like Babel.

46. — Seriously? CSS in JS?!

47. 2013, Facebook, React.js
47

48. 2013, Facebook, React.js
XML-like constructions
in JavaScript code to explain
Components tree
48

49. React covers
HTML elements only *

50. October 2014, JSS

51. Noveber 2014, CSS-in-JS
Christopher Chedeau,
Facebook
51

52. React Native
52

53. JSS is not about
Inline Styles

54. JSS generates a
real CSS from JavaScript

55. JSS notation

56. JSS usage
56

57. Killer feature

58. 58
Critical Path CSS
Styles by JSSPre-processed CSS
1. All styles
2. Selected
manually
3. Per CSS file
1. Rendered styles
2. Selected
automatically
3. Per Components
state

60. JSS features
60
1. Render styles for Component tree only
to get Critical CSS
2. Remove styles when Components
detached
3. Styles re-calculation“on-the-fly”
4. Portable: DOM, Inline Styles, React Native
5. Great performance

61. JSS maintenance
61

62. What’s about bad things?

63. JSS means
1. You can’t re-use already existing CSS
2. You can’t copy CSS from a wide range of
awesome examples
3. You can’t copy CSS from DevTools

64. Good news

65. Now you can

66. PreJSS

67. Universal
CSS to JSS adapter

69. After PreJSS

71. Template Strings +
PostCSS +
JSS + ❤ = PreJSS

72. Problems before
72
1. Wide range of CSS frameworks
2. A lot of CSS formats
3. A few of CSS parsers
4. A dozens of JSS formats
5. Hard to migrate from CSS to JSS

73. PreJSS Architecture
1. Styles Declaration
2. CSS Parser *
3. PreJSS Adapter *
Styles
Declarations
PreJSS Adapter
Any
CSS-in-JS
library
Prepare
CSS
CSS
Parser
Prepare
JSS
* - optional, overridable,
PostCSS as default
(built-in)
73

74. 74
1. Use already
existing CSS
2. Use CSS from a
wide range of
awesome examples
3. Use CSS from
DevTools
PreJSS means

75. Syntax Highlighting Concept

76. PreJSS ecosystem
76
1. Loader for webpack to use CSS styles as JSS
2. Babel plugin to transform PreJSS Styles
Declarations into JSS objects
3. Styles Linter by PostCSS plugin
4. Syntax highlighting (WIP)
5. CLI tool for converting CSS into JS modules

77. PreJSS in real world
77

78. 78
PreJSS
JSS
CSS
1. No CSS wars anymore
2. Vendor-less
3. Use the best bits of
whole CSS world
4. Less complexity
5. Saved time and budget
6. Focus on important things
PreJSS is the final point

79. 79
100th star today 🎉

80. https://twitter.com/denisizmaylov/status/
736321066403045376
80

81. Welcome to the club

82. https://github.com/axept/prejss
82

83. Questions?
@DenisIzmaylov
DenisIzmaylov
denis_izmaylov
Denis Izmaylov
Send“Hello”to:
izmaylov.dm@gmail.com