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
110

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
200
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
66
Step by step I followed a career in software
Avatar for Igor Halfeld igorhalfeld
0
710
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
400
Front-end Clean Architecture
Avatar for Igor Halfeld igorhalfeld
2
290

Other Decks in Programming

See All in Programming
AIに任せる範囲を安全に広げるためにやっていること
Avatar for Masashi Fukuzawa fukucheee
0
150
技術検証結果の整理と解析をAIに任せよう！
Avatar for Keisuke Ikeda keisukeikeda
0
130
どんと来い、データベース信頼性エンジニアリング / Introduction to DBRE
Avatar for nnaka2992 nnaka2992
1
320
メッセージングを利用して時間的結合を分離しよう #phperkaigi
Avatar for Takuma Kajikawa kajitack
3
280
仕様漏れ実装漏れをなくすトレーサビリティAI基盤のご紹介
Avatar for Kuniwak orgachem
PRO
7
2.9k
Feature Toggle は捨てやすく使おう
Avatar for gennei gennei
0
240
Takumiから考えるSecurity_Maturity_Model.pdf
Avatar for gessy0129 gessy0129
1
150
Everything Claude Code OSS詳細 — 5層構造の中身と導入方法
Avatar for techs-targe targe
0
150
PHPのバージョンアップ時にも役立ったAST（2026年版）
Avatar for Atsushi Matsuo matsuo_atsushi
0
220
野球解説AI Agentを開発してみた - 2026/02/27 LayerX社内LT会資料
Avatar for Shinichi Nakagawa shinyorke
PRO
0
350
S3ストレージクラスの「見える」「ある」「使える」は全部違う ─ 体験から見た、仕様の深淵を覗く
Avatar for ya_ma23 ya_ma23
0
870
最初からAWS CDKで技術検証してもいいんじゃない？
Avatar for アキキー | Akihisa Ikeda akihisaikeda
4
160

Featured

See All Featured
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
160
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
430
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
48k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
320
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.1k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
160
Docker and Python
Avatar for Tania Allard trallard
47
3.8k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
150
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
52k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.2k

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