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
110
1

CSS in JavaScripto, the anti-pattern that is good

Avatar for Igor Halfeld

Igor Halfeld

October 12, 2019

More Decks by Igor Halfeld

See All by Igor Halfeld
Modular monoliths with fastify
Avatar for Igor Halfeld igorhalfeld
0
210
How to migrate legacy frontend?
Avatar for Igor Halfeld igorhalfeld
1
140
Patterns for perfect components in Vue.js
Avatar for Igor Halfeld igorhalfeld
0
130
Clean Architecture no Front-end (update 2021-05-11)
Avatar for Igor Halfeld igorhalfeld
0
74
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
540
Deninho, the TS children
Avatar for Igor Halfeld igorhalfeld
1
230
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
300

Other Decks in Programming

See All in Programming
JavaDoc 再入門
Avatar for nagise nagise
0
320
依存関係から依存物へ―Dependencyという言葉の歴史をひも解く
Avatar for j_lee_inst j_lee
0
110
ローカルLLMでどこまでコードが書けるか -拡張版 /　How much code can be written on a local LLM Extended
Avatar for Naoki Kishida kishida
2
1.5k
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
Avatar for Holly Cummins hollycummins
0
280
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
920
AutonomyとControlのあいだ：Graflowで記述するAIエージェント協調
Avatar for Makoto Yui myui
0
120
IBM Bobを活用したレガシーアプリの最新化
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
1
190
Make SRE Operations Easier with Azure SRE Agent
Avatar for KAMEGAWA Kazushi kkamegawa
0
5.3k
気圧・高度・GPSを記録&可視化するアプリ「Koudo」を作った話
Avatar for Hajime Kato hjmkth
1
110
The NotImplementedError Problem in Ruby
Avatar for Koichi ITO koic
1
710
Inside Stream API
Avatar for Yuichi.Sakuraba skrb
1
690
キャリア迷子上等 ─ "ない道"は自分で作ればいい
Avatar for 16bit_idol 16bitidol
3
2k

Featured

See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
310
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.6k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
950
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
55k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
570
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
180
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k

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