Manutenção e Refatoração de CSS

Slide 1

Slide 1 text

Manutenção e refatoração de CSS

Slide 2

Slide 2 text

@lucasmazza

Slide 3

Slide 3 text

http:/ /www.casadocodigo.com.br/products/livro-html-css

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

O que é importante quando se fala de manutenção de software?

Slide 8

Slide 8 text

Semântica Modularidade Performance Produtividade

Slide 9

Slide 9 text

Manuntenção não é trabalho de uma pessoa só

Slide 10

Slide 10 text

Lembre-se que o seu código será continuado por outras pessoas

Slide 11

Slide 11 text

E você dará continuidade ao código dos outros

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Quem escreveu CSS para features novas?

Slide 14

Slide 14 text

(a equipe inteira)

Slide 15

Slide 15 text

Quem precisou refatorar código?

Slide 16

Slide 16 text

(a equipe inteira)

Slide 17

Slide 17 text

Quem precisou resolver bugs do IE?

Slide 18

Slide 18 text

(a equipe inteira)

Slide 19

Slide 19 text

Qualquer desenvolvedor pode ajudar Mesmo quem não é Front end

Slide 20

Slide 20 text

ZOMG Pull Requests!

Slide 21

Slide 21 text

Código Contexto Discussão

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Markdown Screenshots GIFs

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Disseminação de conhecimento Revisão do código escrito pela equipe

Slide 26

Slide 26 text

Abrace a autoria coletiva O código é do projeto/equipe/empresa

Slide 27

Slide 27 text

Evite silos de conhecimento Não seja o “cara de Front end” do seu projeto

Slide 28

Slide 28 text

http:/ /guidelines.plataformatec.com.br/pull-requests

Slide 29

Slide 29 text

Código Código Código Código Código Código Código Código Código Código Código Código Código Código Código Código Código Código

Slide 30

Slide 30 text

Você precisa de algum padrão para o seu código Ou tudo vira bagunça

Slide 31

Slide 31 text

a gente começou a escrever o nosso

Slide 32

Slide 32 text

http:/ /guidelines.plataformatec.com.br/css

Slide 33

Slide 33 text

Organização de propriedades Formato de documentação Práticas para pré-processadores

Slide 34

Slide 34 text

Metodologias não faltam OOCSS BEM Smacss DRYCSS MVCSS FCSS

Slide 35

Slide 35 text

Use o que funcione para você

Slide 36

Slide 36 text

Use o que funcione para você para o seu time

Slide 37

Slide 37 text

Beleza, mas o que você usa?

Slide 38

Slide 38 text

OOCSS-ish/FCSS-ish Apenas classes Scss #noparents Inspirado pela modelagem do backend

Slide 39

Slide 39 text

#noparents http:/ /markdotto.com/2013/10/09/css-and-noparents/

Slide 40

Slide 40 text

.product-list { } .product-list > li { } .product-list li.highlight { } .product-list { } .product-list-item { } .higlighted-list-item { } ✗ ✓

Slide 41

Slide 41 text

Especificidade reduzida Redução de sobreescritas Independente do HTML

Slide 42

Slide 42 text

Trate as entidades do sistema como os componentes da sua interface

Slide 43

Slide 43 text

// app/assets/stylesheets/_calendar.scss .calendar { } .calendar-heading { } .calendar-slot { } .calendar-weekday { } .calendar-weekend { } SCSS

Slide 44

Slide 44 text

<%= calendar.month %>

<%= day %>

ERB

Slide 45

Slide 45 text

# app/presenters/calendar.rb class Calendar attr_reader :days attr_reader :month ! def to_partial_path 'events/calendar' end end Ruby

Slide 46

Slide 46 text

Nomenclatura ubíqua Responsabilidades bem definidas Composição + herança do backend

Slide 47

Slide 47 text

Nesting é coisa séria E um dia você ainda vai se arrepender

Slide 48

Slide 48 text

3 níveis 40/50 linhas E uma boa desculpa (liberado para pseudo selectors)

Slide 49

Slide 49 text

slide roubado do Nando Vieira

Slide 50

Slide 50 text

Modularização é difícil pra #@$#%!

Slide 51

Slide 51 text

Mudanças devem ter consequências previsíveis

Slide 52

Slide 52 text

E para isso precisamos que o código fique bem isolado

