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
340
CSS Tips
raphaelfabeni
5
1k
Falando sobre Cultura de Desenvolvimento
raphaelfabeni
9
1.3k
CSS e UX
raphaelfabeni
7
3.7k
Os camaradas Grunt e Bower
raphaelfabeni
3
190
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
AI導入の理想と現実~コストと浸透〜
oprstchn
0
190
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
190
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
15k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
20
6.8k
怖くない!はじめてのClaude Code
shinya337
0
380
Lambda Web Adapterについて自分なりに理解してみた
smt7174
6
160
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
Lazy application authentication with Tailscale
bluehatbrit
0
170
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
230
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
310
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Language of Interfaces
destraynor
158
25k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Facilitating Awesome Meetings
lara
54
6.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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