Bagaimana Menggunakan Modul Untuk Mengorganisasikan Kode Front-End

Pernah terpikir bagaimana situs besar seperti Tuts+ menjaga kode CSS, HTML dan Javascript tetap teratur disetiap iterasi dan pengembangannya yang terus menerus? Saya akan tunjukkan proses yang digunakan untuk menjaganya tetap rapi dan teratur.

Masalah dengan CSS

Langkah pertama dalam proses ini adalah dengan menemukan suatu cara untuk membuat sebagian besar CSS yang dibutuhkan tidak menjadi berantakan.

Umumnya pada CSS, anda membuat style sesuai kebutuhan, kemudian berusaha membuat selector yang dapat diaplikasikan secara luas sehingga dapat digunakan kembali diseluruh situs. Sebagai contoh, berikut beberapa CSS rule sederhana yang tidak janggal keberadaanya pada tiap stylesheet.

1

h1 { font-size: 22px; }

2

.subtitle { font-size: 18px; }

Jika anda ingin meng-override selector tersebut pada bagian spesifik dari suatu halaman, anda bisa menggunakan aturan bertingkat untuk membuat selector mentargetkan elemen yang lebih spesifik:

1

.site-header h1 { font-size: 40px; }

2

.site-header .subtitle { font-size: 28px; }

3

.site-header a.navigation { color: #136FD2 }

4

...

Pendekatan ini tidaklah salah, Namun hal tersebut dapat menimbulkan masalah yang signifikan pada situs yang memiliki banyak halaman, dan dikerjakan oleh banyak pengembang.

Apa yang terjadi jika kita mengubah styling h1 atau .subtitle secara global? font-size sudah ter-override oleh style yang lebih spesifik, tapi jika kita menambahkan font-weight atauline-height itu akan terjadi. Segala perubahan yang dilakukan pada style global dapat mempengaruhi style spesifik dengan cara-cara yang sulit diprediksi bila tidak mengetahui pengetahuan mendalam mengenai style dari suatu situs.

Semakin banyak style yang dibuat seperti ini, akan semakin jelas "efek samping" pada interaksi style CSS nantinya, membutuhkan proses trial and error yang melelahkan untuk memperbaikinya, dan akhirnya menimbulkan kehilangan produktifitas dan banyak bug yang akan masuk ke fase produksi.

Modul BEM

Untuk mencegahnya, kami mengadopsi pendekatan ke CSS berbasis Metodologi BEM. Bukannya mendefenisikan style yang berlaku secara global, seluruh style disimpan pada "blok" serba ada melalui suatu konvensi penamaan. Sebuah "blok" didefenisikan lebih kurang sebagai sebuah unit konten mandiri yang dapat digunakan kembali (Meskipun tidak wajib untuk dapat digunakan kembali).

Sebagai contoh, perhatikan blok “featured-sections” berikut:

Kita menggunakan konvensi penamaan yang cocok dengan kode sumber, seperti semua style untuk blok featured-section akan disimpan di modules/featured_section.sass:

1

.featured-sections

2

  margin: 0 0 $gutter-width 0

3

  padding-top: 8px

4

  border-top: 4px solid #dae1e5

5

6

.featured-sections__title

7

  color: #8fa6b3

8

  font: bold 14px/1.2em $font

Konvensi penamaan seperti ini memastikan style tidak akan konflik dan berantakan. Selama konvensi penamaannya tetap diikuti, dengan nama blok diawal dari setiap nama class, mustahil suatu style untuk mempengaruhi sesuatu diluar dari bloknya.

Hal ini juga sangat memudahkan untuk mencari style yang sesuai dengan suatu elemen di basis kode. Dengan mudahnya anda bisa melihat nama class suatu elemen, dan mengetahui nama stylesheet yang harus dibuka.

Kode View Modular

Kita melangkah lebih lanjut dan menerapkan konvensi penamaan ini ke view. Tiap blok memiliki sebagian view dengan nama yang sama, disimpan dalam views/modules.  Sebagai contoh HTML view untuk featured-sections berada di views/modules/_featured_sections.html.slim:

Modular JavaScript

Selanjutnya kita juga mengadopsi konvensi nama yang sama untuk kode Javascript, dengan menggunakan Backbone.js.

Tiap blok yang butuh untuk menjalakan suatu JavaScript behavior mendapatkan sebuah Backbone view object dengan nama blok yang sama:

1

class window.AccountHeader extends Backbone.View

2

  events:

3

'change .account-header__mobile-menu-select': 'mobileMenuChange'

4

5

  mobileMenuChange: ->

6

    document.location = @_selectedOption().data('url')

7

8

  _selectedOption: ->

9

    @$ 'option:selected'

Kita telah menulis beberapa kode pemuatan view yang dijalankan saat halaman dimuat, sehingga Backbone view yang sesuai secara otomatis dimuat untuk setiap elemen dengan class CSS yang cocok dengan daftar nama blok yang terkait dengan JS nya.

Kita juga menggunakan konvensi penamaan yang sama untuk kode JavaScript, menghasilkan suatu struktur untuk blok yang penuh fitur terlihat seperti ini:

Penerapan umum

Saya sangat merekomendasikan pendekatan ini untuk proyek apapun. Saya pikir ini sangat berguna untuk mengerjakan suatu proyek besar, bahkan jika anda bekerja untuk situs yang jauh lebih kecil, tidak ada ruginya mengatur kode front-end secara modular.

Walapun begitu, anda mungkin akan menghadapi masalah saat mencoba menggunakan strategi ini jika telah memiliki style global CSS  dengan jumlah yang signifikan, atau jika anda bergantung pada library CSS seperti Twitter Bootstrap.  Karena BEM style menggunakan nama class tunggal sebagi selector, BEM style memiliki nilai "kekhususan" CSS yang sangat rendah, dan cenderung untuk diabaikan oleh style CSS global yang sering memiliki beberapa tingkat selektor bertingkat, serta nama tag dan ID.

Tentu masih mungkin untuk berpindah dari style CSS global ke BEM style yang lebih modular, dan saya pikir itu akan sangat berguna untuk kedepannya. Namun, bersiagalah untuk sedikit kesulitan dalam membangun BEM style untuk beberapa saat, dan bersiaplah untuk terus menambahkan setidaknya sedikit deklarasi !important untuk sementara waktu pada CSS anda, sampai anda selesai mengubah seluruh style global yang tersisa.