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
78
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
81
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
20150719_Amazon Nova Canvas Virtual try-onアプリ 作成裏話
riz3f7
0
140
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
220
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
240
MCPと認可まわりの話 / mcp_and_authorization
convto
2
240
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
290
今日からあなたもGeminiを好きになる
subaruhello
1
620
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
250
QuickBooks®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
qbsupportinfo
0
120
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
1.9k
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
230
Jitera Company Deck / JP
jitera
0
180
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
3
360
Featured
See All Featured
Visualization
eitanlees
146
16k
Faster Mobile Websites
deanohume
308
31k
Building an army of robots
kneath
306
45k
Navigating Team Friction
lara
187
15k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Embracing the Ebb and Flow
colly
86
4.8k
Agile that works and the tools we love
rasmusluckow
329
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Optimizing for Happiness
mojombo
379
70k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
How STYLIGHT went responsive
nonsquared
100
5.7k
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