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
Copy file name to clipboardExpand all lines: README.md
+29-29Lines changed: 29 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,32 +1,32 @@
1
1
# Guia de estilo CSS / Sass da Airbnb
2
2
3
-
*A mostly reasonable approach to CSS and Sass*
3
+
*Uma abordagem mais razoável para CSS e Sass*
4
4
5
-
## Table of Contents
5
+
## Índice
6
6
7
-
1.[Terminology](#terminology)
8
-
-[Rule Declaration](#rule-declaration)
9
-
-[Selectors](#selectors)
10
-
-[Properties](#properties)
7
+
1.[Terminologia](#terminology)
8
+
-[Declaração da regra](#rule-declaration)
9
+
-[Seletores](#selectors)
10
+
-[Propriedades](#properties)
11
11
1.[CSS](#css)
12
-
-[Formatting](#formatting)
13
-
-[Comments](#comments)
14
-
-[OOCSS and BEM](#oocss-and-bem)
15
-
-[ID Selectors](#id-selectors)
12
+
-[Formatação](#formatting)
13
+
-[Comentários](#comments)
14
+
-[OOCSS e BEM](#oocss-and-bem)
15
+
-[Seletores ID](#id-selectors)
16
16
-[JavaScript hooks](#javascript-hooks)
17
17
-[Border](#border)
18
18
1.[Sass](#sass)
19
-
-[Syntax](#syntax)
20
-
-[Ordering](#ordering-of-property-declarations)
21
-
-[Variables](#variables)
19
+
-[Sintaxe](#syntax)
20
+
-[Ordenação](#ordering-of-property-declarations)
21
+
-[Variáveis](#variables)
22
22
-[Mixins](#mixins)
23
-
-[Extend directive](#extend-directive)
24
-
-[Nested selectors](#nested-selectors)
25
-
1.[Translation](#translation)
23
+
-[Diretiva Extend](#extend-directive)
24
+
-[Seletores aninhados](#nested-selectors)
25
+
1.[Tradução](#translation)
26
26
27
-
## Terminology
27
+
## Terminologia
28
28
29
-
### Rule declaration
29
+
### Declaração da regra
30
30
31
31
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:
32
32
@@ -37,7 +37,7 @@ A “rule declaration” is the name given to a selector (or a group of selector
37
37
}
38
38
```
39
39
40
-
### Selectors
40
+
### Seletores
41
41
42
42
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:
43
43
@@ -51,7 +51,7 @@ In a rule declaration, “selectors” are the bits that determine which element
51
51
}
52
52
```
53
53
54
-
### Properties
54
+
### Propriedades
55
55
56
56
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:
57
57
@@ -66,7 +66,7 @@ Finally, properties are what give the selected elements of a rule declaration th
66
66
67
67
## CSS
68
68
69
-
### Formatting
69
+
### Formatação
70
70
71
71
* Use soft tabs (2 spaces) for indentation
72
72
* Prefer dashes over camelCasing in class names.
@@ -107,15 +107,15 @@ Finally, properties are what give the selected elements of a rule declaration th
107
107
}
108
108
```
109
109
110
-
### Comments
110
+
### Comentários
111
111
112
112
* Prefer line comments (`//` in Sass-land) to block comments.
113
113
* Prefer comments on their own line. Avoid end-of-line comments.
114
114
* Write detailed comments for code that isn't self-documenting:
115
115
- Uses of z-index
116
116
- Compatibility or browser-specific hacks
117
117
118
-
### OOCSS and BEM
118
+
### OOCSS e BEM
119
119
120
120
We encourage some combination of OOCSS and BEM for these reasons:
121
121
@@ -167,7 +167,7 @@ function ListingCard() {
167
167
*`.ListingCard__title` is an “element” and represents a descendant of `.ListingCard` that helps compose the block as a whole.
168
168
*`.ListingCard--featured` is a “modifier” and represents a different state or variation on the `.ListingCard` block.
169
169
170
-
### ID selectors
170
+
### Seletores ID
171
171
172
172
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.
173
173
@@ -206,7 +206,7 @@ Use `0` instead of `none` to specify that a style has no border.
206
206
207
207
## Sass
208
208
209
-
### Syntax
209
+
### Sintaxe
210
210
211
211
* Use the `.scss` syntax, never the original `.sass` syntax
212
212
* Order your regular CSS and `@include` declarations logically (see below)
@@ -254,19 +254,19 @@ Use `0` instead of `none` to specify that a style has no border.
254
254
}
255
255
```
256
256
257
-
### Variables
257
+
### Variáveis
258
258
259
259
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`).
260
260
261
261
### Mixins
262
262
263
263
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.
264
264
265
-
### Extend directive
265
+
### Diretiva Extend
266
266
267
267
`@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.
268
268
269
-
### Nested selectors
269
+
### Seletores aninhados
270
270
271
271
**Do not nest selectors more than three levels deep!**
272
272
@@ -293,7 +293,7 @@ If you must use an ID selector in the first place (and you should really try not
293
293
294
294
**[⬆ back to top](#table-of-contents)**
295
295
296
-
## Translation
296
+
## Tradução
297
297
298
298
This style guide is also available in other languages:
0 commit comments