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
79
Introduction to Flask
ngalambackend
0
170
Achieving API Performance and Scalability
ngalambackend
0
87
Interfaces in Go
ngalambackend
0
57
Productive Remote Working with Scrum
ngalambackend
0
87
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
320
Software 2.0 With Go
ngalambackend
1
51
Other Decks in Technology
See All in Technology
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
170
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
590
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
960
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
890
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.8k
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
100
pprof vs runtime/trace (FlightRecorder)
task4233
0
160
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
120
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
17k
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
160
Where will it converge?
ibknadedeji
0
180
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
390
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.5k
It's Worth the Effort
3n
187
28k
Code Reviewing Like a Champion
maltzj
525
40k
Scaling GitHub
holman
463
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Practical Orchestrator
shlominoach
190
11k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Side Projects
sachag
455
43k
A Tale of Four Properties
chriscoyier
160
23k
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