CSS in JS in action

CSS in JS in action - Fahmi Idris - Frontend Engineer at Kata.ai

Transcript

1. CSS in JS Fahmi Idris - Frontend Engineer
2. who am i? Fahmi Idris · fahmi@kata.ai - Frontend Engineer @ Kata.ai - FIFA Gamer (FIFA Ultimate Team)
3. what is CSS? • CSS stands for Cascading Style Sheets • CSS describes how HTML elements are to be displayed
4. CSS syntax example <style> body { margin: 0; text-align: center; } h1 { color: blue; font-size: 12px; } p { font-size: 20px; } </style>
5. CSS preprocessor CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax.
6. CSS preprocessor example
7. SASS syntax example $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; ul { margin: 0; padding: 0; list-style: none; } }
8. CSS in JS “CSS-in-JS” refers to a pattern where CSS is composed using JavaScript instead of defined in external files.
9. CSS in JS example
10. Styled Components utilises tagged template literals to style your components. It removes the mapping between components and styles.
11. how it works? • Evaluate the tagged template. • Generate the new CSS class name. • Preprocess the styles with stylis. • Inject the preprocessed CSS into the page. https://medium.com/styled-components/how-styled-components-works-618a69970421
12. showcase
13. example
14. pros • Local Scoping • Reusability • Dynamic Functionality • Provides non-CSS features like nesting • No need to think about uniq names for CSS classes
15. cons • Learning Curve • Extra Layer of Complexity • Code Readability
16. CSS in JS list https://github.com/MicheleBertoli/css-in-js
17. thanks