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
330
Desmistificando a área de TI
juunegreiros
0
67
Como otimizar seu site com lighthouse e core web vitals
juunegreiros
0
430
Introdução ao Git
juunegreiros
0
50
Webpacker e a Jornada do Heroi
juunegreiros
0
22
Como modularizar seu front-end sem depender de um framework
juunegreiros
0
85
Pensando logicamente: introdução à lógica de programação | Thinking logically: introduction to programming logic
juunegreiros
0
56
Carreiras em TI
juunegreiros
0
53
Javascript, um menino serelepe | Javascript, a serelepe guy
juunegreiros
0
200
Other Decks in Programming
See All in Programming
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Spring gRPC について / About Spring gRPC
mackey0225
0
220
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.9k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
35
14k
SpringBoot3.4の構造化ログ #kanjava
irof
2
980
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
250
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
220
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
GAEログのコスト削減
mot_techtalk
0
120
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
730
Featured
See All Featured
Building Adaptive Systems
keathley
40
2.4k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Music & Morning Musume
bryan
46
6.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The World Runs on Bad Software
bkeepers
PRO
67
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Agile that works and the tools we love
rasmusluckow
328
21k
Code Review Best Practice
trishagee
66
17k
Fireside Chat
paigeccino
34
3.2k
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