# CSS

![Explicando CSS em um GIF](https://1341222537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LIRgpgkf7xDzn7Us4W3%2F-LJMdVhlZEEAiqfjRiYS%2F-LJMdeeNQfL1pFbsoHiP%2Fcss.gif?alt=media\&token=1cca79a3-4712-4d84-9084-79a1e5711758)

O **CSS** é responsável por aplicar estilos às suas telas -- em outras palavras, é ele que deixa as telas *bonitas e amigáveis* para os usuários. É importante seguir algumas boas práticas e [este artigo](https://medium.com/tableless/8-regras-simples-para-uma-arquitetura-css-robusta-e-escal%C3%A1vel-545c6dade170) contém algumas dicas excelentes para garantir que o seu CSS esteja lindo.

Se você não se garante muito nos seletores de CSS, uma sugestão é brincar lá no [**CSS Diner** 🍟](https://flukeout.github.io/). Acho que vai te dar uma esclarecida.

{% hint style="danger" %}
**ATENÇÃO**

O **Front-end chapter** tem o seu próprio guia de estilo de CSS a ser seguido.

Por favor, [leia-o e entenda](https://softbox.gitbook.io/front-end/css-guia-de-estilo).
{% endhint %}

### **Pré-processadores**

Em alguns projetos, são utilizados [pré-processadores](https://becode.com.br/pre-processador-css-sass/) de CSS, como [**Sass**](https://sass-lang.com/guide) e [**Stylus**](http://stylus-lang.com/). Recomendamos que você dê uma pesquisadinha sobre esses pré-processadores para que você possa aproveitá-los ao máximo.

### Material Design

Foi definido pelos membros do **Front-end chapter** que o [**Material Design**](https://material.io/) será o padrão a ser utilizado nos projetos da **Softbox**. Portanto, é importante que você saiba mais sobre como usá-lo (estes [tutoriais no site oficial](https://material.io/collections/developer-tutorials/) podem ajudar!)

Quando estiver utilizando o **Material Design** junto com o **Vue.js** ou o **React**, recomendamos que utilize as seguintes bibliotecas de componentes para facilitar o desenvolvimento (alinhe junto com os seus colegas sobre qual será utilizada):

* [Vue Material](https://vuematerial.io/) (Vue)
* [Vuetify](https://vuetifyjs.com/en/) (Vue)
* [Material-UI](https://material-ui.com/) (React)

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

* [Aprenda Sass e escreva CSS com mais facilidade](https://www.todoespacoonline.com/w/2014/05/aprenda-sass/)
* [Material Design colors](https://www.materialui.co/colors)
  {% endhint %}
