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
310
CSS Tips
raphaelfabeni
5
960
Falando sobre Cultura de Desenvolvimento
raphaelfabeni
9
1.3k
CSS e UX
raphaelfabeni
7
3.6k
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
890
Keep calm and let's play CSS3
raphaelfabeni
8
870
Other Decks in Technology
See All in Technology
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
710
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
120
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
220
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
5.5k
自動と手動の両輪で開発するデータクレンジング
estie
2
200
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
2.8k
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
460
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
300
2.5Dモデルのすべて
yu4u
2
440
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
460
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
970
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Statistics for Hackers
jakevdp
797
220k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Designing Experiences People Love
moore
139
23k
Unsuck your backbone
ammeep
669
57k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
The Invisible Side of Design
smashingmag
299
50k
Six Lessons from altMBA
skipperchong
27
3.6k
What's in a price? How to price your products and services
michaelherold
244
12k
BBQ
matthewcrist
86
9.4k
Building Your Own Lightsaber
phodgson
104
6.2k
Rails Girls Zürich Keynote
gr2m
94
13k
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