Stupid Modul of Style Data CSS

Apakah modularisasi dapat diterapkan dalam kebiasaan koding pada Cascading Styles Sheet (CSS) ?. Stupid thinking saja, jika pada sisi server, dokumen HTML dapat diolah dan sajikan dengan menggunakan bahasa program atau skrip PHP yang mengenal metode tersebut diatas, dan styles data dapat disajikan sebagai berkas PHP pada sisi server. Maka seharusnya styles data atau berkas CSS – Cascading Style Sheet data sebagai markah visualisasi juga dapat dibuat dengan modul pula.

WordPress, CMS atau 'Blogware' tercinta, yang menggunakan modularisasi program dengan skrip PHP sebagai pembangun halaman dokumen HTML sudah pasti bukan hal yang asing lagi. Modul-modul program pada tema WP tersebut umumnya di beri nama header.php, sidebar.php, footer.php, single.php dan seterusnya.

Tujuannya adalah untuk memudahkan perawatan dan selanjutnya pengembangan jika diperlukan. Memecah-mecah program, kemudian melakukan evaluasi jalannya sebuah program supaya sesuai dengan kehendak hati tentu bukan hal yang mudah, pepatah bilang "berakit-rakit ke hulu berenang-renang ke tepian".

Modularisasi Cascading Style Sheet

Pada WordPress, get_header(), get_footer() adalah pemanggilan modul header.php dan footer.php yang sudah dikustomasi oleh Matt dan kawan-kawan. Sementara pada skrip PHP sendiri, Rasmus Lerdoff memperkenalkan pemanggilan modul dengan perintah require(), require_once(), include(), include_once().

Perintah include('nama_berkas') inilah yang bisa dipakai sebagai bahan modularisasi berkas CSS atau style sheet data. Sekali lagi "Bersakit-sakit dahulu, Bersenang-senang kemudian", dan bagian yang paling menyakitkan itu adalah saat memberi nama berkas-berkas CSS yang jumlahnya bisa mencapai puluhan.

Dan berikut adalah eksperimen pribadi tentang penyajian styles sheet dalam modul-modul styles data pada tema WordPress :

  1. Pengelompokan berdasarkan modul-modul standar tema WordPress, misalnya untuk header.php kita siapkan headerstyle.css, untuk footer.php adalah footerstyle.css dan seterusnya. Contoh dibawah ini adalah illustrasi modularisasi pada index.php :

    <?php
    header("Content-type: text/css");
    include('headerstyle.css');
    include('indexstyle.css'); /*style data untuk berkas index.php*/
    include('sidebarstyle.css');
    include('footerstyle.css');
    ?>
    
  2. Pengelompokan berdasarkan tag_key dan elemen-elemen html, misalnya modul anchorstyle.css hanya berisi style data anchor <a>, Heading dengan segala propertinya dikelompokkan dalam headingstyle.css dan seterusnya. Contoh :

    <?php
    header("Content-type: text/css");
    include('layout.css'); /*layout dokumen harus saya sajikan pada kesempatan pertama */
    include('listingstyle.css');
    include('anchorstyle.css');
    include('headingstyle.css');
    include('othermarkahhtml.css');
    include('details-div.css');
    include('details-class.css');
    ?>
    
  3. Atau kombinasi kedua cara diatas, dengan sebuah contoh, bahwa informasi tanggal posting, penulis, jumlah komentar, tidak di perlukan pada page.php dan 404.php, sementara pada single.php atau pada index.php sangat dibutuhkan.

    <?php
    header("Content-type: text/css");
    include('layout.css');
    include('anchorstyle.css');
    include('othermarkahhtml.css');
    include('headerstyle.css');
    include('content.css');
    include('details-post-index.css');/* informasi detail posting */
    include('sidebarstyle.css');
    include('footerstyle.css');
    ?>
    

Dengan penerapan modularisasi pada CSS, beberapa point penting berhubungan dengan penyajian style data, style sheet data atau berkas CSS untuk optimasi performa web secara otomatis dapat terselesaikan. Silahkan berimprovisasi dan selamat berkarya.

Stupid Modul of Style Data CSS

Published on : Apr 12, 2010. Last modified at : Apr 14, 2010.


Click to share on twitter , digg it, or save this article to del.icio.us.

article Navigation

Related to “Stupid Modul of Style Data CSS”.

4 Opinion for “Stupid Modul of Style Data CSS”.

Stupid-nya di mana Pakdhe? Kecuali agak repot saat ngedit on-the-fly dan efek cascade-nya. cmiiw

Rayimas nulis cmiiw, aku milih yang fmwiw saja. Jadi stupid-nya ya yang bener-bener stupid, tidak pada konotasi yang lain dan letaknya pada diri saya sendiri.
Terlanjur Google sentris, Pagespeed sentris tentang performa web dengan mengikutsertakan wejangan W3 dan evaluasi trial tentang CSS style sheet data oleh Steve Souders pada Don’t use @import akhirnya saya membuat kerumitan sendiri pada tulisan diatas. Stupid khan ? Sudahlah, ga penting untuk Rayimas. Stupid yang lain khan sudah rayimas sebut, jangan harap bisa edit on-the fly pada dashboard. Cascade untuk media at-rule masih bisa ditolerir khan ?.

Yang @media handheld/print/iphone maksudnya ya Pakdhe? Kayaknya masih ngefek. cmiiw

Baik dech. Berarti modularisasi style data di serve saat posisi offline saja. posisi online dikasih yang udah mateng. Makasih rayimas.

Leave an Opinion

Important : LOW isn't intended to on topic opinions, just be polite. You may use strict markup only. Opinions failing these requirement will be edited. Spam opinion won't get published.
Please, enter your real name and your valid email address (in required field). Don't worry, i'll kept your email private.










Random Learning