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
88
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
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
300
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
130
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
220
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
0
130
20251027_findyさん_音声エージェントLT
almondo_event
2
430
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
310
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
3
350
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.4k
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
160
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
0
310
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
130
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Six Lessons from altMBA
skipperchong
29
4k
Navigating Team Friction
lara
190
15k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Producing Creativity
orderedlist
PRO
347
40k
It's Worth the Effort
3n
187
28k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Mobile First: as difficult as doing things right
swwweet
225
10k
The Invisible Side of Design
smashingmag
302
51k
The Language of Interfaces
destraynor
162
25k
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