Sedikit Hal Tentang Clean Code

Kali ini saya akan membahas tentang pentingnya penerapan Clean Code dalam web development. CleanCode sendiri merupakan code yang mudah dibaca dan dipahami serta mudah dipelihara dan dimodifikasi oleh sesama developer. Artinya, penulisan code yang diberikan bermakna tetapi tidak terlalu panjang. Tidak ada bagian code yang harus diulang, dan hampir semuanya harus konsisten.

Saya akan menjelaskan beberapa hal yang menurut saya penting untuk diperhatikan. Saya akan memberi contoh kasus penulisan yang sering dialami pada Javascript dan CSS.

Javascript Clean Code

1. Function and Variable Naming

Penamaan function dan variable merupakan hal yang amat sangat penting di dalam pemrograman. Usahakan memberi penamaan yang mudah dipahami oleh sesama developer. Dan jangan menggunakan penamaan yang bikin susah developer lain mengartikannya. Nama harus bisa menjelaskan maksud dan tujuannya.

There are only two hard things in Computer Science: cache invalidation and naming things.

2. Shorthand code

Gunakan cara-cara ringkas dalam penulisan coding. Seperti menggunakan fitur-fitur terbaru dari ES6 yang bisa digunakan. Contoh gunakan ternary operation daripada if else.

// IF ELSE
if (a) {
  return true;
} else {
  return false;
}

// TERNARY
const boolean = a ? true : false;

3. Linters

Gunakan tools code validator atau linters. Ini sangat membantu kita sebagai developer dalam mengerjakan koding. ESLint salah tools yang paling banyak digunakan. ESLint akan membantu kita menemukan beberapa error yang sering terjadi di kodingan yang kita tulis. Seperti validasi variable belum terdefine, function telah dideklarasi namun belum terpakai, dan lain lain.

ESLint juga bisa dikombinasikan dengan beberapa plugin lainnya seperti Prettier untuk mendapatkan susuan indentasi code yang rapi.

Jika kita bekerja dengan tim developer yang banyak, ada baiknya mendefinisikan atau membuat kesepakatan mengenai Linters tersebut. Supaya semua yang terlibat memiliki style-coding yang sama dan saling mengerti satu sama lain.

4. Nesting Code

Nesting di dalam sebuah code adalah hal wajar. Namun, akan menjadi rumit jika nesting dari sebuah code menjadi terlalu mendalam. Karena selain akan memakan resource memory CPU yang sedikit lebih banyak, mungkin juga akan membuat bingung developer lain. Jadi sebisa mungkin kita bisa memanage nesting code hanya cukup 1 level saja. Contoh simple biasanya terjadi ketika menggunakan IF/ELSE.

// Bad
function check(b) {
  if (a) {
    if (a == b) {
      // do something
    } else {
      return 'Not Same';
    }
  } else {
    return 'Not si a';
  }
}


// Good
function check(b) {
  if (!a) {
    return 'Not si a';
  }

  if (a != b) {
    return 'Not Same';
  }

  // do something
}

5. Consistency

Ini adalah hal yang paling penting dan juga mungkin menjadi paling berat didalam semua aspek. Bukan masalah teknis, namun lebih ke behaviour masing-masing dari kita developer. Konsistensi menurut saya adalah ujung tombak dari semua hasil yang sudah kita rencakan. Dengan konsisten, maka kita akan terbiasa dengan menerapkan hal-hal yang sudah kita coba ikuti tadi.

CSS Clean Code

1. Hindari Element Selector

Jangan menggunakan global selector untuk melakukan styling pada HTML anda. Maksud dari global selector yakni melakukan styling dengan menggunakan node HTML langsung untuk styling. Contoh :

button {
  color: red;
  font-size: 16px;
}

div {
  width: 100px;
}

Jika anda mengerjakan project yang lumayan besar, dimana berisi banyak element atau komponen yang re-useable maka sangat tidak disarankan untuk melakukan styling merujuk ke node tag HTML nya. Hal ini dikarenakan, setiap tag HTML tidak hanya digunakan untuk satu saja komponen saja. Namun akan banyak digunakan dibeberapa komponen-komponen lainnya.

Penggunaan element selector hanya boleh dilakukan untuk melakukan normalisasi HTML element demi menunjang Cross Browser issue. Dan mungkin bisa juga digunakan untuk melakukan styling RichText / Wysiwyg dengan catatan harus berdasarkan parent classnya.

2. Gunakan CSS Preprocessor

Gunakan CSS PreProcessor untuk melakukan styling. Ini sangat membantu untuk menyusun dan memisahkan beberapa code styling CSS berdasarkan kebutuhan dari object atau komponen-komponen yang ada.

Yang paling banyak digunakan saat ini yakni SASS PreProcessor. Sebagai contoh jika menggunakan SASS maka anda bisa menggunakan metode 7-1 pattern untuk mendefinisikan struktur file CSS. Kurang lebih seperti berikut :

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _mixins.scss       # Sass Mixins
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _dropdown.scss     # Dropdown
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |–  about.scss        # About specific styles
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|
 – main.scss              # Main Sass input file

3. Naming Convention

Gunakan naming convention dalam membangun arsitektur CSS. Ada banyak metodologi yang sering digunakan. Contoh :

• SMACSS
• ITCSS
• OOCSS
• AMCSS
• BEM

Yang paling sering digunakan saat ini adalah BEM. Ini akan sangat membantu developer untuk membuat arsitektur CSS yang mudah dibaca dan rapi. Juga bisa menerapkan 7-1 pattern yang sudah di jelaskan di atas.

4. Jangan bergantung pada !important

Sebisa mungkin hindari penggunaan !important. Tag !important memiliki spesifisitas tertinggi di dalam CSS. Anda perlu memikirkan se-urgent apakah penggunaan !important dalam code anda. Jika masih bisa diatasi dengan menggunakan cara lain semisal menggunakan class modifier maka gunakanlah cara lain tersebut. Karena jika akan terus memaksakan maka akan berimbas di elemen-elemen yang lain. Biasanya sekali menggunakan !important maka ketika melakukan styling pada element-element selanjutnya akan bergantung juga dengan !important.

Penggunaan !important hanya boleh jika memang ingin merubah style dari sebuah plugin/third-party yang memang secara dinamis memasukkan style ke sebuah elemen tertentu.

5. Jangan gunakan ID sebagai selector

Hindari juga melakukan styling menggunakan element selector ID. Hal ini dikarenakan ID hanya diperuntukkan sebagai trigger supaya dari Backend ataupun dari Javascript bisa melakukan proses-proses tertentu. Dan ID sifatnya uniqe value, maka biasanya hanya akan ada 1 ID yang dipakai di sebuah element. Tentu sangat tidak mungkin jika kita memasukkan banyak ID di CSS kita hanya untuk styling element yang sama.

// HTML
<button type="button" id="submit" class="c-button">Click</button>


// Bad
#submit {
  background-color: red;
  color: white;
}

// Good
.c-button {
  background-color: red;
  color: white;
}

Seperti itulah beberapa ulasan hal-hal simple mengenai CleanCode pada Javascript dan CSS. Tentunya berdasarkan dengan apa yang saya alami.

Semoga sedikit bermanfaat