Merge pull request #1 from mazipan/indonesia-version

Move to master from id-version branch

Author: mazipan

README.md

@@ -1,10 +1,10 @@
 # Airbnb CSS / Sass Styleguide
 
-*A mostly reasonable approach to CSS and Sass*
+*Sebagian pendekatan yang paling umum untuk CSS dan Sass*
 
-## Table of Contents
+## Daftar Isi
 
-  1. [Terminology](#terminology)
+  1. [Terminologi](#terminologi)
     - [Rule Declaration](#rule-declaration)
     - [Selectors](#selectors)
     - [Properties](#properties)
@@ -24,11 +24,11 @@
     - [Nested selectors](#nested-selectors)
   1. [Translation](#translation)
 
-## Terminology
+## Terminologi
 
 ### Rule declaration
 
-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:
+“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:
 
 ```css
 .listing {
@@ -39,7 +39,7 @@ A “rule declaration” is the name given to a selector (or a group of selector
 
 ### Selectors
 
-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:
+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:
 
 ```css
 .my-element-class {
@@ -53,7 +53,7 @@ In a rule declaration, “selectors” are the bits that determine which element
 
 ### Properties
 
-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:
+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:
 
 ```css
 /* some selector */ {
@@ -66,17 +66,17 @@ Finally, properties are what give the selected elements of a rule declaration th
 
 ### Formatting
 
-* 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
+* Gunakan “<em>soft tabs</em>” (2 spasi) untuk indentasi
+* Lebih baik <em>dashes</em> dibandingkan <em>camelCase</em> di dalam nama class.
+  - Garis bawah (_) dan <em>PascalCasing</em> tidak mengapa apabila Anda menggunakan BEM (lihat pembahasan [OOCSS and BEM](#oocss-and-bem) dibawah).
+* Jangan gunakan ID selectors
+* Ketika menggunakan “<em>multiple selectors</em>” di deklarasi rule, tambahkan baris baru ke masing-masing selector tersebut.
+* Tambahkan spasi sebelum kurung kurawal (<em>brace</em>) pembuka `{` di deklarasi rule.
+* Di properti, tambahkan spasi setelahnya, tapi tidak sebelumnya dari karakter `:`.
+* Tambahkan baris baru pada kurung kurawal (<em>brace</em>) penutup  `}` dari deklarasi rule.
+* Tambahkan baris kosong antara deskripsi rule.
 
-**Bad**
+**Jangan**
 
 ```css
 .avatar{
@@ -90,7 +90,7 @@ Finally, properties are what give the selected elements of a rule declaration th
 }
 ```
 
-**Good**
+**Sebaiknya**
 
 ```css
 .avatar {
@@ -107,34 +107,34 @@ Finally, properties are what give the selected elements of a rule declaration th
 
 ### Comments
 
-* 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
+* Lebih baik menggunakan <em>comment</em> sebaris (`//` di dalam Sass) dibandingkan blok comment.
+* Lebih baik comment di barisnya sendiri. Hindari comments pada baris paling terakhir.
+* Tulis dengan detail comment dari sebuah code yang tidak mempunyai dokumentasi sendiri, misal:
+  - Penggunaan z-index
+  - Kompatibilitas atau hack dari sebuah browser-specific
 
 ### OOCSS and BEM
 
-We encourage some combination of OOCSS and BEM for these reasons:
+Kami mendorong beberapa kombinasi dari OOCSS dan BEM untuk beberapa alasan berikut:
 
-  * 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
+  * Membantu menulis code dengan lebih jelas, memperjelas hubungan antara CSS dan HTML
+  * Membantu kita membuat code reusable, <em>composable components</em>
+  * Membuat nesting lebih sedikit dan lebih spesifik
+  * Membantu dalam membangun stylesheets yang scalable
 
-**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**, 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.
 
   * 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/)
 
-**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**, 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.
 
   * 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/)
 
-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.
+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.
 
-**Example**
+**Contoh**
 
 ```jsx
 // ListingCard.jsx
@@ -161,39 +161,39 @@ 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` adalah “block” dan me-representasikan sebuah component dengan level tertinggi
+  * `.ListingCard__title` adalah “element” dan me-representasikan sebuah anak dari `.ListingCard` yang membantu membentuk blok secara keseluruhan.
+  * `.ListingCard--featured` adalah “modifier” dan me-representasikan sebuah perubahan state atau variasi di `.ListingCard` block.
 
 ### ID selectors
 
-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.
+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.
 
-For more on this subject, read [CSS Wizardry's article](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/) on dealing with specificity.
+Untuk hal ini, baca lebih lanjut [CSS Wizardry's article](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/).
 
 ### 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.
+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.
 
-We recommend creating JavaScript-specific classes to bind to, prefixed with `.js-`:
+Kami merekomendasikan membuat JavaScript-specific class untuk melakukan binding, dengan prefix `.js-`:
 
 ```html
 <button class="btn btn-primary js-request-to-book">Request to Book</button>
 ```
 
 ### Border
 
-Use `0` instead of `none` to specify that a style has no border.
+Gunakan `0` dibandingkan `none` untuk menjelaskan bahwa style tersebut tidak mempunyai border.
 
-**Bad**
+**Jangan**
 
 ```css
 .foo {
   border: none;
 }
 ```
 
-**Good**
+**Sebaiknya**
 
 ```css
 .foo {
@@ -205,14 +205,14 @@ Use `0` instead of `none` to specify that a style has no border.
 
 ### Syntax
 
-* Use the `.scss` syntax, never the original `.sass` syntax
-* Order your regular CSS and `@include` declarations logically (see below)
+* Gunakan `.scss` syntax, Jangan pernah gunakan `.sass` syntax asli.
+* Urutkan CSS biasa dan `@include` logika deklarasi Anda (lihat dibawah)
 
-### Ordering of property declarations
+### Mengurutkan deklarasi properti
 
-1. Property declarations
+1. Deklarasi properti
 
-    List all standard property declarations, anything that isn't an `@include` or a nested selector.
+    Daftar semua deklarasi property standard, sesuatu yang bukan sebuah `@include` atau nested selector.
 
     ```scss
     .btn-green {
@@ -222,9 +222,9 @@ Use `0` instead of `none` to specify that a style has no border.
     }
     ```
 
-2. `@include` declarations
+2. Deklarasi `@include` 
 
-    Grouping `@include`s at the end makes it easier to read the entire selector.
+    Menggabungkan `@include`s di akhir membuatnya lebih mudah untuk membaca keseluruhan selector.
 
     ```scss
     .btn-green {
@@ -237,7 +237,7 @@ Use `0` instead of `none` to specify that a style has no border.
 
 3. Nested selectors
 
-    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.
+    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.
 
     ```scss
     .btn {
@@ -253,19 +253,19 @@ Use `0` instead of `none` to specify that a style has no border.
 
 ### Variables
 
-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`).
+Lebih baik menggunakan dash-cased untuk 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`).
 
 ### 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.
+Mixin harus digunakan untuk DRY-UP code 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 duplikasi code yang tidak perlu dalam style yang dihasilkan.
 
 ### Extend directive
 
-`@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` 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.
 
 ### Nested selectors
 
-**Do not nest selectors more than three levels deep!**
+**Jangan gunakan nested selector lebih dari tiga level!**
 
 ```scss
 .page-container {
@@ -277,20 +277,21 @@ 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:
+Ketika selectors menjadi sebegitu panjang, Anda telah menulis CSS seperti ini:
 
-* Strongly coupled to the HTML (fragile) *—OR—*
-* Overly specific (powerful) *—OR—*
-* Not reusable
+* Terlalu berpatokan terhadap HTML (rapuh) *—OR—*
+* Terlalu spesifik (powerful) *—OR—*
+* Tidak reusable
 
 
-Again: **never nest ID selectors!**
+Sekali lagi: **Jangan pernah nesting ID selectors!**
 
-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.
 
-## Translation
+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.
 
-  This style guide is also available in other languages:
+## Translation
+  
+  Panduan style ini juga tersedia dalam bahasa lain:
 
   - ![tw](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Taiwan.png) **Chinese (Traditional)**: [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) **Chinese (Simplified)**: [Zhangjd/css-style-guide](https://github.com/Zhangjd/css-style-guide)
@@ -300,3 +301,4 @@ If you must use an ID selector in the first place (and you should really try not
   - ![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)
   - ![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)
   - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png) **Vietnamese**: [trungk18/css-style-guide](https://github.com/trungk18/css-style-guide)
+  - ![id](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Indonesia.png) **Bahasa Indonesia**: [mazipan/css-style-guide](https://github.com/mazipan/css-style-guide)