ONE DOES NOT SIMPLY MIGRATE FROM CSS TO SCSS

CSS on its own can be fun! Tapi ketika stylesheet itu menjadi lebih besar, lebih kompleks, dan lebih sulit untuk di-maintain. We need help!

Beberapa bulan yang lalu, hal tadi dialami oleh para developer Front End Web di Kudo. Jumlah baris CSS kian bertambah dan developer baru berdatangan. Dua hal ini yang membuat team Front End kita menyadari bahwa CSS kita belum terorganisir dengan baik. Terdapat class memiliki fungsi style yang hampir sama namun ditulis berulang-ulang, such a waste of time.

Jadi teringat dengan pelajaran waktu kuliah yang pernah saya baca di buku berjudul Clean Code oleh Robert C. Martin yang pernah menyinggung soal DRY Principle. Pernah dengar DRY Principle sebelumnya? DRY merupakan singkatan dari Don’t Repeat Yourself, artinya hanya ada satu copy declaration block yang dapat digunakan oleh lebih dari satu selector.

Satu copy declaration block tersebut akan jauh lebih mudah untuk di maintain dari pada ada banyak; jika ada perubahan, hanya perlu mengubah yang satu itu saja. Jadi efisien kan? Dan tentunya style pun akan konsisten dikarenakan tidak adanya perbedaan rules pada declaration block untuk selector lain.

Langkah selanjutnya, bagaimana caranya supaya declaration block ini bisa dipakai berulang-ulang untuk lebih dari satu selector? Kita butuh variable yang menampung property/value yang bisa dipanggil di semua selector. Tapi CSS belum men-support hal ini. After a long research, munculah CSS-preprocessing yang ternyata men-support penggunaan variable dalam bahasa yang CSS-like.

Akhirnya dipilihlah SASS sebagai CSS Preprocessor yang akan team kita implementasikan. Kenapa SASS? Coba baca dulu artikel disini (I won’t cover that article here, but would recommend you give it a read). Yeay! SASS menyelesaikan masalah code yang berulang karena fitur-fitur yang dimilikinya. Tapi jangan senang dulu… Realitanya adalah kita tidak akan buat dari awal, tapi kita akan “membersihkan” existing CSS yang sudah beribu line. Okay, kita googling dengan keyword “convert css to scss”. Woah, ada banyak! Why not give it a try? Let’s convert it!

Melihat hasil convertnya, kita menyadari fakta lain. Converternya ngerusak CSS kita! Eh engga deng, CSS kita memang harus segera di-“bersihkan”. Ketika menggunakan converter, bad code becoming bad code again. Oke, cara ini ngga menyelesaikan masalah. Kalau gitu engga ada cara lain. Kita harus melakukan konversi secara M A N U A L, tapi tanpa merubah struktur HTML yang ada. Harus se-smooth mungkin dan secepat mungkin. Before everything became more worse than today.

Dari hasil research kecil-kecilan, saya mencoba menerapkan apa yang saya temukan dari programmer pendahulu yang pernah ngulik hal ini duluan.

Tentukan metode SASS file management

Pertama, tentukan dulu metode file management apa yang akan diterapkan, bisa baca artikel yang berjudul “Sass: Directory Structures That Help You Maintain Your Code”. Ada tiga file management di sass yang sepertinya cocok dengan kondisi website KUDO, yaitu:

  1. Menggunakan “7–1 pattern”,
  2. Dikelompokkan berdasarkan fitur,
  3. Atau dikelompokkan sesuai dengan View (ini maksudnya View pada M-V-C)

Mau ngikutin yang mana aja boleh sih, engga ada keharusan juga untuk mengimplementasikan satu metode aja. Contohnya, sekarang file management yang digunakan menggabungkan dua metode nomor 1 dan nomor 3. Berikut struktur dari folder sass yang telah diimplementasikan.

Breakdown existing CSS