Slide 53

Slide 53 text

Muitas peças móveis Arquitetura complexa Alta curva de aprendizado

Slide 54

Slide 54 text

application.scss normalize.scss _functions.scss _defaults.scss modules/_home.scss sprites/_icons.scss

Slide 55

Slide 55 text

application.scss normalize.scss core/_functions.scss core/_defaults.scss modules/_home.scss sprites/_icons.scss

Slide 56

Slide 56 text

application.scss vendor/normalize.scss core/_functions.scss core/_defaults.scss modules/_home.scss modules/_sidebar.scss sprites/_icons.scss vendor/bootstrap/_tooltip.scss

Slide 57

Slide 57 text

Aceite que você não precisa acertar de primeira

Slide 58

Slide 58 text

E que você sempre pode reorganizar o seu código

Slide 59

Slide 59 text

E que você sempre pode melhorar o seu código

Slide 60

Slide 60 text

E que você sempre pode rescrever o seu código

Slide 61

Slide 61 text

Cuide das dependências externas

Slide 62

Slide 62 text

“Estava com o problema XYZ, então editei o código do Bootstrap...”

Slide 63

Slide 63 text

Agora você tem dois problemas

Slide 64

Slide 64 text

NO TOUCHING!

Slide 65

Slide 65 text

Código de terceiros deve ficar isolado

Slide 66

Slide 66 text

E você pode sobreescrever o que precisar

Slide 67

Slide 67 text

@import 'vendor/bootstrap'; ! @import 'overrides/bootstrap'; @import 'mystuff';

Slide 68

Slide 68 text

Escolha dependências do tamanho que você precisa

Slide 69

Slide 69 text

Ou “porque eu não uso Compass”

Slide 70

Slide 70 text

compass-rails Compass O que eu realmente preciso

Slide 71

Slide 71 text

Eu só quero gerenciar meus sprites

Slide 72

Slide 72 text

lucasmazza/spriteful

Slide 73

Slide 73 text

CLI <3 Não é uma dependência de runtime 500 linhas de código

Slide 74

Slide 74 text

Adicione dependências com moderação Não modifique, estenda Mantenha tudo atualizado

Slide 75

Slide 75 text

Documentação <3

Slide 76

Slide 76 text

Documentação é um canal de comunicação

Slide 77

Slide 77 text

Documentação é uma outra abstração do código

Slide 78

Slide 78 text

// ============================================================== // Profile card to display the players in the leaderboard. // // Supports an avatar wrapper, follower count and the user name. // Note that the 'avatar' and the 'follower count' are wrapped // inside an 'a' tag so everything will be clickable. Descrição

Slide 79

Slide 79 text

// // // 13220 //

@HackerNewsOnion

// // Hacker News Onion //

// ============================================================== Exemplos

Slide 80

Slide 80 text

Modificadores // ============================================================= // A full fledged replacement for '' using a list of // unordered items. // // Modifiers: // // :hover - Subtle hover highlight. // .expanded - Expanded state, displaying the choices list. // .right-aligned - Aligns the 'toggle' icon to the right. // ============================================================= ! // Expanded state for the 'combo-selector'. // ============================================================== .combo-selector.expanded { }

Slide 81

Slide 81 text

E qualquer outra informação relevante

Slide 82

Slide 82 text

você também pode criar o styleguide do seu projeto

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

http:/ /pattern-lab.info/resources.html Exemplos e referências @ PatternLab

Slide 86

Slide 86 text

Foque em documentar o que é relevante

Slide 87

Slide 87 text

Módulos complexos Variações importantes Mixins e funções Qualquer outro hotspot

Slide 88

Slide 88 text

O importante é escrever alguma coisa

Slide 89

Slide 89 text

Mas isso não é uma ciência exata

Slide 90

Slide 90 text

Problemas diferentes irão surgir em casos diferentes

Slide 91

Slide 91 text

Escute o seu código

Slide 92

Slide 92 text

Kent Beck @ Smalltalk Best Practice Patterns “Code doesn't lie. If you're not listening, you won't hear the truths it tells.”

Slide 93

Slide 93 text

Converse com o seu time

Slide 94

Slide 94 text

Kyle Neath @ http:/ /warpspire.com/posts/kss/ “Maintainability comes from shared understanding.”