Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Sopa de Letrinhas CSS | Alphabet soup CSS
Juliana Negreiros
August 27, 2019
Programming
1
57
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
240
Desmistificando a área de TI
juunegreiros
0
12
Como otimizar seu site com lighthouse e core web vitals
juunegreiros
0
370
Introdução ao Git
juunegreiros
0
22
Webpacker e a Jornada do Heroi
juunegreiros
0
9
Como modularizar seu front-end sem depender de um framework
juunegreiros
0
33
Pensando logicamente: introdução à lógica de programação | Thinking logically: introduction to programming logic
juunegreiros
0
38
Carreiras em TI
juunegreiros
0
35
Javascript, um menino serelepe | Javascript, a serelepe guy
juunegreiros
0
92
Other Decks in Programming
See All in Programming
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.7k
Branching out to Jetpack Compose
chrisbanes
4
1.2k
パターンマッチングを学んで新しいJavaの世界へ!Java 18までの目玉機能をおさらいしよう / Java 18 pattern matching
ihcomega56
3
390
ドメインモデル方式のクラス設計 座談会
masuda220
PRO
3
1k
設計ナイト2022 トランザクションスクリプト
shinpeim
11
2k
Airflowはすごいぞ!
hankehly
0
370
はてなフォトライフをECSに移行した話 / Hatena Engineer Seminar #20
cohalz
1
820
#JJUG_CCC 「サポート」は製品開発? - JDBCライブラリ屋さんが実践する攻めのテクニカルサポートとJavaエンジニアのキャリアについて -
cdataj
0
420
Swift Regex
usamik26
0
150
ISUCON12 事前講習
rosylilly
3
4.3k
開発速度を5倍早くするVSCodeの拡張機能を作った
purp1eeeee
2
150
NEWT.net: Frontend Technology Selection
xpromx
0
230
Featured
See All Featured
Robots, Beer and Maslow
schacon
152
7.1k
Scaling GitHub
holman
451
140k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
4
500
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Designing for humans not robots
tammielis
241
23k
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