Skip to content

Commit 5a2eb52

Browse files
author
Sandro Miguel Marques
authored
Update README.md
1 parent de95c51 commit 5a2eb52

File tree

1 file changed

+29
-29
lines changed

1 file changed

+29
-29
lines changed

README.md

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
# Guia de estilo CSS / Sass da Airbnb
22

3-
*A mostly reasonable approach to CSS and Sass*
3+
*Uma abordagem mais razoável para CSS e Sass*
44

5-
## Table of Contents
5+
## Índice
66

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)
1111
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)
1616
- [JavaScript hooks](#javascript-hooks)
1717
- [Border](#border)
1818
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)
2222
- [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)
2626

27-
## Terminology
27+
## Terminologia
2828

29-
### Rule declaration
29+
### Declaração da regra
3030

3131
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:
3232

@@ -37,7 +37,7 @@ A “rule declaration” is the name given to a selector (or a group of selector
3737
}
3838
```
3939

40-
### Selectors
40+
### Seletores
4141

4242
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:
4343

@@ -51,7 +51,7 @@ In a rule declaration, “selectors” are the bits that determine which element
5151
}
5252
```
5353

54-
### Properties
54+
### Propriedades
5555

5656
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:
5757

@@ -66,7 +66,7 @@ Finally, properties are what give the selected elements of a rule declaration th
6666

6767
## CSS
6868

69-
### Formatting
69+
### Formatação
7070

7171
* Use soft tabs (2 spaces) for indentation
7272
* Prefer dashes over camelCasing in class names.
@@ -107,15 +107,15 @@ Finally, properties are what give the selected elements of a rule declaration th
107107
}
108108
```
109109

110-
### Comments
110+
### Comentários
111111

112112
* Prefer line comments (`//` in Sass-land) to block comments.
113113
* Prefer comments on their own line. Avoid end-of-line comments.
114114
* Write detailed comments for code that isn't self-documenting:
115115
- Uses of z-index
116116
- Compatibility or browser-specific hacks
117117

118-
### OOCSS and BEM
118+
### OOCSS e BEM
119119

120120
We encourage some combination of OOCSS and BEM for these reasons:
121121

@@ -167,7 +167,7 @@ function ListingCard() {
167167
* `.ListingCard__title` is an “element” and represents a descendant of `.ListingCard` that helps compose the block as a whole.
168168
* `.ListingCard--featured` is a “modifier” and represents a different state or variation on the `.ListingCard` block.
169169

170-
### ID selectors
170+
### Seletores ID
171171

172172
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.
173173

@@ -206,7 +206,7 @@ Use `0` instead of `none` to specify that a style has no border.
206206

207207
## Sass
208208

209-
### Syntax
209+
### Sintaxe
210210

211211
* Use the `.scss` syntax, never the original `.sass` syntax
212212
* 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.
254254
}
255255
```
256256

257-
### Variables
257+
### Variáveis
258258

259259
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`).
260260

261261
### Mixins
262262

263263
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.
264264

265-
### Extend directive
265+
### Diretiva Extend
266266

267267
`@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.
268268

269-
### Nested selectors
269+
### Seletores aninhados
270270

271271
**Do not nest selectors more than three levels deep!**
272272

@@ -293,7 +293,7 @@ If you must use an ID selector in the first place (and you should really try not
293293
294294
**[⬆ back to top](#table-of-contents)**
295295
296-
## Translation
296+
## Tradução
297297
298298
This style guide is also available in other languages:
299299

0 commit comments

Comments
 (0)