-
Notifications
You must be signed in to change notification settings - Fork 11
/
css2020.yml
258 lines (184 loc) · 14.1 KB
/
css2020.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
locale: pt-BR
translations:
###########################################################################
# Introduction
###########################################################################
- key: introduction.css2020
t: |
<span class="first-letter">E</span>squeça tudo o que você sabe sobre CSS. Ou, pelo menos, esteja pronto para reconsiderar muita coisa. Se, assim como eu, você vem escrevendo CSS por mais de uma década, o CSS em 2020 não se parece em nada com o que você estava acostumado.
Em vez de pontos de interrupção, agora podemos usar o CSS Grid para criar layouts dinâmicos e responsivos que se adaptam a qualquer tamanho de tela com menos linhas de código. Em vez de depender de folhas de estilo globais, o CSS-in-JS nos permite colocar nossos estilos junto com nossos componentes para construir sistemas de design que podem ser tematizados.
E, acima de tudo, o Tailwind CSS surgiu e, por meio do uso de CSS orientado a utilitários, nos forçou a reconsiderar o dogma tradicional dos nomes de classes semânticas.
Seja qual for a sua reação a todas essas mudanças - se você quiser escrever um post empolgado no blog ou um desabafo furioso no Twitter - estamos aqui para apresentar os dados, destacar as tendências e, esperançosamente, orientá-lo através de mais um ano movimentado no mundo do CSS!
### Equipe
A Pesquisa State of CSS é criada e mantida por:
- [Sacha Greif](https://twitter.com/sachagreif): Design, redação, codificação
- [Raphaël Benitte](https://twitter.com/benitteraphael): Análise de dados, visualização de dados
### Baixe Nossos Dados
Você pode [ baixar os dados brutos em formato JSON desta pesquisa](https://www.kaggle.com/sachag/state-of-css). Avise-nos se você criar suas próprias visualizações de dados!
### Outros Links
- [Página Inicial do State of CSS](https://stateofcss.com)
- [State of JS](https://stateofjs.com)
### Agradecimentos
Agradecemos a todas as pessoas que nos ajudaram a projetar a pesquisa, incluindo [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), e [Kilian Valkhof](https://kilianvalkhof.com/).
Agradecimentos adicionais a [Alexey Pyltsyn](https://github.com/lex111) por sua ajuda com as traduções.
### Créditos e Informações
O site utiliza a fonte IBM Plex Mono. Dúvidas? Feedback? [Entre em contato!](mailto:[email protected])
Agora, vamos ver o que o CSS tem feito neste ano!
<span class="conclusion__byline">– Sacha e Raphaël</span>
###########################################################################
# Tshirt
###########################################################################
- key: sections.tshirt.title
t: Camiseta
- key: sections.tshirt.description
t: |
## Apoie a pesquisa e fique bem no processo!
Um rápido anúncio antes dos resultados da pesquisa. Apresentamos a nossa própria camiseta 🎈🎉👕 State of CSS T-shirt 👕🎉🎈!
O que torna esta camiseta verdadeiramente especial é que ela é a única peça de roupa que também ensina a você técnicas práticas de CSS do mundo real.
Portanto, quer você esteja indo para uma conferência, uma entrevista de emprego ou apenas para o trabalho, esta camiseta demonstrará sua maestria em CSS como nenhuma outra peça de roupa pode fazer!
- key: tshirt.about
t: Sobre a camiseta
- key: tshirt.description
t: |
A camiseta apresenta o logotipo do State of CSS juntamente com trechos do código CSS real usado para criar cada forma. Quem sabe, você pode aprender uma coisa ou duas!
Usamos uma camiseta de alta qualidade, super macia e com corte ajustado. Esta camiseta tem tamanhos pequenos, então, se você prefere um ajuste mais folgado, recomendamos encomendar um tamanho acima do que costuma usar (estou usando um M nas fotos).
- key: tshirt.getit
t: Adquira a Sua
- key: tshirt.price
t: USD $24 + frete
###########################################################################
# Sections Introductions
###########################################################################
- key: sections.user_info.description
t: |
A pesquisa deste ano alcançou **11,492** pessoas em **102** países. Pela primeira vez neste ano,
pudemos traduzir as perguntas da pesquisa em vários idiomas, graças a uma incrível equipe de voluntários.
- key: sections.features.description
t: |
O CSS viu um aumento significativo de novos recursos nos últimos anos, portanto, como era de se esperar, a adoção está um pouco atrasada, pois a comunidade leva seu tempo para absorver as novas propriedades.
- key: sections.units_selectors.description
t: |
Estamos dispostos a apostar que você encontrará algumas coisas que não sabia nesta seção!
- key: sections.technologies.description
t: |
O ecossistema do CSS está passando por uma renovação de certa forma, à medida que os antigos pilares como o Bootstrap agora precisam acomodar os novos concorrentes, como o Tailwind CSS. Sem mencionar o movimento CSS-in-JS, que, embora ainda não tenha se estabelecido no cenário CSS convencional, é bastante dinâmico.
- key: sections.other_tools.description
t: |
Nenhuma grande surpresa aqui, mas vale a pena destacar o surgimento de navegadores voltados para desenvolvedores, como o Polypane e o Sizzy, que vão além das ferramentas de desenvolvimento tradicionais.
- key: sections.environments.description
t: |
Uma das principais vantagens do CSS é sua capacidade de se adaptar a diferentes ambientes, no entanto, por diversas razões, mídias como impressão e email ainda são inexploradas pela maioria dos desenvolvedores CSS. Será que elas se tornarão o próximo campo de atuação do CSS...?
- key: sections.resources.description
t: |
As respostas "outros" nesta seção destacam a riqueza e diversidade da comunidade CSS e apresentam muitos blogs e podcasts excepcionais que esperamos adicionar oficialmente à pesquisa no próximo ano!
- key: sections.opinions.description
t: |
Essas opiniões pintam um quadro de uma linguagem que está se tornando mais madura, mas também mais complexa. E talvez, pelo menos enquanto lutamos para acompanhar o ritmo das mudanças, um pouco menos agradável?
###########################################################################
# Notes
###########################################################################
- key: blocks.gender.note
t: |
Se você estiver interessado em saber mais, [escrevemos um post no blog](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) que aborda a dinâmica de gênero da pesquisa.
- key: blocks.css_missing_features.note
t: |
Você pode explorar o conjunto completo de respostas a esta pergunta neste [projeto paralelo](https://whatsmissingfromcss.com/).
- key: blocks.source.note
t: >
Este gráfico agrega uma mistura de referências, parâmetros de URL e respostas livres.
- State of JS: a lista de discussão do [State of JS](https://stateofjs.com).
- State of CSS: a lista de discussão do State of CSS; também corresponde a `email`, `by email`, etc.
- Trabalho: corresponde a `trabalho`, `colegas`, `colegas de trabalho`, etc.
###########################################################################
# Awards
###########################################################################
- key: award.feature_adoption_delta_award.comment
t: Com uma progressão de **{value}** em 2020, este foi o ano em que o CSS Grid passou de uma nova tecnologia para uma ferramenta estabelecida.
- key: award.tool_usage_delta_award.comment
t: Nenhuma outra ferramenta chega perto da impressionante progressão de **{value}** do Tailwind CSS no último ano.
- key: award.tool_satisfaction_award.comment
t: A taxa de satisfação do PostCSS de **{value}** mostra que não há como vencer quando se faz uma coisa muito bem.
- key: award.tool_interest_award.comment
t: Com uma taxa de **{value}** de satisfação, os CSS Modules geraram o maior interesse entre os desenvolvedores CSS este ano.
- key: award.most_write_ins_award.comment
t: Muitas perguntas também aceitaram respostas personalizadas, e com **{value}** menções, o PhpStorm foi o item mais popular em geral.
###########################################################################
# Conclusion
###########################################################################
- key: sections.conclusion.description
t: |
Se um desenvolvedor JavaScript escreve uma linha de código CSS, agora ele é um desenvolvedor CSS?
Este *kōan* de programação ilustra uma clara tendência no mundo do desenvolvimento web: à medida que cada vez mais desenvolvedores CSS são encarregados de aprender JavaScript, os desenvolvedores JavaScript também estão começando a perceber que pode haver mais no CSS do que apenas `font-weight: bold;`.
Portanto, fazer perguntas sobre “o Estado do CSS” é inerentemente complicado: dependendo de quem você perguntar, pode obter respostas completamente diferentes! E como saber qual está correta?
Aqui está outro kōan para você: a resposta certa é que *não há* resposta certa. Cada uma das muitas ferramentas, metodologias, frameworks e bibliotecas apresentadas aqui tem seu lugar no vasto ecossistema de front-end.
Está construindo um aplicativo React complexo? Styled Components é uma ótima opção. Projetando uma página de destino estática? Você não pode errar com o Sass! E mesmo que o Bootstrap tenha perdido parte de seu fator hype original, você não pode superá-lo quando se trata do número de temas e plugins.
Portanto, enquanto observamos os brinquedos novos e reluzentes que surgem no GitHub a cada semana, não vamos esquecer as ferramentas, técnicas e, acima de tudo, as pessoas que carregaram a tocha do CSS até agora. Vamos precisar de todos se quisermos levar o CSS adiante em 2021 e além!
###########################################################################
# Picks
###########################################################################
- key: picks.my_2020_pick
t: "Minha Escolha para 2020: "
- key: picks.intro
t: Pedimos aos membros da comunidade CSS que compartilhassem a “escolha do ano”
- key: picks.shadeed9.bio
t: Autor de debuggingcss.com
- key: picks.shadeed9.description
t: |
As consultas de contêiner são um recurso aguardado há muito tempo por nós,
e estou entusiasmado que a equipe do Chrome está trabalhando no suporte nativo para isso!
- key: picks.argyleink.bio
t: CSS no Google
- key: picks.argyleink.description
t: |
A modesta caixa CSS se torna mais dinâmica a cada ano, e para mim, 2020 tratou mais sobre lados lógicos do que lados físicos. Fluxo de conteúdo contextual internacionalmente livre, espaçamento e atalhos? Por favor e obrigado.
- key: picks.sachagreif.bio
t: Criadora desta pesquisa
- key: picks.sachagreif.description
t: |
Com este post no blog, Amelia Wattenberger não apenas foi além, ela correu uma maratona inteira! As animações e o questionário garantirão que você finalmente compreenda a cascata CSS.
- key: picks.christianoliff.bio
t: Desenvolvedor front-end para Trimble MAPS
- key: picks.christianoliff.description
t: |
Uma coisa que comecei a usar e apreciar muito este ano é o Purge CSS - uma ferramenta incrível para remover CSS não utilizado. Isso pode reduzir significativamente o tamanho do seu CSS, e é rápido e fácil de usar.
- key: picks.kilianvalkhof.bio
t: Desenvolvedor web e criador do Polypane
- key: picks.kilianvalkhof.description
t: |
`content-visibility` está fazendo uma grande diferença no desempenho das minhas aplicações web já, mas ao mesmo tempo, acredito que deveria ser responsabilidade dos navegadores otimizar isso, não dos desenvolvedores.
- key: picks.walterstephanie.bio
t: Designer centrado no usuário e amante do CSS
- key: picks.walterstephanie.description
t: |
Uma série de vídeos no YouTube que explicam todas as novas e incríveis funcionalidades do CSS para criar designs modernos.
- key: picks.piccalilli_.bio
t: Designer e desenvolvedor freelance que administra o piccalil.li
- key: picks.piccalilli_.description
t: |
Este blog é uma mina de ouro absoluta de conhecimento em CSS. Michelle é uma lenda do CSS e cada post ou tutorial que eles escrevem está repleto de conteúdo útil.
- key: picks.sarasoueidan.bio
t: Engenheiro de UI/design independente
- key: picks.sarasoueidan.description
t: |
Minha escolha é uma pessoa, especificamente Rachel Andrew. Ela ensinou CSS Grid para toda uma geração de desenvolvedores.
- key: picks.5t3ph.bio
t: Engenheiro de Software na @ Microsoft
- key: picks.5t3ph.description
t: |
Nesta palestra de conferência, Manuel Matuzovic fornece exemplos cuidadosamente elaborados que são envolventes, acessíveis e práticos.
- key: picks.hugogiraudel.bio
t: Defensor de acessibilidade e diversidade não-binária
- key: picks.hugogiraudel.description
t: |
Fela é uma peça incrível de software.
É bastante poderoso, relativamente fácil de usar e muito eficiente.
- key: picks.foolip.bio
t: Engenheiro de software @ Google
- key: picks.foolip.description
t: |
Sergio recentemente corrigiu muitos problemas relacionados ao Flexbox no WebKit e até mesmo alguns no Chromium, notavelmente trazendo o "flex gap" para o WebKit, o que significa que em breve estará disponível em todos os navegadores modernos.
- key: picks.jina.bio
t: Advogado e praticante de sistemas de design
- key: picks.jina.description
t: |
A consulta de mídia para reduzir o movimento, que ajuda a evitar o desencadeamento de tonturas e desconforto.