Kedua, breakdown semua stylesheet berdasarkan penggunaannya pada setiap page. Misal, pada main menu ada style untuk navbar dan grid kategori, dan seterusnya. Pisahkan pada file yang berbeda. Nah, penentuan metode file management pada tahap pertama akan sangat membantu tahap breakdown stylesheet ini karena kita udah tahu secara pasti apa saja yang harus breakdown. Ketika menemukan style yang sebenarnya dipakai secara global atau digunakan di lebih dari satu page, kelompokkan jadi satu stylesheet saja, tanpa menggabungkan dengan style lainnya, begitu seterusnya hingga kita mempunyai banyak sekali stylesheet.

Clean out our CSS

Kemudian ketiga, setelah memiliki banyak stylesheet tadi, pastikan terlebih dahulu tidak ada tampilan page yang rusak karena ada style yang terlewat / tidak ter-copy. Pemisahan stylesheet bermaksud untuk memudahkan dan mengecilkan fokus kita dalam mengeliminasi style yang penulisannya berulang, atau bahkan menemukan style yang tadinya spesifik hanya digunakan pada page tertentu namun ternyata bisa digunakan lagi di page lainnya. Saat pengeliminasian ini, ingat! Pastikan lagi kalau tidak ada tampilan page yang rusak karena selectornya dihapus atau digantikan namanya.

Hasil dari tahapan ini adalah masing-masing stylesheet menjadi lebih “bersih”, bisa jadi jumlah line-nya berkurang atau bahkan menemukan style yang dapat digunakan pada lebih dari satu page. Oke! Selangkah lebih “bersih”.

Converting ke SASS

Selanjutnya, keempat. Tahapan ini merupakan tahapan yang paling lama dilakukan karena pada tahapan ini kita akan melakukan converting ke SASS. Perlu banyak adaptasi dengan bahasa baru, indeed. Keep moving on! Disini kita harus mulai aware me-modularkan style kita, gunakan @mixins, @include, dan @extends. Ingat! Kita bermaksud untuk mengamalkan sila-sila dari DRY principle. Dan ada tambahan lagi, saat tahapan ini kita harus sebisa mungkin mengamalkan juga KISS yang singkatan dari Keep It Simple Stupid. Pikirkan bagaimana seharusnya style ini bekerja, apakah ada cara lain? Bagaimana caranya untuk mengoptimasi style ini menjadi lebih maintainable, clean, cool, dll. Camkan baik-baik pepatah ini:

Jika sudah melewati tahapan ini, maka kita sudah bisa menikmati betapa mudahnya mengontrol CSS

Should be an early consideration

  1. Jika kita menggunakan css framework. It is a considerable time savings if you use css framework, indeed. Tapi cobalah berfikir ulang, apakah UI/UX yang akan kita bangun sesuai dengan CSS framework tersebut? Atau malah kita harus banyak meng-custom style yang sudah ada? Jika ya, lebih baik buat framework sendiri. Karena terkadang framework yang banyak dipakai orang masih memiliki bug yang akan membuang waktu kita untuk memperbakinya.
  2. Jika saat pertama kali kamu memulai styling dari wrapper terluar terlebih dahulu, cara berpikirmu masih salah. Cobalah memulai css-ing from inside to out. Mulai dari componen terkecil pada sebuah bagian terlebih dahulu, kemudian ke bagian terluar yaitu wrappernya.

Further Reading:
Robert C. Martin. 2009. Clean Code: A Handbook of Agile Software Craftsmanship. US. Prentice Hall. (halaman 48)
Dan Cederholm. 2013. Why Sass?. A List Apart. http://alistapart.com/article/why-sass
Steven Bradle. 2016. Sass: Directory Structures That Help You Maintain Your Code. Vanseo Design. http://vanseodesign.com/css/sass-directory-structures/

pertama kali di post 15 September 2016 di blog developer ini: https://developers.kudo.co.id/2016/09/15/one-does-not-simply-migrate-from-css-to-scss/