Seorang pengembang web, tidak peduli seberapa baru, dapat dipastikan akan bertemu dan menulis BANYAK kode CSS (Cascading StyleSheet). Sebagai satu-satunya bahasa yang dapat digunakan untuk mengubah tampilan elemen-elemen pada HTML, pengembang web pada umumnya memiliki hubungan benci-tapi-rindu dengan CSS. Tapi tentunya hubungan tersebut tidak menghentikan langkah para pengembang hebat untuk mencari alternatif yang lebih baik untuk membuat tampilan indah pada halaman web. Tulisan ini akan mencoba mengupas beberapa cara untuk memudahkan dan meningkatkan kenyamanan dalam menulis CSS, dari dua pendekatan yang berbeda: framework CSS dan preprocessor CSS.

Catatan: Tulisan ini merupakan bagian pertama dari seri yang memiliki 2 bagian. Untuk membaca tulisan-tulisan lainnya dalam seri ini silahkan buka:

Bagian 2: Bootstrap, Sebuah Framework CSS dari Twitter
Bagian 3: SASS: Styles with Attitudes

##Masalah dengan CSS

Sebelum masuk ke solusi permasalahan yang ada pada CSS, tentunya kita perlu melihat beberapa masalah utama yang ada pada CSS terlebih dahulu. Tanpa mengerti masalah yang akan diselesaikan, kita tentunya tidak dapat mengaplikasikan solusi dengan baik dan optimal. Pengembang web yang berpengalaman dan telah membangun hubungan benci-tapi-rindu dengan CSS dapat melewati bagian ini dan langsung masuk ke bagian selanjutnya, yang membahas beberapa framework dan preprosessor CSS, serta contoh pengunaannya.

Sudah siap? Mari kita lihat hal-hal yang sering dikeluhkan para pengembang web mengenai CSS:

  1. Sulitnya menggunakan kembali kode yang ada pada CSS. Ingin menggunakan sebagian properti pada class tertentu di class lain? Kasus yang bagus untuk menggunakan fungsi bukan? Well, CSS tidak menyediakan fungsi abstraksi apapun. Kalau ingin membuat kode yang lebih mudah dibaca dengan menggabungkan beberapa properti pada beberapa class untuk kasus tertentu? Silahkan menggunakan ratusan class atau menuliskan ulang seluruh properti yang ada!
  2. Tidak adanya ekspresi kode pada CSS. Ingin membuat warna yang 10% lebih gelap dibandingkan warna latar standar? Ingin menuliskan background-color: darker(10%, $DefaultBGColor)? Anda kurang beruntung. Silahkan hitung sendiri kode warna yang lebih gelap 10% daripada #F0F0F0. Tidak tahu caranya? Selamat membaca dan googling beberapa jam ke depan!
  3. Tidak adanya sistem untuk menggabungkan beberapa file CSS menjadi satu. Saya berbicara tentang fitur seperti #include pada C/C++, import pada python dan java, using pada C#, dan banyak bahasa-bahasa lainnya. Kenapa kita perlu fitur itu? Karena terkadang kita ingin “merapikan” CSS dengan memisahkan kode desain tipografi ke filenya sendiri, desain layout ke file tersendiri, dan seterusnya. Dengan CSS, kita terpaksa harus memasukkan seluruh file CSS tersebut satu demi satu ke dalam halaman website. Bukan masalah besar, tapi tentunya meningkatkan kesulitan maintenance dan testing halaman web.

Dan masih banyak komplain-komplain lainnya dari pengembang ke CSS (yang kalau dituliskan satu per satu akan memerlukan satu tulisan tersendiri). Framework dan preprocessor CSS sendiri dibangun untuk menyelesaikan beberapa masalah pada CSS, dengan pendekatan yang berbeda-beda tentunya. Seperti apa peberdaannya?

Solusi Permasalahan CSS: Framework dan Preprocessor

Seperti yang telah dijelaskan sebelumnya, framework dan preprocessor dikembangkan untuk menyelesaikan permasalahan pada HTML dan CSS, meskipun kedua solusi ini memiliki pendekatan yang berbeda dalam penyelesaian masalah. Mari kita lihat perbedaannya!

Framework CSS

Apa itu framework? Dalam konteks rekayasa perangkat lunak umumnya, sebuah framework dapat dikatakan adalah sekumpulan abstraksi yang disediakan oleh pengembang framework untuk memberikan fungsionalitas umum dari aplikasi, yang kemudian dapat digunakan oleh pengguna framework untuk membangun sebuah aplikasi spesifik.

Umumnya framework memiliki banyak komponen-komponen yang biasa digunakan dalam sebuah aplikasi, dan mengintegrasikan komponen-komponen tersebut agar dapat digunakan oleh pengguna framework dengan mudah untuk membuat aplikasi. Sebuah framework pengembangan web dapat saja memiliki komponen autentikasi untuk login pengguna, komponen koneksi ke basis data, dan berbagai hal lainnya yang umumnya dimiliki aplikasi web.

Pada kasus CSS sendiri, sebuah framework CSS dapat dikatakan merupakan sekumpulan class CSS yang disediakan oleh vendor (pembuat framework) untuk memudahkan pengembaang web dalam membuat tampilan web yang bagus. Misalnya, kode HTML berikut:

