Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS in JS in action
Search
Ngalam Backend Community
June 26, 2020
Technology
0
56
CSS in JS in action
CSS in JS in action - Fahmi Idris - Frontend Engineer at Kata.ai
Ngalam Backend Community
June 26, 2020
Tweet
Share
More Decks by Ngalam Backend Community
See All by Ngalam Backend Community
Web_Scraping_with_Scrapy.pdf
ngalambackend
0
77
Introduction to Flask
ngalambackend
0
160
Achieving API Performance and Scalability
ngalambackend
0
85
Interfaces in Go
ngalambackend
0
57
Productive Remote Working with Scrum
ngalambackend
0
77
Covid Tracker Kota Malang
ngalambackend
0
62
Supercharge Local Development with Docker
ngalambackend
1
120
Building Scalable and Flexible API by Leveraging GraphQL and BigTable
ngalambackend
1
310
Software 2.0 With Go
ngalambackend
1
50
Other Decks in Technology
See All in Technology
AI導入の理想と現実~コストと浸透〜
oprstchn
0
100
解析の定理証明実践@Lean 4
dec9ue
0
180
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.9k
rubygem開発で鍛える設計力
joker1007
2
220
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
480
フィンテック養成勉強会#54
finengine
0
180
5min GuardDuty Extended Threat Detection EKS
takakuni
0
160
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
120
本が全く読めなかった過去の自分へ
genshun9
0
590
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
480
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Embracing the Ebb and Flow
colly
86
4.7k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Facilitating Awesome Meetings
lara
54
6.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Being A Developer After 40
akosma
90
590k
Become a Pro
speakerdeck
PRO
28
5.4k
Docker and Python
trallard
44
3.4k
Code Review Best Practice
trishagee
68
18k
Transcript
CSS in JS Fahmi Idris - Frontend Engineer
who am i? Fahmi Idris ·
[email protected]
- Frontend Engineer
@ Kata.ai - FIFA Gamer (FIFA Ultimate Team)
what is CSS? • CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed
CSS syntax example <style> body { margin: 0; text-align: center;
} h1 { color: blue; font-size: 12px; } p { font-size: 20px; } </style>
CSS preprocessor CSS preprocessor is a program that lets you
generate CSS from the preprocessor's own unique syntax.
CSS preprocessor example
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; } }
CSS in JS “CSS-in-JS” refers to a pattern where CSS
is composed using JavaScript instead of defined in external files.
CSS in JS example
Styled Components utilises tagged template literals to style your components.
It removes the mapping between components and styles.
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
showcase
example
pros • Local Scoping • Reusability • Dynamic Functionality •
Provides non-CSS features like nesting • No need to think about uniq names for CSS classes
cons • Learning Curve • Extra Layer of Complexity •
Code Readability
CSS in JS list https://github.com/MicheleBertoli/css-in-js
thanks