Tweet
Tweet

Slide 1

Slide 1 text

Future Proof CSS Escrevendo folhas de estilo resistentes ao tempo

Slide 2

Slide 2 text

OLÁ! Vitor Mendrone Senior Software Developer

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

CSS já me fo&*% pra cara&*%

Slide 5

Slide 5 text

O sofrimento é um grande professor E me ensinou algumas coisas

Slide 6

Slide 6 text

Aprenda com os Designers de UX Planejamento é tudo

Slide 7

Slide 7 text

01 SEU TRABALHO PRECISA GERAR VALOR MESMO QUANDO VOCÊ NÃO ESTÁ CODANDO

Slide 8

Slide 8 text

01 INVISTA TEMPO ANALISANDO PÁGINA A PÁGINA DO LAYOUT Não escreva uma linha de código sem antes planejar minuciosamente como implementá-lo

Slide 9

Slide 9 text

Seu CSS deve ser sempre HTML Agnostic Evite ao máximo utilizar seletores de tags (type selectors) em suas folhas de estilo.

Slide 10

Slide 10 text

Don’t

Slide 11

Slide 11 text

Do

Slide 12

Slide 12 text

Não tenha medo de inserir novos elementos HTML Não é errado incluir novos elementos desde que sirvam para criar componentes mais robustos

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Caption Utilize sempre o mínimo seletor viável. Se possível, substitua seletores aninhados por novas classes 4

Slide 15

Slide 15 text

Evite adicionar mais CSS para resolver bugs Se necessário dê um passo atrás e tenha certeza de que o bug só pode ser resolvido com mais CSS

Slide 16

Slide 16 text

Use e abuse das devtools do seu browser

Slide 17

Slide 17 text

Eu escreveria isso a mão? 6

Slide 18

Slide 18 text

Eu escreveria isso a mão?

Slide 19

Slide 19 text

Use um normalizador de CSS O normalize.css é seu amigo e continuará sendo por muito tempo.

Slide 20

Slide 20 text

O normalize garante consistência em situações onde o reset não atua.

Slide 21

Slide 21 text

http://necolas.github.io/normalize.css/

Slide 22

Slide 22 text

box-sizing: border-box; Box-sizing: border-box; só não é default por um erro do CSSWG

Slide 23

Slide 23 text

08 BOX-SIZING PADRÃO CONSIDERA QUE O WIDTH TRATA O TAMANHO DO CONTEÚDO Dessa forma ele ignora padding e border no tamanho final

Slide 24

Slide 24 text

Regra não escrita do front-end: Siga o @sergio_caelum http://sergiolopes.org/css-box-sizing-border-box/

Slide 25

Slide 25 text

09 NUNCA USE !IMPORTANT E nunca diga nunca!

Slide 26

Slide 26 text

9.1 E apenas pelo tempo necessário para investigar e codar a solução definitiva. Para resolver rapidamente bugs de produção

Slide 27

Slide 27 text

9.2 Apenas durante o desenvolvimento, quando ignorar a cascata for o caminho mais curto para o teste. Para testes rápidos

Slide 28

Slide 28 text

9.2 Quando for necessário garantir que um elemento não pode ser alterado pelo usuário. Para garantir imutabilidade.

Slide 29

Slide 29 text

Código escalável é negócio escalável E essas lições que aprendi me ajudaram a garantir que sou capaz de criar produtos que escalem minha carreira.

Slide 30

Slide 30 text

Não são regras escritas em pedra. Seja adaptável, respeite seu tempo e nunca deixe de aprender.

Slide 31

Slide 31 text

Work & Co 231 Front St, 5th Floor, Brooklyn, NY 11201 +1 347-470-4803 [email protected] work.co