Seorang Web Designers & Web Developers pastinya sudah sangat akrab dengan HTML & CSS. Menulis sintaks kode HTML & CSS yang bejibun banyaknya merupakan rutinitas yang membosankan hanya untuk membuat tampilan website tampak indah & menarik. Jika anda mencari alternatif yang lebih baik untuk membuat tampilan indah pada halaman web. Tulisan ini akan mencoba mengupas beberapa cara untuk memudahkan & meningkatkan kenyamanan dalam menulis CSS, dari dua pendekatan yang berbeda yaitu Framework CSS & Preprocessor CSS.
Masalah Dalam CSS
Kita biasanya disulitkan menggabungkan beberapa class satu dengan class lainnya. Jadi kita terpaksa menuliskan CSS yang bejibun banyaknya atau menulis ulang seluruh properti yang ada jika kita ingin membuat kode yang mudah dibaca dalam menggabungkan beberapa properti dengan beberapa class yang ada. Itu semua dikarenakan CSS tidak menyediakan fungsi abstraksi apapun.
CSS tidak bisa digabungkan menjadi satu seperti layaknya fitur include dalam PHP. Kenapa kita perlu fitur itu ? Karena terkadang kita ingin merapihkan kode CSS dengan memisahkan kode desain tipografi ke filenya sendiri, desain layout ke file tersendiri, & seterusnya. Dengan CSS, kita terpaksa harus memasukkan seluruh file CSS tersebut satu demi satu ke dalam halaman website. Tidak begitu bermasalah, tapi itu akan menyulitkan kita ketika maintenance & testing website.
Solusi Permasalahan CSS
Framework & Preprocessor CSS sendiri menjadi solusi untuk menyelesaikan beberapa masalah pada CSS. Keduanya berperan beda, Framework CSS menyediakan kemudahan berupa CSS Bundle yang mana kita hanya perlu menerapkan class tanpa membuat sebuah CSS lagi, Sedangkan Preprocessor CSS menyediakan kemudahan berupa adanya fungsi seperti bahasa pemrograman lainnya.
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, & 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, & 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 secara default. Berbagai elemen-elemen standar CSS telah didesain dengan baik oleh pengembang framework, & 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.
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 (& 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. Framework memberikan kemudahan di awal pembuatan website, tetapi kita kembali harus menuliskan CSS tambahan jika ingin menghasilkan website yang unik & berbeda dengan pengguna framework lain. Bagaimana dengan CSS Preprocessor ? Apa bedanya dengan Framework, serta kelebihan & kekurangannya ?
CSS Preprocessor
Sekarang kita akan melihat solusi lain yang ada untuk mempermudah penulisan CSS yaitu CSS Preprocessor. CSS Preprocessor merupakan sebuah bahasa penulisan baru yang dikembangkan di atas CSS untuk tujuan yang sama dengan CSS yaitu memperindah tampilan halaman web. CSS Preprocessor umumnya menambahkan fitur-fitur baru ke dalam bahasanya, fitur-fitur yang tidak dimiliki oleh CSS seperti variabel, fungsi, &import file. Biasanya preprocessor dikompilasi menjadi CSS, & pengguna preprocessor kemudian cukup menyertakan CSS hasil kompilasi ke halaman web yang relevan.
Disini kita akan melihat perbedaan penulisan CSS dengan Preprocessor CSS. Untuk penulisan CSS biasanya seperti ini.
1
2
3
4
5
6
7
8
9
10
11
12
13
| #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;} |
Sedangkan CSS Preprocessor dapat ditulis dengan sangat sederhana dibandingkan CSS. Anda bisa lihat penulisannya dibawah ini.
1
2
3
4
5
6
7
8
9
10
11
| #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }} |
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 yang dibangun dengan menggunakan LESS).
Pada tulisan ini kita telah melihat permasalahan yang ada ketika menuliskan CSS, serta dua solusi yang ditawarkan oleh komunitas pengembang web yaitu Framework & Preprocessor CSS. Kita juga telah melihat sedikit gambaran mengenai Framework & Preprocessor CSS, serta kelebihan &kekurangannya. Sumber dalam tulisan ini adalah Meningkatkan Kenyamanan Menulis CSS & Website Resmi LESS.
Created By : Nurul Imam Date : 31 - October - 2013
0 Response to "Penggunaan Framework & Preprocessor CSS"
Posting Komentar