Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Translate global-css.md #164

Merged
merged 3 commits into from
Jan 22, 2020
Merged

Translate global-css.md #164

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e638f6f
Estilos globais com um componente de layout
Jan 11, 2020
43c455e
translate global-css
Jan 18, 2020
fae0b52
fix translate global-css
Jan 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions docs/docs/global-css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
title: Standard Styling with Global CSS Files
title: Estilo padrão com arquivos CSS globais
---

Traditionally, websites are styled using global CSS files.
Tradicionalmente, os sites são estilizados utilizando arquivos CSS globais.

Globally-scoped CSS rules are declared in external `.css` stylesheets, and [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) and [the Cascade](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade) determine how styles are applied.
As regras de escopo global são declaradas em arquivos `.css` externos, [Especificidade CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Specificity) e o [Cascade](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Cascade) determinam como os estilos são aplicados.
vnscosta marked this conversation as resolved.
Show resolved Hide resolved

## Adding global styles with a layout component
## Adicionando estilos globais com um componente de layout

The best way to add global styles is with a [shared layout component](/tutorial/part-three/#your-first-layout-component). This layout component is used for things that are shared throughout the site, including styles, header components, and other common items.
A melhor maneira de adicionar estilos globais é com um [componente de layout compartilhado](/tutorial/part-three/#your-first-layout-component). Esse componente é utilizado para itens que são compartilhados em todo o site, incluindo estilos, componentes do cabeçalho e outros itens comuns.

> **NOTE:** This pattern is implemented by default in [the default starter](https://github.com/gatsbyjs/gatsby-starter-default/blob/02324e5b04ea0a66d91c7fe7408b46d0a7eac868/src/layouts/index.js#L6).
> **NOTA:** Esse padrão é implementado em [o padrão inicial](https://github.com/gatsbyjs/gatsby-starter-default/blob/02324e5b04ea0a66d91c7fe7408b46d0a7eac868/src/layouts/index.js#L6).
vnscosta marked this conversation as resolved.
Show resolved Hide resolved

To create a shared layout with global styles, start by creating a new Gatsby site with the [hello world starter](https://github.com/gatsbyjs/gatsby-starter-hello-world).
Para criar um layout compartilhado com estilos globais, comece criando um novo site Gatsby com o [hello world inicial](https://github.com/gatsbyjs/gatsby-starter-hello-world).
vnscosta marked this conversation as resolved.
Show resolved Hide resolved

```shell
gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world
gatsby new estilos-globais https://github.com/gatsbyjs/gatsby-starter-hello-world
```

Open your new site in your code editor and create a new directory at `/src/components`. Inside, create two new files:
Abra seu novo site em seu editor e crie um novo diretório em `/src/components`. Dentro, crie dois novos arquivos:

```diff
global-styles/
estilos-globais/
└───src/
└───components/
+ │ │─ layout.js
Expand All @@ -31,7 +31,7 @@ Open your new site in your code editor and create a new directory at `/src/compo
└─ index.js
```

Inside `src/components/layout.css`, add some global styles:
Dentro de `src/components/layout.css`, adicione alguns estilos globais como:

```css:title=src/components/layout.css
div {
Expand All @@ -40,7 +40,7 @@ div {
}
```

In `src/components/layout.js`, include the stylesheet and export a layout component:
Em `src/components/layout.js`, inclua a folha de estilos e exporte como um componente de layout:

```jsx:title=src/components/layout.js
import React from "react"
Expand All @@ -49,7 +49,7 @@ import "./layout.css"
export default ({ children }) => <div>{children}</div>
```

Finally, update `src/pages/index.js` to use the new layout component:
Finalmente, atualize o arquivo `src/pages/index.js` para usar o novo componente de layout:

```jsx:title=src/pages/index.js
import React from "react"
Expand All @@ -58,25 +58,25 @@ import Layout from "../components/layout"
export default () => <Layout>Hello world!</Layout>
```

Run `npm run develop` and you’ll see the global styles applied.
Execute o comando `npm run develop` e você irá ver o novo estilo global aplicado.

![Global styles](./images/global-styles.png)
![Estilos globais](./images/global-styles.png)

## Adding global styles without a layout component
## Adicionando estilos globais sem um componente de layout

In some cases, using a shared layout component is not desirable. In these cases, you can include a global stylesheet using `gatsby-browser.js`.
Em alguns casos, usar um componente de layout compartilhado não é o ideal. Nesses casos, você pode incluir uma folha de estilos global usando o `gatsby-browser.js`.

> **NOTE:** This approach does _not_ work with CSS-in-JS. Use shared components to share styles in CSS-in-JS.
> **NOTA:** Esse método _não_ funciona com CSS-in-JS. Use componentes de estilos compartilhados para utilizar com CSS-in-JS.

First, open a new terminal window and run the following commands to create a new default Gatsby site and start the development server:
Primeiro, abra uma nova janela do terminal e execute os seguintes comandos para criar um novo site padrão em Gatsby e iniciar um servidor de desenvolvimento:

```shell
gatsby new global-style-tutorial https://github.com/gatsbyjs/gatsby-starter-default
cd global-style-tutorial
gatsby new estilos-globais-tutorial https://github.com/gatsbyjs/gatsby-starter-default
cd estilos-globais-tutorial
npm run develop
```

Second, create a CSS file and define any styles you wish. An example:
Em seguida, crie um arquivo CSS e defina os estilos como desejar. Por exemplo:

```css:title=src/styles/global.css
html {
Expand All @@ -88,27 +88,27 @@ a {
}
```

Then, include the stylesheet in your site's `gatsby-browser.js` file.
E então, inclua a sua folha de estilos no arquivo `gatsby-browser.js` do seu site.

> **NOTE:** This solution works when including css as those styles are extracted when building the JavaScript but not for css-in-js.
> Including styles in a layout component or a global-styles.js is your best bet for that.
> **NOTA:** Essa solução somente funciona ao incluir o css, pois esses estilos são extraídos ao criar o JavaScript, mas não para o css-in-js.
> Incluir estilos em um componente de layout ou um global-styles.js é a melhor forma de fazer isso.

```javascript:title=gatsby-browser.js
import "./src/styles/global.css"

// or:
// ou:
// require('./src/styles/global.css')
```

> _Note: You can use Node.js require or import syntax. Additionally, the placement of the example css file in a `src/styles` folder is arbitrary._
> _Nota: Você pode usar o require do Node.js ou o import. Além disso, o local do arquivo css na pasta `src/styles` é de sua escolha._

You should see your global styles taking effect across your site:
Você verá seus estilos globais dando efeito em seu site:
vnscosta marked this conversation as resolved.
Show resolved Hide resolved

![Global styles example site](./images/global-styles-example.png)
![Exemplo estilos globais no site](./images/global-styles-example.png)

### Importing CSS files into components
### Importando arquivos CSS dentro de componentes

It is also possible to break up your CSS styles into separate files so that team members can work independently while still using traditional CSS. You can then [import files directly](/docs/importing-assets-into-files/) into pages, templates, or components:
Também é possivel dividir seus estilos CSS em arquivos separados, para que membros da sua equipe possam trabalhar enquanto ainda usam o CSS tradicional. Você pode [importar arquivos diretamente](/docs/importing-assets-into-files/) dentro de páginas, templates ou componentes:

```css:title=menu.css
.menu {
Expand All @@ -122,14 +122,14 @@ It is also possible to break up your CSS styles into separate files so that team
import "css/menu.css"
```

This approach can simplify integration of CSS or [Sass](/packages/gatsby-plugin-sass/) styles into your Gatsby site by allowing team members to write and consume more traditional, class-based CSS. However, there are [trade-offs](#limitations) that must be considered with regards to web performance and the lack of dead code elimination.
Essa abordagem pode simplificar a integração dos estilos CSS ou [Sass](/packages/gatsby-plugin-sass/) no seu site em Gatsby, permitindo que os membro da equipe consumam e escrevam um CSS mais tradicional baseado em classes. No entando, existem [contrapartidas](#limitations) que devem ser consideradas com relação ao desempenho web e à falta de exclusão em códigos não utilizados.
vnscosta marked this conversation as resolved.
Show resolved Hide resolved

### Adding classes to components
### Adicionando classes nos componentes

Since `class` is a reserved word in JavaScript, you'll have to use the `className` prop instead, which will render as the browser-supported `class` attribute in your HTML output.
Como `class` é uma palavra reservada em JavaScript, você irá precisar usar o prop `className`, que será renderizado como um atributo `class` em seu HTML e é suportado pelo seu navegador.
vnscosta marked this conversation as resolved.
Show resolved Hide resolved

```jsx
<button className="primary">Click me</button>
<button className="primary">Clique aqui</button>
```

```css
Expand All @@ -138,8 +138,8 @@ Since `class` is a reserved word in JavaScript, you'll have to use the `classNam
}
```

### Limitations
### Limitações

The biggest problem with global CSS files is the risk of name conflicts and side effects like unintended inheritance.
O maior problema com arquivos de CSS globais é o risco de conflitos no nome e outros efeitos colaterais como herança não intencional.

CSS methodologies like BEM can help solve this, but a more modern solution is to write locally-scoped CSS using [CSS Modules](/docs/css-modules/) or [CSS-in-JS](/docs/css-in-js/).
Metodologias CSS como o BEM podem ajudar a resolver isso, porém uma solução mais moderna seria escrever o CSS com um escopo local utilziando [Módulos CSS](/docs/css-modules/) ou [CSS-in-JS](/docs/css-in-js/).