Upgrade to Pro — share decks privately, control downloads, hide ads and more …

O estado do CSS em 2019

Rafael Dantas
December 11, 2019

O estado do CSS em 2019

Talk apresentada no Meetup do Front End SP

Rafael Dantas

December 11, 2019
Tweet

More Decks by Rafael Dantas

Other Decks in Technology

Transcript

  1. O estado do CSS em
    2019
    Por @raffaeldantass

    View full-size slide

  2. CSS-in-JS
    CSS Frameworks
    Pré/Pós Processadores
    O que está por vir?
    Houdini CSS

    View full-size slide

  3. Front End Developer @Quanto
    @raffaeldantass
    Organizador do HTMLSP

    View full-size slide

  4. https://2019.stateofcss.com/

    View full-size slide

  5. CSS-in-JS
    Styled Components teve um índice
    de 85% de satisfação em 2019
    Enquanto que o Emotion teve
    um índice um pouco maior, 87%.
    Styled JSX e CSS Modules tiveram
    67% e 86%, respectivamente

    View full-size slide

  6. CSS-in-JS
    Styled Components tem mais de 27k de
    Stars no Github, é um projeto com
    grande suporte da comunidade React
    Emotion tem mais de 9.5k stars no
    Github e uma comunidade bastante
    ativa, mas menor em comparação a
    do Styled Components
    CSS Modules tem mais de 12k Stars no Github e ainda uma
    comunidade que oferece um grande suporte com uma imensa
    quantidade de libs especificas

    View full-size slide

  7. CSS-in-JS
    Styled JSX tem mais de 5k de Stars, foi criada
    pela Zeit, e continua recebendo bastante
    suporte da comunidade open-source.
    Muito embora, com menor força do
    que as outras libs comparadas.

    View full-size slide

  8. Materialize vem com 57% de satisfação
    CSS Frameworks
    Bootstrap tem um índice de 52% de satisfação.
    Foundation tem um índice ainda pior, 45%
    Semantic UI, surpreende, tem 61% de satisfação
    Bulma tem 74% de satisfação
    Tailwind, tem 81% de satisfação, de
    todos o mais bem aceito

    View full-size slide

  9. CSS Frameworks
    Mudanças fundamentais na
    forma de desenvolver aplicações
    Alternativas estruturadas e com
    grande suporte para utilizar CSS-in-JS
    Grande suporte dos navegadores a
    propriedades CSS, facilitando o uso.

    View full-size slide

  10. CSS Frameworks
    Entretanto, Bootstrap foi a ferramenta
    mais utilizada neste ano com base
    nos dados da pesquisa.

    View full-size slide

  11. Pré/Pós Processadores
    PostCSS tem 91% de aprovação e é um
    dos queridinhos dos pré-processadores
    Sass tem um índice de satisfação de 90%
    Enquanto o Less tem um índice bem ruim, 46%
    Stylus, tem apenas 47% de satisfação

    View full-size slide

  12. O que está por vir?
    Antes vamos entender as etapas do trabalho da W3C
    Working Draft
    Candidate Recomendation
    Proposed Recomendation
    W3C Recomendation

    View full-size slide

  13. O que está por vir?
    CSS Grid Layout - Módulo 2 - WD
    https://www.w3.org/TR/2019/WD-css-grid-2-20191203/
    CSS Fonts - Módulo 4 - WD
    https://www.w3.org/TR/css-fonts-4/
    CSS Scroll Snap - Módulo 1 - CR
    https://www.w3.org/TR/2019/CR-css-scroll-snap-1-20190319/
    CSS Images - Módulo 3 - CR
    https://www.w3.org/TR/2019/CR-css-images-3-20191010/

    View full-size slide

  14. CSS Houdini
    É uma força tarefa da W3C que visa oferecer
    API’s para que nós, desenvolvedores, possamos
    criar nossas próprias propriedades CSS
    Para acompanhar o trabalho que está sendo
    feito: https://github.com/w3c/css-houdini-drafts
    https://ishoudinireadyyet.com/

    View full-size slide

  15. CSS Houdini
    http://bit.ly/artigo-houdini-css

    View full-size slide

  16. Obrigado
    @raffaeldantass

    View full-size slide