You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -39,7 +39,7 @@ Uma “declaração de regra” é o nome dado ao seletor (ou grupo de seletores
39
39
40
40
### Seletores
41
41
42
-
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:
42
+
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:
43
43
44
44
```css
45
45
.my-element-class {
@@ -53,7 +53,7 @@ Em uma declaraçao de regra, "seletores" são os bits que determinam quais eleme
53
53
54
54
### Propriedades
55
55
56
-
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:
56
+
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:
57
57
58
58
```css
59
59
/* some selector */ {
@@ -64,11 +64,11 @@ Finalmente, propriedades são os elementos selecionados de uma regra de declara
64
64
65
65
## CSS
66
66
67
-
### Formato
67
+
### Formatação
68
68
69
-
* Use "soft tabs" (2 espaços) para identação.
70
-
* Prefira dashes`(-)` no lugar de camelCasing em nomes de classes.
71
-
-Underscores`(_)` e PascalCasing podem ser utilizados caso você use BEM (veja [OOCSS e BEM](#oocss-e-bem) abaixo).
69
+
* Use _"soft tabs"_ (2 espaços) para indentação.
70
+
* Prefira _dashes_`(-)` no lugar de _camelCase_ em nomes de classes.
71
+
-_Underscores_`(_)` e _PascalCase_ podem ser utilizados caso você use BEM (veja [OOCSS e BEM](#oocss-e-bem) abaixo).
72
72
* Não use seletores ID.
73
73
* Quando usar múltiplos seletores em uma regra de declaração, ponha cada um em uma própria linha.
74
74
* 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
107
107
108
108
### Comentários
109
109
110
-
* Prefira comentários de linha (`//` em Sass) para blocos de comentários.
111
-
* Prefira comentários em uma única linha. Evite comentários no final da linha.
110
+
* Prefira comentários de linha (`//` em Sass) a blocos de comentários.
111
+
* Prefira comentários em linhas próprias. Evite comentários no final da linha.
112
112
* Escreva comentários detalhados para códigos que não são auto-documentados:
113
-
- Usos do z-index
114
-
- Compatibilidade ou hacks específicos de navegadores
113
+
- Usos do _z-index_
114
+
- Compatibilidade ou _hacks_ específicos de navegadores
115
115
116
116
### OOCSS e BEM
117
117
118
118
Nós incentivamos algumas combinações de OOCSS e BEM por três razões:
119
119
120
-
* Ajuda a criar relações claras e estritas entre CSS e HTML.
121
-
* Nos ajuda a criar componentes reutilizáveis e que podem ser repostos.
122
-
* Permite menor especificidade e agrupamento.
123
-
* Ajuda na construção de estilos escaláveis.
120
+
* Ajuda a criar relações claras e estritas entre CSS e HTML
121
+
* Nos ajuda a criar componentes reutilizáveis e que podem ser usados em composição
122
+
* Permite menor aninhamento e especificidade
123
+
* Ajuda na construção de estilos escaláveis
124
124
125
-
**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.
125
+
**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.
126
126
127
127
*[OOCSS wiki](https://github.com/stubbornella/oocss/wiki) de Nicole Sullivan
128
128
*[Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/) de Smashing Magazine
129
129
130
-
**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.
130
+
**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.
131
131
132
132
*[BEM 101](https://css-tricks.com/bem-101/) de CSS Trick
133
-
*[introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) de Harry Roberts
133
+
*[Introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) de Harry Roberts
134
134
135
-
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.
135
+
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.
136
136
137
137
**Exemplo**
138
138
@@ -162,18 +162,18 @@ function ListingCard() {
162
162
```
163
163
164
164
*`.ListingCard` é um “bloco” e representa um componente de alto nível
165
-
*`.ListingCard__title` é um “elemento” e representa um decendente de `.ListingCard` que ajuda a compor o bloco como inteiro.
166
-
*`.ListingCard--featured` é um "modificador" e representa um estado diferente ou variação no block`.ListingCard`.
165
+
*`.ListingCard__title` é um “elemento” e representa um descendente de `.ListingCard` que ajuda a compor o bloco como um todo.
166
+
*`.ListingCard--featured` é um "modificador" e representa um estado diferente ou variação do bloco`.ListingCard`.
167
167
168
168
### Seletores ID
169
169
170
-
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.
170
+
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.
171
171
172
-
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.
172
+
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.
173
173
174
174
### JavaScript hooks
175
175
176
-
Evite vincular a mesma classe em seu CSS e JavaScript. Combinando os dois, muitas vezes resultaem 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.
176
+
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.
177
177
178
178
Recomendamos a criação de classes específicas JavaScript para vinculação, com prefixo `.js-`:
179
179
@@ -206,13 +206,13 @@ Utilizar `0` ao invés de `none` para especificar que um estilo não tem borda.
206
206
### Sintaxe
207
207
208
208
* Use sintaxe `.scss`, nunca a original `.sass`
209
-
* Ordene as declarações e CSS regular em`@include` logicamente (veja abaixo)
209
+
* Ordene as declarações em CSS regular e`@include` logicamente (veja abaixo)
210
210
211
211
### Ordenação de declarações de propriedades
212
212
213
213
1. Declaração de propriedades
214
214
215
-
Listar todas as declarações de propriedades padrão, tudo que não seja `@include` ou um seletor agrupado.
215
+
Listar todas as declarações de propriedades padrão, tudo que não seja `@include` ou um seletor aninhado.
216
216
217
217
```scss
218
218
.btn-green {
@@ -235,9 +235,9 @@ Utilizar `0` ao invés de `none` para especificar que um estilo não tem borda.
235
235
}
236
236
```
237
237
238
-
3. Seletores agrupados
238
+
3. Seletores aninhados
239
239
240
-
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.
240
+
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.
241
241
242
242
```scss
243
243
.btn {
@@ -253,19 +253,19 @@ Utilizar `0` ao invés de `none` para especificar que um estilo não tem borda.
253
253
254
254
### Variáveis
255
255
256
-
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`).
256
+
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`).
257
257
258
258
### Mixins
259
259
260
-
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.
260
+
_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.
261
261
262
262
### Extend
263
263
264
-
`@extend` deve ser evitado porque possui comportamento nãointuitivo 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 amaioria das economias que você teria ganho usando `@extend`, e, ainda, você pode limpar seus estilos muito bem com mixins.
264
+
`@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 superiorpode 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 amaior parte das economias que você teria ganho usando `@extend`, evocê ainda pode tornar seus estilos menos repetitivos muito bem com _mixins_.
265
265
266
-
### Seletores agrupados
266
+
### Seletores aninhados
267
267
268
-
**Não agrupe seletores para mais de três níveis de profundidade!**
268
+
**Não aninhe seletores em mais de três níveis de profundidade!**
269
269
270
270
```scss
271
271
.page-container {
@@ -277,22 +277,31 @@ Mixins devem ser usados para limpar seu código, adicionar clareza ou abstrair c
277
277
}
278
278
```
279
279
280
-
Quando os seletores se tornam muito longos, você provavelmente está escrevendo CSS como:
280
+
Quando os seletores se tornam muito longos, você provavelmente está escrevendo CSS que é:
281
281
282
-
* Fortemente aclopado ao HTML (frágil) *—OU—*
282
+
* Fortemente acoplado ao HTML (frágil) *—OU—*
283
283
* Excessivamente específico (poderoso) *—OU—*
284
284
* Não reutilizável
285
285
286
+
Novamente: **nunca aninhe seletores ID!**
286
287
287
-
Novamente: **nunca agrupe seletores ID!**
288
+
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.
288
289
289
-
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!
290
+
## Traduções
290
291
291
-
## Tradução
292
+
Este guia também está disponível em outros idiomas:
292
293
293
-
Este guia também está disponível em outras linguas:
0 commit comments