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
930
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
780
Keep calm and let's play CSS3
raphaelfabeni
8
810
Other Decks in Technology
See All in Technology
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
エンジニア向け会社紹介資料
caddi_eng
14
220k
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
200
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.3k
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
720
Featured
See All Featured
Become a Pro
speakerdeck
PRO
15
4.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Web development in the modern age
philhawksworth
203
10k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Clear Off the Table
cherdarchuk
89
320k
How STYLIGHT went responsive
nonsquared
93
5k
Why Our Code Smells
bkeepers
PRO
332
56k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
RailsConf 2023
tenderlove
16
720
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Navigating Team Friction
lara
181
13k
A Philosophy of Restraint
colly
200
16k
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