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
Sopa de Letrinhas CSS | Alphabet soup CSS
Search
Juliana Negreiros
August 27, 2019
Programming
1
75
Sopa de Letrinhas CSS | Alphabet soup CSS
- Lambda Sorocaba #4 (20/04/2019)
- 5º meetup Caelum (27/08/2019)
Juliana Negreiros
August 27, 2019
Tweet
Share
More Decks by Juliana Negreiros
See All by Juliana Negreiros
Um guia para começar no mundo Front End
juunegreiros
0
340
Desmistificando a área de TI
juunegreiros
0
69
Como otimizar seu site com lighthouse e core web vitals
juunegreiros
0
430
Introdução ao Git
juunegreiros
0
54
Webpacker e a Jornada do Heroi
juunegreiros
0
22
Como modularizar seu front-end sem depender de um framework
juunegreiros
0
87
Pensando logicamente: introdução à lógica de programação | Thinking logically: introduction to programming logic
juunegreiros
0
60
Carreiras em TI
juunegreiros
0
53
Javascript, um menino serelepe | Javascript, a serelepe guy
juunegreiros
0
230
Other Decks in Programming
See All in Programming
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
430
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
210
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.6k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
400
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.7k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
780
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
920
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
19
7.5k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
230
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to Ace a Technical Interview
jacobian
278
23k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Statistics for Hackers
jakevdp
799
220k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
960
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Designing for Performance
lara
610
69k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Producing Creativity
orderedlist
PRO
346
40k
Transcript
Sopa de Letrinhas CSS
Juliana Negreiros 2
OS PROBLEMAS Por que muitas pessoas não gostam de mexer
com CSS?
Retrospectiva ⊙ Arquivo único + framework ⊙ Manutenção ⊙ Inspecionar
o elemento ⊙ Muito código inútil e difícil manutenção 4
Aprender CSS ⊙ É fácil de aprender ⊙ Soluções na
internet ⊙ Fácil de desandar 5
Problemas ⊙ Conflito de nomenclatura ⊙ Não reaproveitamento de classes
⊙ Nomes que não dizem nada ⊙ Arquivos quilométricos ⊙ Código inútil 6
Medo! 7
O QUE GOSTARÍAMOS? 8
Mundo ideal ⊙ Menos CSS ⊙ CSS mais limpo ⊙
Sabemos onde mexer sem medo ⊙ Saber o que está acontecendo 9
ALGUMAS SOLUÇÕES 10
Pensar antes de fazer 11
BEM Block Element Modifier http://getbem.com/
O que é? Exemplo ⊙ Bloco ⊙ Elemento ⊙ Modificador
13
Resumo ⊙ Separação de conceitos ⊙ Princípio de responsabilidade única
⊙ Você sabe o que está alterando ⊙ Especificidade ⊙ MUITO verboso 14
Styled-components https://www.styled-components.com/
O que é? Exemplo ⊙ Estilos por componente para React
16
Resumo ⊙ Carrega pouco CSS ⊙ Especificidade e nomenclatura de
classes ⊙ Reutilização ⊙ Similar a pré-processadores 17
CSS Funcional Ou Atomic Design
O que é? Exemplo ⊙ Pequenos css baseados na sua
funcionalidade visual ⊙ Tailwind, BassCSS, Tachyons, etc 19
Frameworks ⊙ Não vamos criar essas classes na mão ⊙
Tailwind, BassCSS, Tachyons, etc ⊙ Personalizável ⊙ Extrair componentes 20
Mas não é style inline? ⊙ Media queries ⊙ Opções
e variáveis ⊙ Especificidade ⊙ :before e :after ⊙ Múltiplos elementos ⊙ Triste de escrever 21
Resumo ⊙ Quase não escreve CSS ⊙ Não precisa pensar
em nomear coisas ⊙ Velocidade ⊙ Consistência ⊙ Efeito cascata não existe ⊙ Tamanho do CSS pouco muda ⊙ Fácil manutenção ⊙ Perda de reusabilidade 22
OOCSS Object-Oriented CSS http://oocss.org/ 23
Conceitos ⊙ Objetos ⊙ Skins e estruturas ⊙ Container e
conteúdo ⊙ Evitar especifidade 24
SMACSS Scalable and Modular Architecture CSS http://smacss.com/ 25
Conceitos ⊙ Base ⊙ Layout ⊙ Module ⊙ State ⊙
Theme 26
RSCSS Reasonable System for CSS https://rscss.io/ 27
Conceitos ⊙ Child selector > ⊙ Componentes e variações 28
FINALIZANDO 29
Use o que a ferramenta te oferece <3 30
Variáveis 31 $teko: 'Teko', sans-serif; $primary-font: $teko; $aqua: #19f3ff; $primary-color:
$aqua; $desktop-width: 1024px;
Mixins 32 @mixin desktop { @media (min-width: #{$desktop-width}) { @content;
} }
Funções 33 @function px-to-rem($value, $base: $default-font-size) { @return #{$value/$base}rem; }
Links ⊙ https://johnpolacek.github.io/the-case -for-atomic-css/ ⊙ https://adamwathan.me/css-utility-cla sses-and-separation-of-concerns/ ⊙ https://hackernoon.com/full-re-write- with-tachyons-and-functional-css-a-
case-study-part-1-635ccb5fb00b ⊙ https://willianjusten.com.br/falando-s obre-rscss 34
Obrigada! @juunegreiros bit.ly/sopa-letrinhas-css 35