Introduction to CSS Best Practices - ThoughtWorks Agile Accelerator

Share knowlegde time at ThoughtWorks Agile Accelerator.

Submitted by, Matheus Varella de Oliveira.
Linkedin: https://www.linkedin.com/in/matheus-varella-de-oliveira/
Email: matheusvarelladeoliveira@gmail.com

Transcript

1. CSS Cascading Style Sheet Aceleradora Ágil ThoughtWorks - 2017/2
2. O que vai rolar nesta sessão? 1. O que é CSS?(breve) 2. Sete boas(ótimas) práticas 3. Como ser o melhor? 4. Flexbox? 5. Como testar CSS?
3. 1 O que é css? CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed.(W3School) Cascading Style Sheet
4. Boas práticas - 1.Classes reutilizáveis(redesign) Errado Correto
5. Boas práticas - 2.Padrão de nomenclatura(Ex:Suitscss) Errado Correto
6. Boas práticas - 3.Ordene as propriedades Errado Alfabetica Lógica
7. Boas práticas - 4.Especialize classes, não crie outra!
8. Boas práticas - 5.Declaração abreviada de propriedades Errado Correto
9. Boas práticas - 6.Múltiplas folhas de estilo Errado Correto
10. Boas práticas - 7.Google it Errado Correto “Como se escreve uma classe no css?”
11. Como ser o melhor? Dicas OOCSS - Object Oriented CSS Pré-processadores(Sass, Less, Stylus) Guias para tornar o CSS escalável(Smacss, BEM, Atomic Design, SuitCSS e etc) Style Guide Google PostCSS(Uma ferramenta para transformar CSS em JavaScript)
12. Parker(Stylesheet analysis tool) CSS Comb(mantém a ordem das propriedades conforme configurado) Stylelint (Style + lint = lint de style :D) Normalize (CSS Reset - “Normaliza” o CSS escrito para o padrão atual dos navegadores) SASS (em inglês, “syntactilly awesome stylesheets” ou “folhas de estilo sintaticamente incríveis”) Ferramentas “batata”
13. Flexbox Em resumo, flexbox, é um novo modo de fazer o seus layout se adequar a diversos viewports. Este é conteúdo é 90% prático, então prefiro deixar esses links que são bem didáticos para quem tiver interesse em aprender mais. http://flexbox.help/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://developer.mozilla.org/pt-BR/docs/CSS/Usando_caixas_flexiveis_css
14. Old way: Capibara + Selenium (Compara se existe o elemento que tu procura) #expect(page).to have_css(".btn-confirm"); New way: Quixote (https://github.com/jamesshore/quixote) Como testar css?
15. https://tableless.com.br/6-estrategias-para-melhorar-a-organizacao-do-seu-css-2/ https://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners--net-6741 https://1stwebdesigner.com/css-best-practices/ https://tableless.com.br/oocss-ou-css-do-jeito-certo/ https://smacss.com/ https://tableless.com.br/oocss-smacss-bem-dry-css-afinal-como-escrever-css/ https://suitcss.github.io/ http://sass-lang.com/ http://lesscss.org/ http://stylus-lang.com/ https://google.github.io/styleguide/htmlcssguide.html http://getbem.com/introduction/ https://tableless.com.br/o-que-e-design-atomic/ http://postcss.org/ Links https://github.com/jamesshore/quixote https://github.com/katiefenn/parker http://csscomb.com/ https://github.com/stylelint/stylelint https://necolas.github.io/normalize.css/ http://flexbox.help/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://developer.mozilla.org/pt-BR/docs/CSS/Usando_caixas_flexiveis_css https://github.com/teamcapybara/capybara https://github.com/jamesshore/quixote https://stackoverflow.com/questions/342579/css-unit-testing
16. Obrigado PELA ATENÇÃO Matheus Varella de Oliveira matheusvarelladeoliveira@gmail.com