diff --git a/docs/docs/global-css.md b/docs/docs/global-css.md index 17d50bd5c..75ae3dcb4 100644 --- a/docs/docs/global-css.md +++ b/docs/docs/global-css.md @@ -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, e a [Especificação CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Specificity) e [Cascade](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Cascade) determinam como os estilos são aplicados. -## 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 [no _starter_ padrão](https://github.com/gatsbyjs/gatsby-starter-default/blob/02324e5b04ea0a66d91c7fe7408b46d0a7eac868/src/layouts/index.js#L6). -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 [_starter_ hello world](https://github.com/gatsbyjs/gatsby-starter-hello-world). ```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 @@ -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 { @@ -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" @@ -49,7 +49,7 @@ import "./layout.css" export default ({ children }) =>
{children}
``` -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" @@ -58,25 +58,25 @@ import Layout from "../components/layout" export default () => Hello world! ``` -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 { @@ -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á que seus estilos globais estão tendo efeito em seu site: -![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 { @@ -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_ 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. -### 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 utilizar o prop `className`, que será renderizado como um atributo, suportado pelo navegador, `class` em seu HTML. ```jsx - + ``` ```css @@ -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/).