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
38
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
70
Introduction to Flask
ngalambackend
0
98
Achieving API Performance and Scalability
ngalambackend
0
59
Interfaces in Go
ngalambackend
0
48
Productive Remote Working with Scrum
ngalambackend
0
56
Covid Tracker Kota Malang
ngalambackend
0
55
Supercharge Local Development with Docker
ngalambackend
1
92
Building Scalable and Flexible API by Leveraging GraphQL and BigTable
ngalambackend
1
280
Software 2.0 With Go
ngalambackend
1
40
Other Decks in Technology
See All in Technology
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
2
360
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
980
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
150
AWS を使う上で知っておきたいオンプレミス知識/aws-on-premise-essentials
emiki
1
4.3k
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.2k
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
840
反実仮想機械学習とは何か
usaito
PRO
8
2.9k
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
880
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
210
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
270
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
350
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.3k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
39k
Debugging Ruby Performance
tmm1
70
11k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
How GitHub (no longer) Works
holman
304
140k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Making Projects Easy
brettharned
108
5.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
A Tale of Four Properties
chriscoyier
150
22k
Six Lessons from altMBA
skipperchong
20
3k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Agile that works and the tools we love
rasmusluckow
324
20k
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