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.4k
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
280
CSS Tips
raphaelfabeni
5
940
Falando sobre Cultura de Desenvolvimento
raphaelfabeni
9
1.3k
CSS e UX
raphaelfabeni
7
3.5k
Os camaradas Grunt e Bower
raphaelfabeni
3
160
Os paranauês do CSS3
raphaelfabeni
9
1k
Do início ao fim com WordPress
raphaelfabeni
2
810
Keep calm and let's play CSS3
raphaelfabeni
8
820
Other Decks in Technology
See All in Technology
グイグイ系QAマネージャーの仕事
sadonosake
0
340
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
1
1.2k
Segment Anything Model 2
tenten0727
3
700
Tricentisにおけるテスト自動化へのAI活用ご紹介/20240910Shunsuke Katakura
shift_evolve
0
200
サーバー管理しないサーバーサービスManaged DevOps Pool
kkamegawa
0
130
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
940
チームビルディングは"感性"で向き合おう / Team Building with Awareness
kohzas
0
260
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
1
140
テスト”ケース”駆動開発 で手戻りをなくそう
ryohma0510
0
320
実務における脅威モデリングを考えよう
nikinusu
0
630
Classmethod AI Talks(CATs) #1 司会進行スライド(2024.09.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol1_2024-09-19
shinyaa31
0
110
フルカイテン株式会社 採用資料
fullkaiten
0
32k
Featured
See All Featured
BBQ
matthewcrist
83
9.2k
How STYLIGHT went responsive
nonsquared
93
5.1k
Faster Mobile Websites
deanohume
304
30k
Happy Clients
brianwarren
96
6.6k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
The Mythical Team-Month
searls
218
43k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
Adopting Sorbet at Scale
ufuk
73
8.9k
Debugging Ruby Performance
tmm1
72
12k
Designing with Data
zakiwarfel
98
5k
Practical Orchestrator
shlominoach
185
10k
A better future with KSS
kneath
235
17k
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