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
52
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
74
Introduction to Flask
ngalambackend
0
140
Achieving API Performance and Scalability
ngalambackend
0
79
Interfaces in Go
ngalambackend
0
52
Productive Remote Working with Scrum
ngalambackend
0
66
Covid Tracker Kota Malang
ngalambackend
0
59
Supercharge Local Development with Docker
ngalambackend
1
120
Building Scalable and Flexible API by Leveraging GraphQL and BigTable
ngalambackend
1
290
Software 2.0 With Go
ngalambackend
1
49
Other Decks in Technology
See All in Technology
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
335
57k
A Philosophy of Restraint
colly
203
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
A Tale of Four Properties
chriscoyier
158
23k
Practical Orchestrator
shlominoach
186
10k
Agile that works and the tools we love
rasmusluckow
328
21k
Visualization
eitanlees
146
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
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