Organizando o CSS! - Speaker Deck

Slide 1

Slide 1 text

Organizando a casa o CSS @raphaelfabeni

Slide 2

Slide 2 text

@raphaelfabeni http://raphaelfabeni.com.br

Slide 3

Slide 3 text

http://www.a2comunicacao.com.br

Slide 4

Slide 4 text

http://bit.ly/raphael-tableless

Slide 5

Slide 5 text

Então CSS é fácil?

Slide 6

Slide 6 text

http://www.raphaelfabeni.com.br/pikachu-css3/

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Mas, e a documentação?

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Ou melhor... Você entende seu código depois de um tempo sem mexer nele?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

“Quando você tem muitos padrões, você não tem nenhum padrão!” Jaydson

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Antes pelo excesso do que pela falta

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Mais adequado para você ou seu time

Slide 18

Slide 18 text

Não é sempre você que vai manter aquele código

Slide 19

Slide 19 text

Outras pessoas vão ter que botar a mão na massa

Slide 20

Slide 20 text

Você terá que mexer em código de outras pessoas

Slide 21

Slide 21 text

A2 idiomatic HTML CSS PHP JS

Slide 22

Slide 22 text

HTML CSS PHP JS

Slide 23

Slide 23 text

http://bit.ly/idiomatic-css

Slide 24

Slide 24 text

http://bit.ly/comentarios-css

Slide 25

Slide 25 text

http://bit.ly/comentarios-css

Slide 26

Slide 26 text

Botão • padrão • variações  cores  tamanhos  ...

Slide 27

Slide 27 text

.btn { ... }

Slide 28

Slide 28 text

.btn { ... } .btn-primary { ... }

Slide 29

Slide 29 text

.btn { ... } .btn-primary { ... } .btn-success { ... } .btn-danger { ... }

Slide 30

Slide 30 text

.btn { ... } .btn-primary { ... } .btn-success { ... } .btn-danger { ... } .btn-small { ... } .btn-big { ... }

Slide 31

Slide 31 text

.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 { }

Slide 32

Slide 32 text

.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 { }

Slide 33

Slide 33 text

Divida seu código em partes

Slide 34

Slide 34 text

Documente seu código, mesmo que pareça bobeira

Slide 35

Slide 35 text

Cores Tamanho • default • primary • success • danger • hover • focus • no-boxshadow • small • big Botão • padrão

Slide 36

Slide 36 text

/* ========================================================================== Buttons ========================================================================== */ /* ========================================================================== Default ========================================================================== */ .btn { }

Slide 37

Slide 37 text

/* ========================================================================== Buttons ========================================================================== */ /* * Default button * Tags: , , */ /* ========================================================================== Default ========================================================================== */ .btn { } .btn:hover, .btn:focus { } /* No box-shadow style - old browsers */ .no-boxshadow .btn { }

Slide 38

Slide 38 text

/* ========================================================================== 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 { }

Slide 39

Slide 39 text

/* 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 { }

Slide 40

Slide 40 text

/* ========================================================================== Sizes ========================================================================== */ /* Small ========================================================================== */ .btn-small { } /* Big ========================================================================== */ .btn-big { }