From 4830f7fe2621c935e214427dbbda9c59511658ea Mon Sep 17 00:00:00 2001 From: Felipe Volpatto Date: Thu, 9 Jun 2016 13:38:55 -0300 Subject: [PATCH 1/3] Portuguese translation (PT-BR) --- README.md | 184 +++++++++++++++++++++++++++--------------------------- 1 file changed, 92 insertions(+), 92 deletions(-) diff --git a/README.md b/README.md index b61c36f..2eee85b 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,34 @@ -# Airbnb CSS / Sass Styleguide +# Guia de estilo CSS / Sass Airbnb -*A mostly reasonable approach to CSS and Sass* +*Uma abordagem mais razoável para CSS e Sass* -## Table of Contents +## Tabela de conteúdo - 1. [Terminology](#terminology) - - [Rule Declaration](#rule-declaration) - - [Selectors](#selectors) - - [Properties](#properties) + 1. [Terminologia](#terminologia) + - [Regras](#regras) + - [Seletores](#seletores) + - [Propriedades](#propriedades) 1. [CSS](#css) - - [Formatting](#formatting) - - [Comments](#comments) - - [OOCSS and BEM](#oocss-and-bem) - - [ID Selectors](#id-selectors) + - [Formato](#formato) + - [Comentários](#comentarios) + - [OOCSS e BEM](#oocss-e-bem) + - [Seletores ID](#seletores-id) - [JavaScript hooks](#javascript-hooks) - [Border](#border) 1. [Sass](#sass) - - [Syntax](#syntax) - - [Ordering](#ordering-of-property-declarations) - - [Variables](#variables) + - [Sintaxe](#sintaxe) + - [Ordenação](#ordenacao-de-declaracao-de-propriedades) + - [Variáveis](#variaveis) - [Mixins](#mixins) - - [Extend directive](#extend-directive) - - [Nested selectors](#nested-selectors) - 1. [Translation](#translation) + - [Extend](#extend) + - [Seletores agrupados](#seletores-agrupados) + 1. [Tradução](#traducao) -## Terminology +## Terminologia -### Rule declaration +### Regras -A “rule declaration” is the name given to a selector (or a group of selectors) with an accompanying group of properties. Here's an example: +Uma “declaração de regra” é o nome dado ao seletor (ou grupo de seletores) acompanhados de um grupo de propriedades. Segue um exemplo: ```css .listing { @@ -37,9 +37,9 @@ A “rule declaration” is the name given to a selector (or a group of selector } ``` -### Selectors +### Seletores -In a rule declaration, “selectors” are the bits that determine which elements in the DOM tree will be styled by the defined properties. Selectors can match HTML elements, as well as an element's class, ID, or any of its attributes. Here are some examples of selectors: +Em uma declaraçao de regra, "seletores" são os bits que determinam quais elementos na árvore de DOM serão estilizados pelas propriedades definidas. Seletores podem coincidir com elementos HTML, assim como classes, ID ou qualquer um de seus atributos. Seguem exemplos de seletores: ```css .my-element-class { @@ -51,9 +51,9 @@ In a rule declaration, “selectors” are the bits that determine which element } ``` -### Properties +### Propriedades -Finally, properties are what give the selected elements of a rule declaration their style. Properties are key-value pairs, and a rule declaration can contain one or more property declarations. Property declarations look like this: +Finalmente, propriedades são os elementos selecionados de uma regra de declaração. Propriedades são pares de chave-valor, onde uma regra de declaração pode conter uma ou mais declarações de propriedades. Declaração de propriedades são mostradas a seguir: ```css /* some selector */ { @@ -64,19 +64,19 @@ Finally, properties are what give the selected elements of a rule declaration th ## CSS -### Formatting +### Formato -* Use soft tabs (2 spaces) for indentation -* Prefer dashes over camelCasing in class names. - - Underscores and PascalCasing are okay if you are using BEM (see [OOCSS and BEM](#oocss-and-bem) below). -* Do not use ID selectors -* When using multiple selectors in a rule declaration, give each selector its own line. -* Put a space before the opening brace `{` in rule declarations -* In properties, put a space after, but not before, the `:` character. -* Put closing braces `}` of rule declarations on a new line -* Put blank lines between rule declarations +* Use "soft tabs" (2 espaços) para identação. +* Prefira dashes `(-)` no lugar de camelCasing em nomes de classes. + - Underscores `(_)` e PascalCasing podem ser utilizados caso você use BEM (veja [OOCSS e BEM](#oocss-e-bem) abaixo). +* Não use seletores ID. +* Quando usar múltiplos seletores em uma regra de declaração, ponha cada um em uma própria linha. +* Coloque um espaço antes da abertura de chaves `{` em declaração de regras. +* Em propriedades, coloque um espaço depois, mas não antes, do caracter `:` (dois-pontos). +* Coloque chave de fechamento `}` de uma regra de declaração em uma nova linha. +* Coloque linhas em branco entre declarações de regra. -**Bad** +**Ruim** ```css .avatar{ @@ -90,7 +90,7 @@ Finally, properties are what give the selected elements of a rule declaration th } ``` -**Good** +**Bom** ```css .avatar { @@ -105,36 +105,36 @@ Finally, properties are what give the selected elements of a rule declaration th } ``` -### Comments +### Comentários -* Prefer line comments (`//` in Sass-land) to block comments. -* Prefer comments on their own line. Avoid end-of-line comments. -* Write detailed comments for code that isn't self-documenting: - - Uses of z-index - - Compatibility or browser-specific hacks +* Prefira comentários de linha (`//` em Sass) para blocos de comentários. +* Prefira comentários em uma única linha. Evite comentários no final da linha. +* Escreva comentários detalhados para códigos que não são auto-documentados: + - Usos do z-index + - Compatibilidade ou hacks específicos de navegadores -### OOCSS and BEM +### OOCSS e BEM -We encourage some combination of OOCSS and BEM for these reasons: +Nós incentivamos algumas combinações de OOCSS e BEM por três razões: - * It helps create clear, strict relationships between CSS and HTML - * It helps us create reusable, composable components - * It allows for less nesting and lower specificity - * It helps in building scalable stylesheets + * Ajuda a criar relações claras e estritas entre CSS e HTML. + * Nos ajuda a criar componentes reutilizáveis e que podem ser repostos. + * Permite menor especificidade e agrupamento. + * Ajuda na construção de estilos escaláveis. -**OOCSS**, or “Object Oriented CSS”, is an approach for writing CSS that encourages you to think about your stylesheets as a collection of “objects”: reusable, repeatable snippets that can be used independently throughout a website. +**OOCSS**, ou “Object Oriented CSS”, (CSS orientado a objetos) é uma abordagem para escrita de CSS que encoraja você a pensar sobre seus estilos como uma coleçao de "objetos": reutilizáveis, trechos repetitivos que podem ser usados de forma independente em todo o website. - * Nicole Sullivan's [OOCSS wiki](https://github.com/stubbornella/oocss/wiki) - * Smashing Magazine's [Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/) + * [OOCSS wiki](https://github.com/stubbornella/oocss/wiki) de Nicole Sullivan + * [Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/) de Smashing Magazine -**BEM**, or “Block-Element-Modifier”, is a _naming convention_ for classes in HTML and CSS. It was originally developed by Yandex with large codebases and scalability in mind, and can serve as a solid set of guidelines for implementing OOCSS. +**BEM**, ou “Block-Element-Modifier”, é uma _convenção de nomes_ para classes em HTML e CSS. Foi originalmente desenvolvido por Yandex com largas bases de códigos e escalabilidade em mente, e pode servir como um sólido conjunto de orientações para implementação OOCSS. - * CSS Trick's [BEM 101](https://css-tricks.com/bem-101/) - * Harry Roberts' [introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) + * [BEM 101](https://css-tricks.com/bem-101/) de CSS Trick + * [introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) de Harry Roberts -We recommend a variant of BEM with PascalCased “blocks”, which works particularly well when combined with components (e.g. React). Underscores and dashes are still used for modifiers and children. +Nós recomendamos um variante do BEM com "blocos" em formato PascalCased, que funciona particularmente bem quando combinado com componentes (por exemplo React). Underscores e dashes ainda são utilizados para modificadores e filhos. -**Example** +**Exemplo** ```jsx // ListingCard.jsx @@ -161,21 +161,21 @@ function ListingCard() { .ListingCard__content { } ``` - * `.ListingCard` is the “block” and represents the higher-level component - * `.ListingCard__title` is an “element” and represents a descendant of `.ListingCard` that helps compose the block as a whole. - * `.ListingCard--featured` is a “modifier” and represents a different state or variation on the `.ListingCard` block. + * `.ListingCard` é um “bloco” e representa um componente de alto nível + * `.ListingCard__title` é um “elemento” e representa um decendente de `.ListingCard` que ajuda a compor o bloco como inteiro. + * `.ListingCard--featured` é um "modificador" e representa um estado diferente ou variação no block `.ListingCard`. -### ID selectors +### Seletores ID -While it is possible to select elements by ID in CSS, it should generally be considered an anti-pattern. ID selectors introduce an unnecessarily high level of [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) to your rule declarations, and they are not reusable. +Enquanto é possível selecionar elementos por ID em CSS, isto deveria ser considerado um anti-projeto. Seletores ID introduzem um nível alto de [especificidade](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) para suas declarações de regras e eles não são reutilizáveis. -For more on this subject, read [CSS Wizardry's article](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/) on dealing with specificity. +Para mais detalhes leia o seguinte [artigo do CSS Wizardry](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/) sobre como ligar com especificidade. ### JavaScript hooks -Avoid binding to the same class in both your CSS and JavaScript. Conflating the two often leads to, at a minimum, time wasted during refactoring when a developer must cross-reference each class they are changing, and at its worst, developers being afraid to make changes for fear of breaking functionality. +Evite vincular a mesma classe em seu CSS e JavaScript. Combinando os dois, muitas vezes resulta em tempo perdido durante refatoração, quando um desenvolvedor deve fazer uma referência cruzada de cada classe que está alterando e, pior ainda, o medo de quebrar alguma funcionalidade. -We recommend creating JavaScript-specific classes to bind to, prefixed with `.js-`: +Recomendamos a criação de classes específicas JavaScript para vinculação, com prefixo `.js-`: ```html @@ -183,9 +183,9 @@ We recommend creating JavaScript-specific classes to bind to, prefixed with `.js ### Border -Use `0` instead of `none` to specify that a style has no border. +Utilizar `0` ao invés de `none` para especificar que um estilo não tem borda. -**Bad** +**Ruim** ```css .foo { @@ -193,7 +193,7 @@ Use `0` instead of `none` to specify that a style has no border. } ``` -**Good** +**Bom** ```css .foo { @@ -203,16 +203,16 @@ Use `0` instead of `none` to specify that a style has no border. ## Sass -### Syntax +### Sintaxe -* Use the `.scss` syntax, never the original `.sass` syntax -* Order your regular CSS and `@include` declarations logically (see below) +* Use sintaxe `.scss`, nunca a original `.sass` +* Ordene as declarações e CSS regular em `@include` logicamente (veja abaixo) -### Ordering of property declarations +### Ordenação de declarações de propriedades -1. Property declarations +1. Declaração de propriedades - List all standard property declarations, anything that isn't an `@include` or a nested selector. + Listar todas as declarações de propriedades padrão, tudo que não seja `@include` ou um seletor agrupado. ```scss .btn-green { @@ -222,9 +222,9 @@ Use `0` instead of `none` to specify that a style has no border. } ``` -2. `@include` declarations +2. Declarações `@include` - Grouping `@include`s at the end makes it easier to read the entire selector. + Agrupar `@include`s no final torna mais fácil a leitura do seletor inteiro. ```scss .btn-green { @@ -235,9 +235,9 @@ Use `0` instead of `none` to specify that a style has no border. } ``` -3. Nested selectors +3. Seletores agrupados - Nested selectors, _if necessary_, go last, and nothing goes after them. Add whitespace between your rule declarations and nested selectors, as well as between adjacent nested selectors. Apply the same guidelines as above to your nested selectors. + Seletores agrupados, _se necessário_, vão no final e nada vai depois dos mesmo. Adicionar espaços em branco entre suas regras de declaração e seletores agrupados, bem como entre seletores agrupados adjacentes. Aplicar as mesmas regras acima para seus seletores agrupados. ```scss .btn { @@ -251,21 +251,21 @@ Use `0` instead of `none` to specify that a style has no border. } ``` -### Variables +### Variáveis -Prefer dash-cased variable names (e.g. `$my-variable`) over camelCased or snake_cased variable names. It is acceptable to prefix variable names that are intended to be used only within the same file with an underscore (e.g. `$_my-variable`). +Prefira nomes de variáveis com dash-cased (ex. `$my-variable`) do que camelCased ou snake_cased. É aceitável adicionar prefíxos em nomes de variáveis que se destinam a ser usadas dentro do mesmo arquivo com um "underscore" (ex. `$_my-variable`). ### Mixins -Mixins should be used to DRY up your code, add clarity, or abstract complexity--in much the same way as well-named functions. Mixins that accept no arguments can be useful for this, but note that if you are not compressing your payload (e.g. gzip), this may contribute to unnecessary code duplication in the resulting styles. +Mixins devem ser usados para limpar seu código, adicionar clareza ou abstrair complexidade, assim como funções bem nomeadas. Mixins que aceitam nenhum argumento podem ser úteis para isto, mas note que se você não compactar seu payload (ex. gzip) isto pode contribuir para duplicação de código desnecessário nos estilos resultantes. -### Extend directive +### Extend -`@extend` should be avoided because it has unintuitive and potentially dangerous behavior, especially when used with nested selectors. Even extending top-level placeholder selectors can cause problems if the order of selectors ends up changing later (e.g. if they are in other files and the order the files are loaded shifts). Gzipping should handle most of the savings you would have gained by using `@extend`, and you can DRY up your stylesheets nicely with mixins. +`@extend` deve ser evitado porque possui comportamento não intuitivo e perigoso, especialmente quando usado em seletores agrupados. Mesmo extendendo os seletores placeholder de nível superior, isto pode causar problemas se a ordem dos seletores mudar mais tarde (ex. se eles estão em outros arquivos e a ordem dos mesmos variar). Gzipping lida com a maioria das economias que você teria ganho usando `@extend`, e, ainda, você pode limpar seus estilos muito bem com mixins. -### Nested selectors +### Seletores agrupados -**Do not nest selectors more than three levels deep!** +**Não agrupe seletores para mais de três níveis de profundidade!** ```scss .page-container { @@ -277,20 +277,20 @@ Mixins should be used to DRY up your code, add clarity, or abstract complexity-- } ``` -When selectors become this long, you're likely writing CSS that is: +Quando os seletores se tornam muito longos, você provavelmente está escrevendo CSS como: -* Strongly coupled to the HTML (fragile) *—OR—* -* Overly specific (powerful) *—OR—* -* Not reusable +* Fortemente aclopado ao HTML (frágil) *—OU—* +* Excessivamente específico (poderoso) *—OU—* +* Não reutilizável -Again: **never nest ID selectors!** +Novamente: **nunca agrupe seletores ID!** -If you must use an ID selector in the first place (and you should really try not to), they should never be nested. If you find yourself doing this, you need to revisit your markup, or figure out why such strong specificity is needed. If you are writing well formed HTML and CSS, you should **never** need to do this. +Se você deve precisar utilizar um seletor ID (e você realmente não deveria fazer isto!), eles nunca devem ser agrupados. Se você está fazendo isto, revise sua marcação ou reflita o porquê tanta especificidade é necessária. Se você está escrevendo HTML e CSS bem formados, você **nunca** deveria usar isto! -## Translation +## Tradução - This style guide is also available in other languages: + Este guia também está disponível em outras linguas: - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese (Simplified)**: [Zhangjd/css-style-guide](https://github.com/Zhangjd/css-style-guide) - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide) From 6050242085e4d221bbecd9a0f3e0a35660f30acd Mon Sep 17 00:00:00 2001 From: Felipe Volpatto Date: Tue, 21 Jun 2016 22:07:29 -0300 Subject: [PATCH 2/3] Fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2eee85b..96c9faf 100644 --- a/README.md +++ b/README.md @@ -72,7 +72,7 @@ Finalmente, propriedades são os elementos selecionados de uma regra de declara * Não use seletores ID. * Quando usar múltiplos seletores em uma regra de declaração, ponha cada um em uma própria linha. * Coloque um espaço antes da abertura de chaves `{` em declaração de regras. -* Em propriedades, coloque um espaço depois, mas não antes, do caracter `:` (dois-pontos). +* Em propriedades, coloque um espaço depois, mas não antes do caractere `:` (dois-pontos). * Coloque chave de fechamento `}` de uma regra de declaração em uma nova linha. * Coloque linhas em branco entre declarações de regra. From efca3b59382bfb4f7a9124d19ff14fa33674a608 Mon Sep 17 00:00:00 2001 From: Rodrigo Pova <83843080+rodrigo-pova@users.noreply.github.com> Date: Thu, 5 May 2022 20:02:01 -0300 Subject: [PATCH 3/3] fix: small fixes (#1) --- README.md | 107 +++++++++++++++++++++++++++++------------------------- 1 file changed, 58 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index 96c9faf..8e2af08 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,15 @@ # Guia de estilo CSS / Sass Airbnb -*Uma abordagem mais razoável para CSS e Sass* +_Uma abordagem mais razoável para CSS e Sass_ -## Tabela de conteúdo +## Índice 1. [Terminologia](#terminologia) - [Regras](#regras) - [Seletores](#seletores) - [Propriedades](#propriedades) 1. [CSS](#css) - - [Formato](#formato) + - [formatação](#formatação) - [Comentários](#comentarios) - [OOCSS e BEM](#oocss-e-bem) - [Seletores ID](#seletores-id) @@ -17,12 +17,12 @@ - [Border](#border) 1. [Sass](#sass) - [Sintaxe](#sintaxe) - - [Ordenação](#ordenacao-de-declaracao-de-propriedades) - - [Variáveis](#variaveis) + - [Ordenação](#ordenação-de-declaração-de-propriedades) + - [Variáveis](#variáveis) - [Mixins](#mixins) - [Extend](#extend) - - [Seletores agrupados](#seletores-agrupados) - 1. [Tradução](#traducao) + - [Seletores aninhados](#seletores-aninhados) + 1. [Traduções](#traduções) ## Terminologia @@ -39,7 +39,7 @@ Uma “declaração de regra” é o nome dado ao seletor (ou grupo de seletores ### Seletores -Em uma declaraçao de regra, "seletores" são os bits que determinam quais elementos na árvore de DOM serão estilizados pelas propriedades definidas. Seletores podem coincidir com elementos HTML, assim como classes, ID ou qualquer um de seus atributos. Seguem exemplos de seletores: +Em uma declaração de regra, "seletores" são os trechos que determinam quais elementos na árvore de DOM serão estilizados pelas propriedades definidas. Seletores podem coincidir com elementos HTML, assim como classes, ID ou qualquer um de seus atributos. Seguem exemplos de seletores: ```css .my-element-class { @@ -53,7 +53,7 @@ Em uma declaraçao de regra, "seletores" são os bits que determinam quais eleme ### Propriedades -Finalmente, propriedades são os elementos selecionados de uma regra de declaração. Propriedades são pares de chave-valor, onde uma regra de declaração pode conter uma ou mais declarações de propriedades. Declaração de propriedades são mostradas a seguir: +Finalmente, propriedades são os elementos selecionados de uma regra de declaração. Propriedades são pares de chave-valor, onde uma regra de declaração pode conter uma ou mais declarações de propriedades. Declarações de propriedades são mostradas a seguir: ```css /* some selector */ { @@ -64,11 +64,11 @@ Finalmente, propriedades são os elementos selecionados de uma regra de declara ## CSS -### Formato +### Formatação -* Use "soft tabs" (2 espaços) para identação. -* Prefira dashes `(-)` no lugar de camelCasing em nomes de classes. - - Underscores `(_)` e PascalCasing podem ser utilizados caso você use BEM (veja [OOCSS e BEM](#oocss-e-bem) abaixo). +* Use _"soft tabs"_ (2 espaços) para indentação. +* Prefira _dashes_ `(-)` no lugar de _camelCase_ em nomes de classes. + - _Underscores_ `(_)` e _PascalCase_ podem ser utilizados caso você use BEM (veja [OOCSS e BEM](#oocss-e-bem) abaixo). * Não use seletores ID. * Quando usar múltiplos seletores em uma regra de declaração, ponha cada um em uma própria linha. * Coloque um espaço antes da abertura de chaves `{` em declaração de regras. @@ -107,32 +107,32 @@ Finalmente, propriedades são os elementos selecionados de uma regra de declara ### Comentários -* Prefira comentários de linha (`//` em Sass) para blocos de comentários. -* Prefira comentários em uma única linha. Evite comentários no final da linha. +* Prefira comentários de linha (`//` em Sass) a blocos de comentários. +* Prefira comentários em linhas próprias. Evite comentários no final da linha. * Escreva comentários detalhados para códigos que não são auto-documentados: - - Usos do z-index - - Compatibilidade ou hacks específicos de navegadores + - Usos do _z-index_ + - Compatibilidade ou _hacks_ específicos de navegadores ### OOCSS e BEM Nós incentivamos algumas combinações de OOCSS e BEM por três razões: - * Ajuda a criar relações claras e estritas entre CSS e HTML. - * Nos ajuda a criar componentes reutilizáveis e que podem ser repostos. - * Permite menor especificidade e agrupamento. - * Ajuda na construção de estilos escaláveis. + * Ajuda a criar relações claras e estritas entre CSS e HTML + * Nos ajuda a criar componentes reutilizáveis e que podem ser usados em composição + * Permite menor aninhamento e especificidade + * Ajuda na construção de estilos escaláveis -**OOCSS**, ou “Object Oriented CSS”, (CSS orientado a objetos) é uma abordagem para escrita de CSS que encoraja você a pensar sobre seus estilos como uma coleçao de "objetos": reutilizáveis, trechos repetitivos que podem ser usados de forma independente em todo o website. +**OOCSS**, ou _“Object Oriented CSS”_, (CSS orientado a objetos) é uma abordagem para escrita de CSS que encoraja você a pensar sobre seus estilos como uma coleção de "objetos": trechos repetíveis e reutilizáveis que podem ser usados de forma independente em toda uma página. * [OOCSS wiki](https://github.com/stubbornella/oocss/wiki) de Nicole Sullivan * [Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/) de Smashing Magazine -**BEM**, ou “Block-Element-Modifier”, é uma _convenção de nomes_ para classes em HTML e CSS. Foi originalmente desenvolvido por Yandex com largas bases de códigos e escalabilidade em mente, e pode servir como um sólido conjunto de orientações para implementação OOCSS. +**BEM**, ou _“Block-Element-Modifier”_, é uma convenção de nomes para classes em HTML e CSS. Foi originalmente desenvolvida por Yandex com grandes bases de códigos e escalabilidade em mente, e pode servir como um sólido conjunto de orientações para implementação de OOCSS. * [BEM 101](https://css-tricks.com/bem-101/) de CSS Trick - * [introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) de Harry Roberts + * [Introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) de Harry Roberts -Nós recomendamos um variante do BEM com "blocos" em formato PascalCased, que funciona particularmente bem quando combinado com componentes (por exemplo React). Underscores e dashes ainda são utilizados para modificadores e filhos. +Nós recomendamos um variante do BEM com "blocos" em formato _PascalCase_, que funciona particularmente bem quando combinado com componentes (ex. React). _Underscores_ e _dashes_ ainda são utilizados para modificadores e filhos. **Exemplo** @@ -162,18 +162,18 @@ function ListingCard() { ``` * `.ListingCard` é um “bloco” e representa um componente de alto nível - * `.ListingCard__title` é um “elemento” e representa um decendente de `.ListingCard` que ajuda a compor o bloco como inteiro. - * `.ListingCard--featured` é um "modificador" e representa um estado diferente ou variação no block `.ListingCard`. + * `.ListingCard__title` é um “elemento” e representa um descendente de `.ListingCard` que ajuda a compor o bloco como um todo. + * `.ListingCard--featured` é um "modificador" e representa um estado diferente ou variação do bloco `.ListingCard`. ### Seletores ID -Enquanto é possível selecionar elementos por ID em CSS, isto deveria ser considerado um anti-projeto. Seletores ID introduzem um nível alto de [especificidade](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) para suas declarações de regras e eles não são reutilizáveis. +Enquanto é possível selecionar elementos por ID em CSS, isto deveria ser considerado um antipadrão. Seletores ID introduzem um nível alto de [especificidade](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) para suas declarações de regras e eles não são reutilizáveis. -Para mais detalhes leia o seguinte [artigo do CSS Wizardry](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/) sobre como ligar com especificidade. +Para mais detalhes, leia o seguinte [artigo do CSS Wizardry](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/) sobre como lidar com especificidade. ### JavaScript hooks -Evite vincular a mesma classe em seu CSS e JavaScript. Combinando os dois, muitas vezes resulta em tempo perdido durante refatoração, quando um desenvolvedor deve fazer uma referência cruzada de cada classe que está alterando e, pior ainda, o medo de quebrar alguma funcionalidade. +Evite vincular a mesma classe tanto em seu CSS como no JavaScript. Combinar os dois muitas vezes resulta, no mínimo, em tempo perdido durante refatoração, quando um desenvolvedor deve fazer referência cruzada a cada classe que está alterando, e no pior dos casos, em medo de fazer alterações pelo temor de quebrar alguma funcionalidade. Recomendamos a criação de classes específicas JavaScript para vinculação, com prefixo `.js-`: @@ -206,13 +206,13 @@ Utilizar `0` ao invés de `none` para especificar que um estilo não tem borda. ### Sintaxe * Use sintaxe `.scss`, nunca a original `.sass` -* Ordene as declarações e CSS regular em `@include` logicamente (veja abaixo) +* Ordene as declarações em CSS regular e `@include` logicamente (veja abaixo) ### Ordenação de declarações de propriedades 1. Declaração de propriedades - Listar todas as declarações de propriedades padrão, tudo que não seja `@include` ou um seletor agrupado. + Listar todas as declarações de propriedades padrão, tudo que não seja `@include` ou um seletor aninhado. ```scss .btn-green { @@ -235,9 +235,9 @@ Utilizar `0` ao invés de `none` para especificar que um estilo não tem borda. } ``` -3. Seletores agrupados +3. Seletores aninhados - Seletores agrupados, _se necessário_, vão no final e nada vai depois dos mesmo. Adicionar espaços em branco entre suas regras de declaração e seletores agrupados, bem como entre seletores agrupados adjacentes. Aplicar as mesmas regras acima para seus seletores agrupados. + Seletores aninhados, _se necessários_, vão no final, e nada deve vir depois deles. Adicionar espaços em branco entre suas declarações de regras e seletores aninhados, bem como entre seletores aninhados adjacentes. Aplicar as mesmas diretrizes acima para seus seletores aninhados. ```scss .btn { @@ -253,19 +253,19 @@ Utilizar `0` ao invés de `none` para especificar que um estilo não tem borda. ### Variáveis -Prefira nomes de variáveis com dash-cased (ex. `$my-variable`) do que camelCased ou snake_cased. É aceitável adicionar prefíxos em nomes de variáveis que se destinam a ser usadas dentro do mesmo arquivo com um "underscore" (ex. `$_my-variable`). +Prefira nomes de variáveis em _dash-case_ (ex. `$my-variable`) em vez de _camelCase_ ou _snake\_case_. É aceitável adicionar um _"underscore"_ como prefixo em nomes de variáveis que se destinam a ser usadas somente dentro do arquivo atual (ex. `$_my-variable`). ### Mixins -Mixins devem ser usados para limpar seu código, adicionar clareza ou abstrair complexidade, assim como funções bem nomeadas. Mixins que aceitam nenhum argumento podem ser úteis para isto, mas note que se você não compactar seu payload (ex. gzip) isto pode contribuir para duplicação de código desnecessário nos estilos resultantes. +_Mixins_ devem ser usados para aplicar _[DRY](https://pt.wikipedia.org/wiki/Don%27t_repeat_yourself)_ ao seu código, adicionar clareza ou abstrair complexidade -- da mesma forma que usar funções bem nomeadas. _Mixins_ que não aceitam nenhum argumento podem ser úteis para isto, mas note que se você não compactar seu _payload_ (ex. gzip), isto pode contribuir para duplicação de código desnecessário nos estilos resultantes. ### Extend -`@extend` deve ser evitado porque possui comportamento não intuitivo e perigoso, especialmente quando usado em seletores agrupados. Mesmo extendendo os seletores placeholder de nível superior, isto pode causar problemas se a ordem dos seletores mudar mais tarde (ex. se eles estão em outros arquivos e a ordem dos mesmos variar). Gzipping lida com a maioria das economias que você teria ganho usando `@extend`, e, ainda, você pode limpar seus estilos muito bem com mixins. +`@extend` deve ser evitado porque possui comportamento não-intuitivo e potencialmente perigoso, especialmente quando usado em seletores aninhados. Mesmo estender seletores _placeholder_ de nível superior pode causar problemas se a ordem dos seletores mudar mais tarde (ex. se eles estão em outros arquivos e a ordem dos mesmos variar). Usar _gzip_ lida com a maior parte das economias que você teria ganho usando `@extend`, e você ainda pode tornar seus estilos menos repetitivos muito bem com _mixins_. -### Seletores agrupados +### Seletores aninhados -**Não agrupe seletores para mais de três níveis de profundidade!** +**Não aninhe seletores em mais de três níveis de profundidade!** ```scss .page-container { @@ -277,22 +277,31 @@ Mixins devem ser usados para limpar seu código, adicionar clareza ou abstrair c } ``` -Quando os seletores se tornam muito longos, você provavelmente está escrevendo CSS como: +Quando os seletores se tornam muito longos, você provavelmente está escrevendo CSS que é: -* Fortemente aclopado ao HTML (frágil) *—OU—* +* Fortemente acoplado ao HTML (frágil) *—OU—* * Excessivamente específico (poderoso) *—OU—* * Não reutilizável +Novamente: **nunca aninhe seletores ID!** -Novamente: **nunca agrupe seletores ID!** +Se você precisar utilizar um seletor ID (e você realmente deve evitar fazer isto), eles nunca devem estar aninhados. Se você estiver fazendo isto, revise sua marcação ou reflita sobre por que tanta especificidade é necessária. Se você estiver escrevendo HTML e CSS bem formados, você **nunca** deve precisar usar isso. -Se você deve precisar utilizar um seletor ID (e você realmente não deveria fazer isto!), eles nunca devem ser agrupados. Se você está fazendo isto, revise sua marcação ou reflita o porquê tanta especificidade é necessária. Se você está escrevendo HTML e CSS bem formados, você **nunca** deveria usar isto! +## Traduções -## Tradução + Este guia também está disponível em outros idiomas: - Este guia também está disponível em outras linguas: + - ![id](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Indonesia.png) **Indonésio**: [mazipan/css-style-guide](https://github.com/mazipan/css-style-guide) + - ![tw](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Taiwan.png) **Chinês (Tradicional)**: [ArvinH/css-style-guide](https://github.com/ArvinH/css-style-guide) + - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinês (Simplificado)**: [Zhangjd/css-style-guide](https://github.com/Zhangjd/css-style-guide) + - ![fr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/France.png) **Francês**: [mat-u/css-style-guide](https://github.com/mat-u/css-style-guide) + - ![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japonês**: [nao215/css-style-guide](https://github.com/nao215/css-style-guide) + - ![ko](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Coreano**: [CodeMakeBros/css-style-guide](https://github.com/CodeMakeBros/css-style-guide) + - ![pt-PT](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Portugal.png) **Português (Portugal)**: [SandroMiguel/airbnb-css-style-guide](https://github.com/SandroMiguel/airbnb-css-style-guide) + - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russo**: [rtplv/airbnb-css-ru](https://github.com/rtplv/airbnb-css-ru) + - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Espanhol**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) + - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png) **Vietnamita**: [trungk18/css-style-guide](https://github.com/trungk18/css-style-guide) + - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Italy.png) **Italiano**: [antoniofull/linee-guida-css](https://github.com/antoniofull/linee-guida-css) + - ![de](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Germany.png) **Alemão**: [tderflinger/css-styleguide](https://github.com/tderflinger/css-styleguide) - - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese (Simplified)**: [Zhangjd/css-style-guide](https://github.com/Zhangjd/css-style-guide) - - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide) - - ![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [nao215/css-style-guide](https://github.com/nao215/css-style-guide) - - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) +**[⬆ Voltar para o início](#Índice)**