> For the complete documentation index, see [llms.txt](https://softbox.gitbook.io/front-end/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://softbox.gitbook.io/front-end/guia-de-boas/guia-de-estilo.md).

# Guias de estilo

Quando você está desenvolvendo, é importante seguir um padrão (como já [foi dito em outras páginas](/front-end/guia-de-boas/codigo-bonito.md) deste guia). Algumas linguagens, bibliotecas e frameworks já têm seus padrões, que são definidos pelos seus próprios criadores (ou time de desenvolvedores) ou pela própria comunidade. Esses padrões são chamados de **guias de estilo**, que têm como objetivo informá-lo (a) sobre como produzir o melhor código possível, com a menor probabilidade de erros e mais acessível para você e para os outros.

![](/files/-LJMQCuBdHsN5wmtha3K)

[Aqui na **Softbox** utilizamos o framework **Vue.js**](/front-end/guia-de-boas/desenvolvendo-com-rapidez.md#vue-js) e existem algumas regrinhas básicas a serem seguidas no desenvolvimento de aplicações Vue, enquanto algumas outras são sugestões para que o seu código fique melhor. Essas informações estão disponíveis no [site oficial do Vue](https://br.vuejs.org/v2/style-guide/index.html) e é altamente recomendável que você leia antes de começar a codificação.

![](/files/-LJMQB66pmj5F4Nf7z1g)

**React** é uma [biblioteca que faz parte da stack de desenvolvimento Front-end da **Softbox**](/front-end/guia-de-boas/desenvolvendo-com-rapidez.md#react) e, apesar de não possuir um guia de estilos oficial, sugerimos também que você dê uma lida [neste guia](https://css-tricks.com/react-code-style-guide/) para que possa utilizá-lo como referência futura.

{% hint style="info" %}
**Leitura extra**

* [Guia de estilos do Airbnb para React/JSX](<https://github.com/airbnb/javascript/tree/master/react >)
* [Vue.js component style guide](https://pablohpsilva.github.io/vuejs-component-style-guide/#/) (publicado pelo Softboxer Pablo Silva)
  {% endhint %}

Alguns clientes fornecerão um guia de estilos visual para o desenvolvimento front-end (ou algum UI/UX designer da Softbox o produzirá). Esses guias visuais são bem úteis na hora de desenvolver a interface gráfica de aplicações e, muitas vezes, devem ser seguidos à risca -- ou a sua tela com certeza não será aprovada pelo time de qualidade.

Se o seu time não está usando o [Zeplin](https://zeplin.io/) para fornecer os guias de estilo, sugira esta ferramenta, já que ela permite a criação de excelentes e completos guias, incluindo códigos de cores, arquivos estáticos, fontes, tamanhos, etc.

Também é altamente recomendável que você tenha em sua máquina uma régua virtual (como [essa](https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?hl=en)) para auxiliar no desenvolvimento seguindo guias de estilo.

{% hint style="info" %}
**Leitura extra**

* [50 meticulous style guides every startup should see before launching](https://www.canva.com/learn/50-meticulous-style-guides-every-startup-see-launching/)
* [How to create a brand style guide](https://99designs.com.br/blog/logo-branding/how-to-create-a-brand-style-guide/)
* [Style guides for visual inspiration](https://blog.hubspot.com/marketing/examples-brand-style-guides)
  {% endhint %}