<pre>
    &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

akan menghasilkan tampilan seperti berikut tanpa framework CSS:

tanpa framework: hanya tampilan teks dengan font berbeda

dan dengan menggunakan framework CSS bootstrap, untuk kode HTML yang sama persis tampilan website akan berubah menjadi seperti berikut:

dengan framework: ada kotak pengurung kode, dan latar warna berbeda

Jadi, pendekatan yang ditawarkan framework untuk masalah “menulis CSS tidak menyenangkan” adalah dengan memberikan kita pilihan untuk menuliskan CSS sesedikit mungkin! Berbagai elemen-elemen standar CSS telah didesain dengan baik oleh pengembang framework, dan biasanya kita bahkan dapat menggunakan elemen-elemen tambahan seperti menu atau kotak dialog! Dengan menggunakan framework CSS, kita diberikan fasilitas untuk membuat tampilan website yang cukup bagus dengan hanya menuliskan CSS secara minimal! Bahkan tak jarang pengembang tidak perlu menuliskan CSS tambahan jika memang tidak ingin mengubah tampilan standar yang disediakan oleh framework CSS yang digunakan!

Oke, jadi framework memberikan kita fasilitas untuk “menghindari” penulisan CSS. Sangat bagus. Sayangnya, kenyamanan yang ditawarkan framework pastinya memiliki harga yang harus dibayar. Dalam hal ini harga yang harus dibayar untuk kemudahan ialah ketika kita ingin membuat website yang tampil berbeda dari website-website lain yang menggunakan framework yang sama. Setelah menggunakan sebuah framework cukup lama (dan melihat hasil desain framework tersebut berkali-kali), kita akan dapat dengan mudah melihat ciri-ciri framework yang digunakan oleh sebuah website, karena website tersebut tidak menuliskan banyak CSS. Kita dapat mengetahui sebuah website menggunakan bootstrap dari tombol atau menu website tersebut. Jika kita tidak ingin tampil sama dengan website-website lain yang menggunakan framework yang sama, kita harus menuliskan CSS (lagi)!

Oke, jadi framework memberikan kemudahan di awal pembuatan website, tetapi kita kembali harus menuliskan CSS tambahan jika ingin menghasilkan website yang unik dan berbeda dengan pengguna framework lain. Bagaimana dengan CSS preprocessor? Apa bedanya dengan framework, serta kelebihan dan kekurangannya?

CSS Preprocessor

Sekarang kita akan melihat solusi lain yang ada untuk mempermudah penulisan CSS: CSS Preprocessor. CSS Preprocessor merupakan sebuah bahasa penulisan baru yang dikembangkan di atas CSS untuk tujuan yang sama dengan CSS: memperindah tampilan halaman web. CSS Preprocessor umumnya menambahkan fitur-fitur baru ke dalam bahasanya, fitur-fitur yang tidak dimiliki oleh CSS seperti variabel, fungsi, dan import file. Biasanya preprocessor dikompilasi menjadi CSS, dan pengguna preprocessor kemudian cukup menyertakan CSS hasil kompilasi ke halaman web yang relevan.

Berikut adalah contoh kode CSS untuk bagian atas (pembuka) dari halaman web:

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

yang dapat ditulis dengan lebih sederhana dengan menggunakan CSS Preprocessor LESS:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

(kode diambil dari website resmi LESS). Sederhananya: CSS Preprocessor ingin menyelesaikan permasalahan penulisan kode CSS dengan menambahkan fitur-fitur baru ke dalam CSS sehingga menulis CSS tidak lagi menjadi sebuah tugas yang menyebalkan. Kekurangan utama dari preprocessor CSS ialah bahwa fitur-fitur ini ditambahkan dengan cara membuat bahasa baru, yang tentunya menyebabkan kita harus mempelajari sebuah bahasa (lagi).

Biasanya preprocessor CSS sendiri cenderung dirancang untuk memudahkan penulisan CSS yang sangat banyak, sehingga preprocessor lebih cocok digunakan jika ingin merancang sebuah website dari nol. Framework CSS sendiri banyak yang dibangun dengan menggunakan preprocessor CSS (misalnya bootstrap dibangun dengan menggunakan LESS).

Catatan: Penulis juga telah menerjemahkan dokumentasi LESS, yang dapat dibaca pada tulisan ini.

Akhir Kata

Pada tulisan ini kita telah melihat permasalahan yang ada ketika menuliskan CSS, serta dua solusi yang ditawarkan oleh komunitas pengembang web: framework dan preprocessor CSS. Kita juga telah melihat sedikit gambaran mengenai framework dan preprocessor CSS, serta kelebihan dan kekurangan dari masing-masing pendekatan. Pada tulisan selanjutnya, kita akan melihat lebih dalam ke beberapa framework dan preprocessor yang ada, untuk benar-benar mendapatkan gambaran bagaimana kedua solusi ini bekerja, sehingga kita dapat menentukan akan menggunakan solusi yang mana untuk website yang akan dikembangkan ke depannya.

Seperti biasa, kritik, saran, dan topik yang ingin dibahas dapat diberikan pada kotak komentar di bawah. Terima kasih telah mebaca, dan happy hacking!

comments powered by Disqus

Daftar Isi