{"id":3346,"date":"2022-04-18T08:00:00","date_gmt":"2022-04-18T11:00:00","guid":{"rendered":"https:\/\/coodesh.com\/blog\/?p=3346"},"modified":"2024-01-05T07:43:06","modified_gmt":"2024-01-05T10:43:06","slug":"qual-e-a-melhor-forma-de-criar-os-estilos-de-sites","status":"publish","type":"post","link":"https:\/\/coodesh.com\/blog\/candidates\/dicas\/qual-e-a-melhor-forma-de-criar-os-estilos-de-sites\/","title":{"rendered":"Qual \u00e9 a melhor forma de criar os estilos de sites?"},"content":{"rendered":"\n

Para o desenvolvedor Front-end contar com boas op\u00e7\u00f5es de ferramentas de estilos de sites \u00e9 essencial para garantir mais otimiza\u00e7\u00e3o e qualidade nos projetos<\/strong>. A Coodesh queria ter um par\u00e2metro das ferramentas preferidas e, por isso, realizou uma enquete no LinkedIn. A ferramenta vencedora foi o moderno Tailwind CSS. E, voc\u00ea, tamb\u00e9m curte programar com ele? Veja outras ferramentas e mais detalhes neste conte\u00fado.<\/p>\n\n\n\n

O ecossistema do desenvolvimento web envolve v\u00e1rias carreiras<\/strong> que utilizam linguagens e frameworks avan\u00e7ados para trazer mais agilidade e seguran\u00e7a nos projetos. Tudo isso pensando na usabilidade e na responsividade dos websites. Contudo, como escolher entre as v\u00e1rias op\u00e7\u00f5es do mercado? <\/p>\n\n\n\n

Sabemos que pode n\u00e3o existir uma \u00fanica solu\u00e7\u00e3o, ou seja, uma bala de prata para todas as situa\u00e7\u00f5es. Por\u00e9m, sempre h\u00e1 uma prefer\u00eancia maior por um ou outro recurso. Sendo assim, veja alguns deles a seguir. <\/p>\n\n\n\n

CSS Grid Layout <\/h2>\n\n\n\n

O CSS<\/a> (Cascading Style Sheets ou Folhas de Estilo em Cascata) \u00e9 uma linguagem de estilo criada para descrever a apresenta\u00e7\u00e3o de um documento escrito em HTML ou XML. Portanto, ele descreve como os elementos aparecem na tela. <\/p>\n\n\n\n

Desse modo, o CSS Grid Layout<\/a> introduz um sistema bi-dimensional de grid<\/strong> (grades) para CSS. Isso \u00e9 bastante \u00fatil para o desenvolvedor Front-end que pode usar os grids no design de layouts de grandes se\u00e7\u00f5es de uma p\u00e1gina da web ou ainda de pequenos elementos de interface. <\/p>\n\n\n\n

Bootstrap<\/h2>\n\n\n\n

O Bootstrap<\/a> \u00e9 um framework open source. Para o desenvolvedor Mobile, o Bootstrap \u00e9 uma das ferramentas mais poderosas para construir projetos para dispositivos m\u00f3veis com vari\u00e1veis ou mixins Sass.  <\/p>\n\n\n\n

Entre as suas vantagens est\u00e3o a responsividade gerada<\/strong>, os componentes pr\u00e9-constru\u00eddos e a variedade de plugins JavaScript. <\/p>\n\n\n\n

Al\u00e9m disso, Bootstrap \u00e9 um recurso gratuito aplicado junto com HTML, CSS e JavaScript. <\/p>\n\n\n\n

Nesse sentido, o framework tem uma das melhores avalia\u00e7\u00f5es no GitHub, al\u00e9m de contar com ampla documenta\u00e7\u00e3o na sua p\u00e1gina oficial. Portanto, o desenvolvedor pode ter acesso a v\u00e1rias informa\u00e7\u00f5es para se aprofundar nesta tecnologia. <\/p>\n\n\n\n

Tailwind CSS<\/h2>\n\n\n\n

O desenvolvedor Front-end que utiliza o HTML n\u00e3o precisa sair desta linguagem de marca\u00e7\u00e3o para utilizar o Tailwind CSS<\/a>. Ele, por sua vez, possibilita criar websites em menos tempo e com solu\u00e7\u00f5es modernas de design. <\/p>\n\n\n\n

Entre elas est\u00e1 a possibilidade de ativar o modo escuro em seu arquivo de configura\u00e7\u00e3o, aplicando-o para cores de fundo, de texto, de borda ou at\u00e9 de gradiente. <\/p>\n\n\n\n

Outra vantagem \u00e9 que o Tailwind CSS como ferramenta de estilos de sites \u00e9 o tamanho da aplica\u00e7\u00e3o<\/strong>. Afinal, ele remove automaticamente todo o CSS n\u00e3o usado. Assim, o pacote CSS final \u00e9 o menor poss\u00edvel. <\/p>\n\n\n\n

Apesar de ter solu\u00e7\u00f5es prontas, ele \u00e9 altamente personaliz\u00e1vel. Assim, o desenvolvedor pode mudar a paleta de cores, a escala de espa\u00e7amento, o cursor do mouse ou as sombras de caixas. <\/p>\n\n\n\n

Padr\u00e3o Google <\/h2>\n\n\n\n

No que diz respeito ao Padr\u00e3o Google, o desenvolvedor web encontra tr\u00eas ferramentas de estilos de sites muito poderosas. Estamos falando do Angular Material<\/strong><\/a>, do<\/strong> Vuetify<\/strong><\/a> e do <\/strong>Material UI<\/strong> <\/a>(User Interface). Confira como esses recursos podem contribuir com os seus projetos. <\/p>\n\n\n\n

Angular Material <\/h3>\n\n\n\n

Vamos come\u00e7ar pelo Angular Material<\/strong>, que \u00e9 uma biblioteca de componentes para o Angular, que \u00e9 um framework baseado em TypeScript. <\/p>\n\n\n\n

Enfim, o Angular Material \u00e9 a implementa\u00e7\u00e3o oficial para o Angular do Material Design, que \u00e9 a especifica\u00e7\u00e3o de design para interfaces interativas do Google. Desse modo, ele pode ser utilizado para pequenos elementos, como cores, at\u00e9 os maiores, como imagens.<\/p>\n\n\n\n

Vuetify<\/h3>\n\n\n\n

O Vuetify \u00e9 uma biblioteca voltada para os frameworks utilizados com JavaScript<\/strong>. Ele foi criado em 2016 para fornecer uma s\u00e9rie de componentes estilizados para aplica\u00e7\u00f5es Vue.js<\/a>, todas elas baseadas no Material Design. <\/p>\n\n\n\n

Lembrando que Vue.js \u00e9 um framework open source para JavaScript que foi lan\u00e7ado um pouco antes, em 2014. Portanto, o Vuetify s\u00f3 precisa ser adicionado a um projeto Vue.js. <\/p>\n\n\n\n

Material UI <\/h3>\n\n\n\n

O Material UI (User Interface) ou MUI traz muitas vantagens ao desenvolvedor web. Entre elas est\u00e1 a constru\u00e7\u00e3o de uma interface com design agrad\u00e1vel. Voc\u00ea pode criar a interface com as inspira\u00e7\u00f5es do Material Design do Google ou a partir do seu pr\u00f3prio tema.<\/strong> Outra vantagem \u00e9 que o recurso tem uma extensa documenta\u00e7\u00e3o, pois s\u00e3o mais de dois mil colaboradores produzindo materiais no mundo todo. O recurso tamb\u00e9m preza pela responsividade e acessibilidade em todas as telas. <\/p>\n\n\n\n

Enquete aponta prefer\u00eancia pelo Tailwind CSS<\/h2>\n\n\n\n

Dos desenvolvedores que responderam \u00e0 enquete da Coodesh, apenas o Padr\u00e3o Google n\u00e3o figura entre as principais. Os demais est\u00e3o todos na casa de aproximadamente um ter\u00e7o da prefer\u00eancia. Confira o resultado: <\/p>\n\n\n\n