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
69
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
320
Desmistificando a área de TI
juunegreiros
0
49
Como otimizar seu site com lighthouse e core web vitals
juunegreiros
0
420
Introdução ao Git
juunegreiros
0
34
Webpacker e a Jornada do Heroi
juunegreiros
0
18
Como modularizar seu front-end sem depender de um framework
juunegreiros
0
67
Pensando logicamente: introdução à lógica de programação | Thinking logically: introduction to programming logic
juunegreiros
0
48
Carreiras em TI
juunegreiros
0
47
Javascript, um menino serelepe | Javascript, a serelepe guy
juunegreiros
0
130
Other Decks in Programming
See All in Programming
Goのエラースタックトレースの歴史と今後
sonatard
9
1.5k
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
使ってみよう Azure AI Document Intelligence
kosmosebi
2
320
Snowflakeで眠ったデータを起こそう!
estie
0
120
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
810
Rethinking UI building strategies @ SFI 2024
letelete
0
270
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
350
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
110
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
340
Ruby Function Composition
bkuhlmann
1
330
Ruby GitHub Packages
bkuhlmann
0
630
Featured
See All Featured
Optimizing for Happiness
mojombo
370
69k
Debugging Ruby Performance
tmm1
70
11k
Why Our Code Smells
bkeepers
PRO
331
56k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Six Lessons from altMBA
skipperchong
21
3k
Web development in the modern age
philhawksworth
202
10k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
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