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
81
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
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
120
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
640
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
670
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
10
1.6k
Amazon S3 Tablesと外部分析基盤連携について / Amazon S3 Tables and External Data Analytics Platform
nttcom
0
120
表現を育てる
kiyou77
1
200
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
520
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
120
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
920
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
320
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
540
Featured
See All Featured
Navigating Team Friction
lara
183
15k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
BBQ
matthewcrist
86
9.5k
How GitHub (no longer) Works
holman
313
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
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