Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS in JavaScripto, the anti-pattern that is good

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Igor Halfeld Igor Halfeld
October 12, 2019
Programming
1
100

CSS in JavaScripto, the anti-pattern that is good

Avatar for Igor Halfeld

Igor Halfeld

October 12, 2019
Tweet

More Decks by Igor Halfeld

See All by Igor Halfeld
Modular monoliths with fastify
Avatar for Igor Halfeld igorhalfeld
0
190
How to migrate legacy frontend?
Avatar for Igor Halfeld igorhalfeld
1
130
Patterns for perfect components in Vue.js
Avatar for Igor Halfeld igorhalfeld
0
110
Clean Architecture no Front-end (update 2021-05-11)
Avatar for Igor Halfeld igorhalfeld
0
64
Step by step I followed a career in software
Avatar for Igor Halfeld igorhalfeld
0
700
Using AI to create memes
Avatar for Igor Halfeld igorhalfeld
0
530
Deninho, the TS children
Avatar for Igor Halfeld igorhalfeld
1
220
Micro Front-ends, what they don't tell you
Avatar for Igor Halfeld igorhalfeld
0
390
Front-end Clean Architecture
Avatar for Igor Halfeld igorhalfeld
2
290

Other Decks in Programming

See All in Programming
Geminiの機能を調べ尽くしてみた
Avatar for yosshi naruyoshimi
0
170
AI主導でFastAPIのWebサービスを作るときに 人間が構造化すべき境界線
Avatar for Jun okazaki okajun35
0
260
Lambda のコードストレージ容量に気をつけましょう
Avatar for tatsuki-yamada tattwan718
0
200
Python’s True Superpower
Avatar for Hynek Schlawack hynek
0
190
日本だけで解禁されているアプリ起動の方法
Avatar for Ryu-nakayama ryunakayama
0
360
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
280
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
Avatar for Date Huang tjjh89017
0
190
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
Avatar for Manfred Steyer manfredsteyer
PRO
0
190
個人開発は儲からない - それでも開発開始1ヶ月で300万円売り上げた方法
Avatar for Taishi Yamasaki taishiyade
0
110
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
430
nilとは何か 〜interfaceの構造とnil!=nilから理解する〜 / Understanding nil in Go Interface Representation and Why nil != nil
Avatar for kuro kuro_kurorrr
2
1k
株式会社 Sun terras カンパニーデック
Avatar for Sun terras.Inc sunterras
0
1.8k

Featured

See All Featured
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
1.9k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
92
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
120
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
220
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
350

Transcript

  1. CSS in JavaScripto O anti-pattern que deu certo

  2. Por que Anti-Pattern?

  3. None

  4. Quais os problemas do CSS?

  5. Manutenibilidade Escalabilidade Regras de CSS são globais

  6. Essa talk é pra te mostrar como hoje em dia

    a gente consegue resolver isso… …não é nada que o CSS não resolva, mas que junto com a DX te ajude a desenvolver

  7. Igor Halfeld Software Engineer & Consultancy igorluiz.me - @IgorHalfeld

  8. Como resolver o problema? Precisamos evoluir o CSS junto com

    a web…

  9. Vamos resolver o problema com javascript, o que pode dar

    errado?

  10. Afinal o javascript já resolveu uns problemas do HTML.

  11. None

  12. Virgulas CamelCase Números Strings

  13. Como usar?

  14. CSS Inline

  15. Bibliotecas! JSS, Glamor e Styled Components

  16. JSS

  17. Glamor

  18. Styled C.

  19. DEMO

  20. Obrigado! igorluiz.me/talks - @IgorHalfeld