Latest Article

Promotion Ads

Buat Website Murah

Featured Article

Popular Article

Penggunaan Framework & Preprocessor CSS

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

Twitter Bootstrap

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

LESS « The Dynamic Stylesheet language

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.

    #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.

    #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 :        Date : 31 - October - 2013

Jasa Pembuatan Website

23 Comments

  1. TUKANG CoLoNGReply

    font blog ini bagus sekali

    • Nurul ImamReply

      Emphasisnya yang keren yah :D

  2. Mizz AizaReply

    sebenarnya saya tidak mengerti perihal coding untuk blog..

    • Nurul ImamReply

      Santai aja mbak, ga usah dipaksa klo memang ga mau ngoding ;)

  3. Rizkyzone.comReply

    gimana sih mas cara penggunaan bootstap untuk theme wordpress ?

    • Nurul ImamReply

      Tinggal disesuaikan tag htmlnya dengan class bawaan bootstrap dan tentunya memanggil css bootstrap

  4. Intan SudibjoReply

    wah penjelasannya lengkap banget, perlu belajar banyak nih :)

    • Nurul ImamReply

      Silahkan belajar sendiri, saya cuma menuliskannya :D

  5. Cara RirinReply

    saya bukan web desainer dan bukan web developer, tapi saya hanya blogger biasa yang suka berbagi informasi apa saja yang saya tahu. Hehehe :D

    • Nurul ImamReply

      I’m not Web Designer & Web Developers but I’m Web DesignLoverss :D

  6. wongcrewchildReply

    coba mengnal dan memahaminya

    • Nurul ImamReply

      Silahkan kenalin dulu baru dipahami karakteristiknya seperti halnya PDKT sama cewe :D

    • Cara RirinReply

      Wah wah kayaknya jago nich mas nurul kalau pedekate sama cewek hehe :D
      Mudah-mudahan nembaknya nggak pake sms lagi ya hehe :D

      • Nurul ImamReply

        Boro-boro mbak, sampe sekarang belum laku juga :(
        Nembaknya lewat desain web mbak klo nanti sudah ketemu jodoh :p

  7. opeReply

    wahh lumayan ngerti juga walaupun sedikit :D

    • Nurul ImamReply

      Syukurlah klo tulisan ini membantu meski sedikit :)

  8. Aldi UnantoReply

    Less css powerful bgt yah. ada mixin, bahkan bisa pake konsep classes

    • Nurul ImamReply

      Iya, lumayan kompleks :)

  9. icha chanReply

    aku jadi pengen belaja..kira kira susah gak ??

    • Nurul ImamReply

      Gak susah, asal pelan-pelan belajarnya dan pantang mundur :)

  10. Sukim HakimReply

    Gan, domisili di serang ya?
    Kalau bisa, saya mau kursus bikin Theme WordPress Series bisa gak gan?
    kalau bisa tolong email atau pm atau whatsapp, 085294978345, thanks gan..

    • Nurul ImamReply

      Bisa, silahkan hubungi kontak saya :)

  11. Ibnu CahyadiReply

    mau tak pacarin CSS mas, jangan marah atau cemburu ya hahaha…, salam kenal…., love your article….

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>