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
160
Achieving API Performance and Scalability
ngalambackend
0
86
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
310
Software 2.0 With Go
ngalambackend
1
51
Other Decks in Technology
See All in Technology
2025/09/16 仕様駆動開発とAI-DLCが導くAI駆動開発の新フェーズ
masahiro_okamura
0
130
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
200
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
480
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
250
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
データ分析エージェント Socrates の育て方
na0
6
2.2k
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
1
160
エンジニアが主導できる組織づくり ー 製品と事業を進化させる体制へのシフト
ueokande
1
100
Featured
See All Featured
Scaling GitHub
holman
463
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Navigating Team Friction
lara
189
15k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
Six Lessons from altMBA
skipperchong
28
4k
Why Our Code Smells
bkeepers
PRO
339
57k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Done Done
chrislema
185
16k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
How STYLIGHT went responsive
nonsquared
100
5.8k
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