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
雑に思考を整理する技術と効能
konifar
58
29k
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
140
Ruby GitHub Packages
bkuhlmann
0
630
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
210
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
Milestoner
bkuhlmann
1
410
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
640
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
320
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
750
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
230
Featured
See All Featured
Bash Introduction
62gerente
604
210k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Why Our Code Smells
bkeepers
PRO
331
56k
Ruby is Unlike a Banana
tanoku
96
10k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
KATA
mclloyd
15
12k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
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