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
Organizando o CSS!
Search
Raphael Fabeni
August 09, 2014
Technology
10
1.5k
Organizando o CSS!
Talk apresentada no primeiro meetup CSS SP, sobre organização e documentação de CSS!
Raphael Fabeni
August 09, 2014
Tweet
Share
More Decks by Raphael Fabeni
See All by Raphael Fabeni
Cultura de Desenvolvimento
raphaelfabeni
1
330
CSS Tips
raphaelfabeni
5
1k
Falando sobre Cultura de Desenvolvimento
raphaelfabeni
9
1.3k
CSS e UX
raphaelfabeni
7
3.6k
Os camaradas Grunt e Bower
raphaelfabeni
3
180
Os paranauês do CSS3
raphaelfabeni
9
1k
Do início ao fim com WordPress
raphaelfabeni
2
950
Keep calm and let's play CSS3
raphaelfabeni
8
920
Other Decks in Technology
See All in Technology
ゆるSRE #11 LT
okaru
1
590
原則から考える保守しやすいComposable関数設計
moriatsushi
2
330
Tenstorrent 開発者プログラム
tenstorrent_japan
0
310
IIWレポートからみるID業界で話題のMCP
fujie
0
180
「伝える」を加速させるCursor術
naomix
0
620
Create a Rails8 responsive app with Gemini and RubyLLM
palladius
0
120
VCpp Link and Library - C++ breaktime 2025 Summer
harukasao
0
150
型システムを知りたい人のための型検査器作成入門
mame
15
3.7k
AWS と定理証明 〜ポリシー言語 Cedar 開発の舞台裏〜 #fp_matsuri / FP Matsuri 2025
ytaka23
9
2.4k
脅威をモデリングしてMCPのセキュリティ対策を考えよう
flatt_security
4
1.6k
IAMのマニアックな話 2025を執筆して、 見えてきたAWSアカウント管理の現在
nrinetcom
PRO
4
550
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
sansan_randd
1
270
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
920
Fireside Chat
paigeccino
37
3.5k
Documentation Writing (for coders)
carmenintech
71
4.9k
Speed Design
sergeychernyshev
30
990
A Modern Web Designer's Workflow
chriscoyier
693
190k
Why Our Code Smells
bkeepers
PRO
337
57k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Designing for Performance
lara
609
69k
Being A Developer After 40
akosma
90
590k
Unsuck your backbone
ammeep
671
58k
Transcript
Organizando a casa o CSS @raphaelfabeni
@raphaelfabeni http://raphaelfabeni.com.br
http://www.a2comunicacao.com.br
http://bit.ly/raphael-tableless
Então CSS é fácil?
http://www.raphaelfabeni.com.br/pikachu-css3/
None
Mas, e a documentação?
None
Ou melhor... Você entende seu código depois de um tempo
sem mexer nele?
CSS3 Pré processadores Documentação e Padrões Animações Novas Features Responsivo
CSS3 x JS Organização e Modularização Frameworks Boas Práticas Perfomance Compatibilidade
CSS3 Pré processadores Documentação e Padrões Animações Novas Features Responsivo
CSS3 x JS Organização e Modularização Frameworks Boas Práticas Perfomance Compatibilidade
“Quando você tem muitos padrões, você não tem nenhum padrão!”
Jaydson
None
Antes pelo excesso do que pela falta
None
Mais adequado para você ou seu time
Não é sempre você que vai manter aquele código
Outras pessoas vão ter que botar a mão na massa
Você terá que mexer em código de outras pessoas
A2 idiomatic HTML CSS PHP JS
HTML CSS PHP JS
http://bit.ly/idiomatic-css
http://bit.ly/comentarios-css
http://bit.ly/comentarios-css
Botão • padrão • variações cores tamanhos
...
.btn { ... }
.btn { ... } .btn-primary { ... }
.btn { ... } .btn-primary { ... } .btn-success {
... } .btn-danger { ... }
.btn { ... } .btn-primary { ... } .btn-success {
... } .btn-danger { ... } .btn-small { ... } .btn-big { ... }
.btn { } .btn:hover, .btn:focus { } .btn-primary { }
.btn-primary:hover, .btn-primary:focus { } .btn-success { } .btn-success:hover, .btn-success:focus { } .btn-danger { } .btn-danger:hover, .btn-danger:focus { } .btn-small { } .btn-big { }
.btn { } .no-boxshadow .btn { } .btn:hover, .btn:focus {
} .btn-primary { } .no-boxshadow .btn-primary { } .btn-primary:hover, .btn-primary:focus { } .btn-success { } .no-boxshadow .btn-success { } .btn-success:hover, .btn-success:focus { } .btn-danger { } .no-boxshadow .btn-danger { } .btn-danger:hover, .btn-danger:focus { } .btn-small { } .btn-big { }
Divida seu código em partes
Documente seu código, mesmo que pareça bobeira
Cores Tamanho • default • primary • success • danger
• hover • focus • no-boxshadow • small • big Botão • padrão
/* ========================================================================== Buttons ========================================================================== */ /* ========================================================================== Default ========================================================================== */
.btn { }
/* ========================================================================== Buttons ========================================================================== */ /* * Default button *
Tags: <a>, <button>, <input> */ /* ========================================================================== Default ========================================================================== */ .btn { } .btn:hover, .btn:focus { } /* No box-shadow style - old browsers */ .no-boxshadow .btn { }
/* ========================================================================== Default ========================================================================== */ .btn { } .btn:hover, .btn:focus
{ } /* No box-shadow style - old browsers */ .no-boxshadow .btn { } /* ========================================================================== Colors ========================================================================== */ /* Primary ========================================================================== */ /* * Used for primary actions * Lorem ipsum dolor sit amet, consectetur. */ .btn-primary { } .btn-primary:hover, .btn-primary:focus { } /* No box-shadow style - old browsers */ .no-boxshadow .btn-primary { }
/* Success ========================================================================== */ /* * Lorem ipsum dolor sit
amet. * Lorem ipsum dolor sit amet, consectetur. */ .btn-success { } .btn-success:hover, .btn-success:focus { } /* No box-shadow style - old browsers */ .no-boxshadow .btn-success { } /* Danger ========================================================================== */ /* * Lorem ipsum dolor sit amet. * Lorem ipsum dolor sit amet, consectetur. */ .btn-danger { } .btn-danger:hover, .btn-danger:focus { } /* No box-shadow style - old browsers */ .no-boxshadow .btn-danger { }
/* ========================================================================== Sizes ========================================================================== */ /* Small ========================================================================== */ .btn-small
{ } /* Big ========================================================================== */ .btn-big { }
None
Valeu! Eaí.. O que acham? @raphaelfabeni http://raphaelfabeni.com.br