Mengenal CSS Dan Tips Penulisan Yang Baik

 

Pengertian CSS

CSS adalah singkatan dari Cascading Style Sheets, merupakan salah satu bahasa pemrograman web  untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Keuntungan Penggunaan CSS

• Mempermudah Pengaturan Web. Penulisan kode kode CSS akan dipisahkan dengan kode html sehingga pemilik web tidak akan bingung untuk mengganti dan memperbaiki tata letak maupun postingan yang dipublikasikan. Oleh karena itu CSS menjadikan halaman lebih menarik dan nyaman untuk dikunjungi.
• Memperingan Penggunaan Bandwith. Semakin lenggangnya kuota bandwith akan memberi dampak kepada banyaknya pengunjung dalam waktu bersamaan tanpa lelet aksesnya.
• Mempercepat Web Browser Untuk Mengakses Situs Kita. Pencarian situs browser atau serch engine akan mendeteksi melewati kode kode bahasa pemograman yang kita gunakan, disini CSS berperan sebagai penyederhana bahasa pemograman sehingga akses search engine yang menuju ke halaman web kita akan lebih cepat tersorot dan memungkinkan web kita untuk nangkring di nomor satu atau paling tidak halaman pertama.
• Reformatting atau Progressive Enhancement. Dengan perubahan sederhana dari satu baris, sebuah stylesheet yang berbeda dapat digunakan untuk halaman yang sama. Ini memiliki keunggulan untuk aksesibilitas, serta memberikan kemampuan untuk menyesuaikan halaman atau situs ke perangkat target yang berbeda. Selain itu, perangkat tidak dapat memahami styling masih akan menampilkan konten.
• Fleksibilitas. Dengan menggabungkan CSS dengan fungsionalitas sebuah Content Management System, cukup banyak fleksibilitas dapat diprogram ke dalam bentuk pengirenentukan nilai properti sebagai ekspresi sederhana (seperti margin-left: 10% - 3em + 4px ;). Hal ini berguna dalam berbagai kasus, seperti menghitung ukuran kolom dikenakan kendala pada jumlah semua kolom.

Kekurangan Penggunaan CSS

• Kurangnya Variabel. CSS tidak berisi variabel. Hal ini membuat perlu untuk melakukan "mengganti semua" ketika salah satu keinginan untuk mengubah fundamental konstan, seperti skema warna atau berbagai ketinggian dan lebar.
• Browser Dukungan konsisten. Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.
• Batasan Kontrol Vertikal. Meskipun penempatan horisontal unsur-unsur umumnya mudah untuk mengontrol, penempatan vertikal sering unintuitive, berbelit-belit, atau tidak mungkin. Tugas-tugas sederhana, seperti berpusat elemen vertikal atau mendapatkan footer yang akan ditempatkan tidak lebih tinggi dari bawah viewport, baik memerlukan aturan style rumit dan unintuitive, atau aturan sederhana namun banyak yang tidak didukung.
• Pengendalian Bentuk Elemen. CSS saat ini hanya menawarkan bentuk persegi panjang. Sudut bulat atau bentuk lainnya mungkin memerlukan non-semanurangan, dan kelemahan yang ditemukan melalui penggunaan CSS "murni", kegunaannya dalam web desain masih terlihat dengan cara lain. Karena aksesibilitas, konten web untuk ponsel ponsel dan PDA menjadi dapat diakses karena CSS. CSS mengkonsumsi bandwidth lebih rendah. Dan dengan CSS, hampir semua informasi tata letak tinggal di satu tempat: dokumen CSS. Karena informasi tata letak yang terpusat, perubahan ini dapat dilakukan dengan cepat dan global secara default.

Menuliskan CSS Dengan Baik
Saat pertama kali menggunakan CSS, menuliskan kodenya memang akan terasa melelahkan dan sangat rumit jika sebelumnya anda sudah terbiasa membuat sebuah website hanya dengan menggunakan table. Bagaimanapun juga setelah kita mengetahui pembuatan website dengan table bukanlah standar web yang baik, kita pun akan mulai beralih dan mempelajari CSS.
Saya rasa semua orang pasti bisa menuliskan CSS, bahkan saat ini banyak sekali perusahaan yang bergerak dibidang converting PSD ke HTML dengan CSS. Tapi satu hal yang jadi pertanyaan, "Apakah CSS yang dituliskan cukup baik?". Oleh sebab itu disini saya akan membahas tentang cara menuliskan kode CSS yang baik.

• Memberikan indentasi (jarak) setiap menuliskan properti CSS

Berilah jarak indentasi saat menuliskan properti CSS, pisahkan antara properti yang satu dengan yang lainnya. Pemberian jarak akan membuat kode CSS terorganisasi dengan baik sehingga dapat dengan mudah dicari.

Contoh:
Body {
background: url(images.jpg);
font: 12px arial;
height: auto;
left: 0;
margin: 0 auto;
padding: 0;
top: 0;
width: 100%;
}

• Disusun Secara Alphabetical

Penyusunan tulisan properti CSS secara alphabetical juga adalah cara yang baik dan mempermudah pencarian properti yang mau kita rubah nilainya. Perhatikan pada properti CSS pada poin sebelumnya, pada dreamweaver fasilitas ini sudah disediakan dengan menekan CTRL + Space.

• Penulisan Kode Secara CSS Secara Singkat

Contoh:
.sample {
border-color: #000;
border-style: solid;
border-width: 1px;
}

Anda harus belajar bagaimana menuliskan kode CSS secara pendek. Pada penulisan properti border diatas ini adalah contoh penulisan yang kurang baik, Seharusnya properti diatas dapat dibuat singkat dengan menuliskannya seperti contoh dibawah,

.sample {
border: 1px solid #000;
}

Penulisan kode yang pendek akan mempercepat proses penulisannya, selain itu juga akan mempercepat tingkat cluseter dalam CSS sehingga bisa lebih cepat juga dirender oleh browser.

• Menggunakan CSS Reset

Contoh:
html, body {
height:100%;
min-height:100%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, blockquote, form, fieldset, input, textarea, th, td { 
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}

Setiap browser mempunyai kompatibilitas yang berbeda dan juga perlakuan berbeda pada CSS, anda harus mereset semua CSS sebelum memulai penulisan CSS, sehingga kode anda tidak terpengaruhi browser dan browser menampilkan item CSS anda dengan benar. Di atas adalah beberapa contoh untuk mereset CSS pada beberapa elemen.

• Membuat Pernyataan Comments

Contoh:
/*membuat layout*/
.layout {
}

/*membuat sidebar*/
.sidebar{
}

Membuat comment di setiap bagian pengerjaan adalah hal yang baik untuk membuat penulisan kita tetap bersih dan terorganisir dengan baik. ini juga membantu anda untuk mempermudah penelusuran kode.

• Hapus Semua Kode CSS Yang Tidak Terpakai

Mungkin saat menuliskan kode banyak atribut Class dan ID yang tidak jadi dipakai, buanglah segera semua atribut class dan ID yang tidak terpakai atau pisahkan dalam file referensi yang berbeda. Apabila anda belakangan ingin merubah CSS anda, anda tidak akan di pusingkan dengan banyaknya atribut class dan ID yang sudah tidak digunakan.

Ok sekian tips dari saya dalam menuliskan CSS yang baik, hal-hal kecil yang sering dilupakan namun sangat berarti bila diterapkan. Mudah-mudahan bisa bermanfaat dan bisa di amalkan.

Terima kasih.