Tips and Trick Create CSS

0 Comment

Link
Draftcss
Seperti yang sudah saya jelaskan beberapa waktu yang lalu tentang CSS, kini saya mau share tips-tips membuat CSS. Beberapa contoh css yang saya share merupakan contoh yang sederhana, sehingga kita bisa dengan mudah mengatur dan meletakkan css sesuka hati, namun untuk tingkat lanjut tentu kita tidak bisa menggunakan metode newbie seperti yang saya share beberapa waktu lalu, karena sulit untuk dicustomisazi atau di ubah-ubah. Berikut saya share beberapa tips untuk membuat advance CSS.
  • Draft Layout. Sebelum mulai membuat CSS, sangat disarankan untuk menggambar draft layout yang sangat membantu. Pembuatan draft ini bisa dikatakan pra produksi. Dengan pembuatan draft layout, kita bisa mengira-ngira berapa div, style dll yang harus dipersiapkan, sehingga dapat mengatur letak css juga.
draft css
  • Mengatur Penempatan Syntax CSS. Pengetikan letak syntax css juga perlu diatur. Karena ini sangat berguna untuk peninjauan ulang CSS. Pada umumnya letak CSS berurutan dari atas ke bawah. Yaitu untuk syntax teratas adalah syntax yang mengatur tentang header, tag html dsb, semakin ke bawah semakin menurun hingga akhirnya pengaturan footer.
  • Nama class dan id. Pemberian nama class dan id ini sangatlah penting dalam membuat CSS, jika membuat CSS sederhana kita, tidak perlu terlalu memikirkannya, namun untuk yang advance kita harus memikirkannya. Dengan penamaan class dan id yang ngawur, kita akan kesulitan jika suatu saat memerlukan penyuntingan untuk css tersebut, karena sudah lupa dan harus mengecek satu persatu. Misal untuk pengaturan footer jangan gunakan nama header.
  • Re-usable. Dengan penamaan class dan id yang benar CSS yang kita buat juga bisa digunakan untuk orang lain atau halaman web yang lain, sekali kerja dua tiga pulau terlampaui lah itungannya.
Berikut contoh css yang merupakan tugas dari mata kuliah web development yang rumit, sehingga sangat sulit dikerjakan tanpa menggunakan draft.
  • Tugas Kasus Dua Web Dev
  • Download Source Kasus Dua
Semoga bermanfaat

Share:

Related Post

Leave a Comment