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
{{ message }}
This repository was archived by the owner on Feb 17, 2025. It is now read-only.
Copy file name to clipboardexpand all lines: README.md
+64-62
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,10 @@
1
1
# Airbnb CSS / Sass Styleguide
2
2
3
-
*A mostly reasonable approach to CSS and Sass*
3
+
*Sebagian pendekatan yang paling umum untuk CSS dan Sass*
4
4
5
-
## Table of Contents
5
+
## Daftar Isi
6
6
7
-
1.[Terminology](#terminology)
7
+
1.[Terminologi](#terminologi)
8
8
-[Rule Declaration](#rule-declaration)
9
9
-[Selectors](#selectors)
10
10
-[Properties](#properties)
@@ -24,11 +24,11 @@
24
24
-[Nested selectors](#nested-selectors)
25
25
1.[Translation](#translation)
26
26
27
-
## Terminology
27
+
## Terminologi
28
28
29
29
### Rule declaration
30
30
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:
31
+
“Rule declaration” adalah nama yang diberikan pada suatu <em>selector</em> (atau group dari beberapa <em>selector</em>) dengan properti-properti di yang berada dalamnya. Berikut misalnyanya:
32
32
33
33
```css
34
34
.listing {
@@ -39,7 +39,7 @@ A “rule declaration” is the name given to a selector (or a group of selector
39
39
40
40
### Selectors
41
41
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:
42
+
Di deklarasi rule, “<em>selector</em>” dijelaskan sebagai sebuah aturan yang menjelaskan bagaimana sebuah element di dalam sebuah <em>DOM Tree</em> akan di beri <em>style</em> berdasarkan properti yang dijabarkan di dalamnya. <em>Selector</em> bisa menggunakan HTML Element, class dari HTML element, ID, atau attribute apapun yang terdapat di HTML element tersebut. Berikut beberapa misalnya selectors:
43
43
44
44
```css
45
45
.my-element-class {
@@ -53,7 +53,7 @@ In a rule declaration, “selectors” are the bits that determine which element
53
53
54
54
### Properties
55
55
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:
56
+
Akhirnya, Properti (en :“<em>property</em>”) adalah <em>style</em> apapun yang akan diterapkan pada element terpilih. Properti adalah sebuah pasangan key dan value dengan deklarasi rule yang bisa memuat satu atau lebih deklarasi dari sebuah properti. Deklarasi properti akan terlihat seperti berikut:
57
57
58
58
```css
59
59
/* some selector */ {
@@ -66,17 +66,17 @@ Finally, properties are what give the selected elements of a rule declaration th
66
66
67
67
### Formatting
68
68
69
-
*Use soft tabs (2 spaces) for indentation
70
-
*Prefer dashes over camelCasing in class names.
71
-
-Underscores and PascalCasing are okay if you are using BEM (see [OOCSS and BEM](#oocss-and-bem)below).
72
-
*Do not use ID selectors
73
-
*When using multiple selectors in a rule declaration, give each selector its own line.
74
-
*Put a space before the opening brace`{`in rule declarations
75
-
*In properties, put a space after, but not before, the `:` character.
76
-
*Put closing braces `}` of rule declarations on a new line
77
-
*Put blank lines between rule declarations
69
+
*Gunakan “<em>soft tabs</em>” (2 spasi) untuk indentasi
70
+
*Lebih baik <em>dashes</em> dibandingkan <em>camelCase</em> di dalam nama class.
71
+
-Garis bawah (_) dan <em>PascalCasing</em> tidak mengapa apabila Anda menggunakan BEM (lihat pembahasan [OOCSS and BEM](#oocss-and-bem)dibawah).
72
+
*Jangan gunakan ID selectors
73
+
*Ketika menggunakan “<em>multiple selectors</em>” di deklarasi rule, tambahkan baris baru ke masing-masing selector tersebut.
74
+
*Tambahkan spasi sebelum kurung kurawal (<em>brace</em>) pembuka `{`di deklarasi rule.
75
+
*Di properti, tambahkan spasi setelahnya, tapi tidak sebelumnya dari karakter `:`.
76
+
*Tambahkan baris baru pada kurung kurawal (<em>brace</em>) penutup `}` dari deklarasi rule.
77
+
*Tambahkan baris kosong antara deskripsi rule.
78
78
79
-
**Bad**
79
+
**Jangan**
80
80
81
81
```css
82
82
.avatar{
@@ -90,7 +90,7 @@ Finally, properties are what give the selected elements of a rule declaration th
90
90
}
91
91
```
92
92
93
-
**Good**
93
+
**Sebaiknya**
94
94
95
95
```css
96
96
.avatar {
@@ -107,34 +107,34 @@ Finally, properties are what give the selected elements of a rule declaration th
107
107
108
108
### Comments
109
109
110
-
*Prefer line comments (`//`in Sass-land) to block comments.
111
-
*Prefer comments on their own line. Avoid end-of-line comments.
112
-
*Write detailed comments for code that isn't self-documenting:
113
-
-Uses of z-index
114
-
-Compatibility or browser-specific hacks
110
+
*Lebih baik menggunakan <em>comment</em> sebaris (`//`di dalam Sass) dibandingkan blok comment.
111
+
*Lebih baik comment di barisnya sendiri. Hindari comments pada baris paling terakhir.
112
+
*Tulis dengan detail comment dari sebuah code yang tidak mempunyai dokumentasi sendiri, misal:
113
+
-Penggunaan z-index
114
+
-Kompatibilitas atau hack dari sebuah browser-specific
115
115
116
116
### OOCSS and BEM
117
117
118
-
We encourage some combination of OOCSS and BEM for these reasons:
118
+
Kami mendorong beberapa kombinasi dari OOCSS dan BEM untuk beberapa alasan berikut:
119
119
120
-
*It helps create clear, strict relationships between CSS and HTML
121
-
*It helps us create reusable, composable components
122
-
*It allows for less nesting and lower specificity
123
-
*It helps in building scalable stylesheets
120
+
*Membantu menulis code dengan lebih jelas, memperjelas hubungan antara CSS dan HTML
121
+
*Membantu kita membuat code reusable, <em>composable components</em>
122
+
*Membuat nesting lebih sedikit dan lebih spesifik
123
+
*Membantu dalam membangun stylesheets yang scalable
124
124
125
-
**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.
125
+
**OOCSS**, atau “Object Oriented CSS”, adalah sebuah pendekatan dalam menulis CSS yang mendorong Anda untuk berpikir mengenai <em>stylesheets</em> sebagai sebuah kumpulan “objects”: <em>reusable</em>, potongan code yang bisa digunakan berulang secara independent didalam sebuah website.
* Smashing Magazine's [Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)
129
129
130
-
**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.
130
+
**BEM**, atau “Block-Element-Modifier”, adalah sebuah_naming convention_untuk “classes” di HTML dan CSS. Pertama kali dibangun oleh Yandex dengan codebase yang besar dan scalability, dan bisa digunakan sebagai kumpulan panduan dalam meng-implementasi OOCSS.
* Harry Roberts' [introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
134
134
135
-
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.
135
+
Kami merekomendasikan variasi dari BEM dengan PascalCased “blocks”, yang bekerja sangat baik bila dikombinasikan dengan components (seperti React). Garis bawah (_ en: underline) dan strip (- en: dashes) tetap digunakan sebagai pembatas untuk modifiers dan anak dibawahnya.
136
136
137
-
**Example**
137
+
**Contoh**
138
138
139
139
```jsx
140
140
// ListingCard.jsx
@@ -161,39 +161,39 @@ function ListingCard() {
161
161
.ListingCard__content { }
162
162
```
163
163
164
-
*`.ListingCard`is the “block” and represents the higher-level component
165
-
*`.ListingCard__title`is an “element” and represents a descendant of`.ListingCard`that helps compose the block as a whole.
166
-
*`.ListingCard--featured`is a “modifier” and represents a different state or variation on the`.ListingCard` block.
164
+
*`.ListingCard`adalah “block” dan me-representasikan sebuah component dengan level tertinggi
165
+
*`.ListingCard__title`adalah “element” dan me-representasikan sebuah anak dari`.ListingCard`yang membantu membentuk blok secara keseluruhan.
166
+
*`.ListingCard--featured`adalah “modifier” dan me-representasikan sebuah perubahan state atau variasi di`.ListingCard` block.
167
167
168
168
### ID selectors
169
169
170
-
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.
170
+
Meskipun memungkinkan untuk memilih element berdasarkan ID dalam CSS, hal tersebut umumnya harus dianggap sebagai anti-pola. ID selector memperkenalkan tingkat yang tidak terlalu tinggi[specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)terhadap deklarasi rule Anda, dan itu tidak reusable.
171
171
172
-
For more on this subject, read[CSS Wizardry's article](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/) on dealing with specificity.
172
+
Untuk hal ini, baca lebih lanjut[CSS Wizardry's article](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/).
173
173
174
174
### JavaScript hooks
175
175
176
-
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.
176
+
Hindari <em>binding</em> class yang sama di kedua CSS dan JavaScript. <em>Conflating</em> antara keduanya sering menyebabkan paling tidak waktu yang terbuang selama refactoring ketika developer harus <em>cross-reference</em> masing-masing class yang berubah, dan yang paling buruk, developer menjadi takut untuk melakukan perubahan karena takut merusak fungsi.
177
177
178
-
We recommend creating JavaScript-specific classes to bind to, prefixed with`.js-`:
178
+
Kami merekomendasikan membuat JavaScript-specific class untuk melakukan binding, dengan prefix`.js-`:
179
179
180
180
```html
181
181
<buttonclass="btn btn-primary js-request-to-book">Request to Book</button>
182
182
```
183
183
184
184
### Border
185
185
186
-
Use`0`instead of `none`to specify that a style has no border.
186
+
Gunakan`0`dibandingkan `none`untuk menjelaskan bahwa style tersebut tidak mempunyai border.
187
187
188
-
**Bad**
188
+
**Jangan**
189
189
190
190
```css
191
191
.foo {
192
192
border: none;
193
193
}
194
194
```
195
195
196
-
**Good**
196
+
**Sebaiknya**
197
197
198
198
```css
199
199
.foo {
@@ -205,14 +205,14 @@ Use `0` instead of `none` to specify that a style has no border.
205
205
206
206
### Syntax
207
207
208
-
*Use the `.scss` syntax, never the original`.sass` syntax
209
-
*Order your regular CSS and `@include`declarations logically (see below)
208
+
*Gunakan `.scss` syntax, Jangan pernah gunakan`.sass` syntax asli.
209
+
*Urutkan CSS biasa dan `@include`logika deklarasi Anda (lihat dibawah)
210
210
211
-
### Ordering of property declarations
211
+
### Mengurutkan deklarasi properti
212
212
213
-
1.Property declarations
213
+
1.Deklarasi properti
214
214
215
-
List all standard property declarations, anything that isn't an`@include`or a nested selector.
215
+
Daftar semua deklarasi property standard, sesuatu yang bukan sebuah`@include`atau nested selector.
216
216
217
217
```scss
218
218
.btn-green {
@@ -222,9 +222,9 @@ Use `0` instead of `none` to specify that a style has no border.
222
222
}
223
223
```
224
224
225
-
2. `@include` declarations
225
+
2. Deklarasi `@include`
226
226
227
-
Grouping `@include`sat the end makes it easier to read the entire selector.
227
+
Menggabungkan `@include`sdi akhir membuatnya lebih mudah untuk membaca keseluruhan selector.
228
228
229
229
```scss
230
230
.btn-green {
@@ -237,7 +237,7 @@ Use `0` instead of `none` to specify that a style has no border.
237
237
238
238
3. Nested selectors
239
239
240
-
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.
240
+
Nested selectors, _if necessary_, buat di paling akhir, dan jangan buat apapun setelahnya. Tambahkan spasi antara deklarasi rule Anda dan nested selectors, serta antara nested selectors yang berdekatan. Terapkan pedoman yang sama seperti di atas untuk nested selectors Anda.
241
241
242
242
```scss
243
243
.btn {
@@ -253,19 +253,19 @@ Use `0` instead of `none` to specify that a style has no border.
253
253
254
254
### Variables
255
255
256
-
Prefer dash-casedvariable 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`).
256
+
Lebih baik menggunakan dash-caseduntuk nama variabel (misalnya `$my-variable`) dibandingkan camelCased atau snake_cased. Hal ini dapat diterima sebagai awalan nama variabel yang dimaksudkan untuk digunakan hanya dalam file yang sama dengan garis bawah (en: underscore) (misalnya `$_my-variable`).
257
257
258
258
### Mixins
259
259
260
-
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 unnecessarycodeduplication in the resulting styles.
260
+
Mixin harus digunakan untuk DRY-UPcode Anda, menambah kejelasan, atau mengurangi kompleksitas abstrak terlalu dalam sebagaimana juga dengan memberi nama yang baik terhadap function. Mixin yang menerima tanpa argumen dapat berguna untuk ini, tetapi perhatikan bahwa jika Anda tidak mengompresi payload Anda (misalnya gzip), ini dapat berkontribusi terhadap duplikasicodeyang tidak perlu dalam style yang dihasilkan.
261
261
262
262
### Extend directive
263
263
264
-
`@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.
264
+
`@extend` harus dihindari karena memiliki perilaku unintuitive dan berpotensi berbahaya, terutama bila digunakan dengan nested selectors. Bahkan memperluas selector placeholder pada tingkat atas yang dapat menyebabkan masalah jika urutan selector berubah nantinya (misalnya jika mereka berada di file lain dan urutan load file-file tersebut digeser). Gzip harus menangani sebagian besar penghematan yang akan Anda dapatkan dengan menggunakan `@ extend`, dan Anda tetap dapat men DRY-UP stylesheet Anda baik menggunakan mixin.
265
265
266
266
### Nested selectors
267
267
268
-
**Do not nest selectors more than three levels deep!**
268
+
**Jangan gunakan nested selector lebih dari tiga level!**
269
269
270
270
```scss
271
271
.page-container {
@@ -277,20 +277,21 @@ Mixins should be used to DRY up your code, add clarity, or abstract complexity--
277
277
}
278
278
```
279
279
280
-
When selectors become this long, you're likely writing CSS that is:
280
+
Ketika selectors menjadi sebegitu panjang, Anda telah menulis CSS seperti ini:
281
281
282
-
* Strongly coupled to the HTML (fragile) *—OR—*
283
-
* Overly specific (powerful) *—OR—*
284
-
* Not reusable
282
+
*Terlalu berpatokan terhadap HTML (rapuh) *—OR—*
283
+
*Terlalu spesifik (powerful) *—OR—*
284
+
*Tidak reusable
285
285
286
286
287
-
Again: **never nest ID selectors!**
287
+
Sekali lagi: **Jangan pernah nesting ID selectors!**
288
288
289
-
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.
290
289
291
-
## Translation
290
+
Jika Anda harus menggunakan ID selector di tempat pertama (dan Anda harus benar-benar mencoba untuk tidak melakukannya), mereka tidak boleh nested. Jika Anda menemukan diri Anda melakukan hal ini, Anda perlu untuk meninjau kembali markup Anda, atau mencari tahu mengapa hal tersebut diperlukan. Jika Anda menulis dengan baik HTML dan CSS, Anda seharusnya ** tidak pernah** harus melakukan hal ini.
292
291
293
-
This style guide is also available in other languages:
292
+
## Translation
293
+
294
+
Panduan style ini juga tersedia dalam bahasa lain:
0 commit comments