10 Trik Sederhana Desain CSS

Semua orang suka jalan pintas. Apakah Anda seorang pengembang CSS baru atau profesional berpengalaman, tidak ada salahnya untuk belajar beberapa cara baru yang lebih mudah untuk dilakukan. Ini adalah trademark dari zaman kita: kita ingin hasil terbaik dalam waktu singkat.

 Tips dan trik tidak sering diajarkan di kelas, apakah saat online atau secara pribadi. Anda hanya harus sering mempelajarinya melalui pengalaman atau dengan berbicara kepada pengembang berpengalaman. Untungnya, kami di sini untuk membantu. Berikut ini sepuluh trik yang dapat membantu, baik untuk otodidak dan programmer berpengalaman.

  1. Satu garis adalah teman Anda.

Anda benar-benar ingin mempertahankan pernyataan CSS dalam satu baris. Menggunakan beberapa baris mungkin terlihat lebih cantik, tapi itu akan menjadi mimpi buruk ketika Anda harus kembali dan menemukan sesuatu dalam kode Anda. Mempunyai segalanya pada satu baris membuat memindai dokumen lebih cepat, karena memungkinkan Anda untuk melihat lebih pada halaman. Ketika mencari bagian tertentu, Anda dapat memindai dan mengatur yang Anda cari, dan menemukan properti yang Anda inginkan, karena jarang ada yang banyak. Viola, Anda sudah selesai.

  1. CSS singkatan itu ada karena suatu alasan, gunakan.

 Menghindari singkatan adalah untuk pemula. Singkatan CSS memberi Anda cara yang lebih singkat (kejutan) untuk menulis kode CSS Anda, yang tidak hanya menghemat waktu mengetik, tetapi juga membuat kode bersih dan lebih mudah untuk memahami.

 Anda dapat membuang-buang waktu menulis kode seperti ini:

.header {<br>

      background-color: #fff;<br>

      background-image: url(image.gif);<br>

      background-repeat: no-repeat;<br>

      background-position: top left; <br>

    }

Atau Anda dapat menulis seperti ini:

.header {<br>

      background: #fff url(image.gif) no-repeat top left<br>

    }

Itu pilihan Anda

  1. Gunakan reset.css di seluruh browser.

browser yang berbeda, seperti Firefox, Internet Explorer, atau Safari, semua memiliki cara yang berbeda untuk render gaya CSS. Dengan menggunakan reset.css Anda dapat mengatur ulang semua gaya fundamental dan mulai dengan stylesheet baru yang kosong. Hal ini sangat penting, karena membantu mengurangi inkonsistensi browser dalam hal-hal seperti ketinggian garis default, margin, ukuran font judul, dan banyak lagi.

  1. Tahu perbedaan antara “class” dan “id”.

Hal ini seringkali menjadi perbedaan membingungkan bagi pemula. Ketika bekerja di CSS, class diwakili oleh sebuah titik “.” Sementara id diwakili oleh hash “#”. Secara konseptual, kelas dapat digunakan kembali saat id digunakan pada gaya yang unik dan tidak terulang.

  1. Gambar dicocokan dengan skema warna situs .

 Ini lebih banyak sebuah trik visual dibandingkan trik coding, tapi masih salah satu yang penting. Anda benar-benar dapat mengubah kekompakan sebuah situs dengan menggunakan CSS untuk menerapkan nada gambar grayscale. Menggunakan resolusi tinggi PNG dan filter CSS, Anda dapat mencocokkan potret apapun untuk skema warna sebuah acara atau situs foto untuk warna perusahaan bisnis. Anda bahkan dapat menggunakan kembali gambar di beberapa tema dengan menambahkan aturan CSS baru untuk setiap temanya.

  1. Perhatikan ukuran gambar Anda.

Untuk layout desain yang responsif, Anda ingin mengoptimalkan gambar setiap tata letak untuk mengurangi skala dan masalah bandwidth. Memanfaatkan JPEG, GIF dan PNG-8 format file. Cobalah untuk tidak menggunakan PNG kecuali benar-benar diperlukan (misalnya, untuk trik di atas), karena dapat meningkatkan ukuran file Anda dengan lima sampai sepuluh kali.

  1. Manfaatkan alat debugging.

Ketika melakukan tweaking CSS Anda, pastikan untuk mendapatkan pratinjau instan pada situs Anda untuk membantu menemukan masalah dan melakukan debug kode Anda. Anda dapat menemukan sejumlah alat debug CSS secara online dan Anda cukup menginstal pada browser Anda. Alat debugging terbaik sebenarnya tergantung pada browser yang Anda gunakan, jadi pastikan untuk mencari pilihan yang berbeda untuk Firefox, Internet Explorer, atau yang lainnya.

  1. Pertimbangkan strategi pertama mobile.

Jika Anda tidak terbiasa dengan desain mobile, itu hanya berarti membangun situs mobile sebelum meningkatkan skala untuk membangun desain tablet dan desktop. Ini penting untuk bekerja dengan desainer mobile yang mampu melakukan hal ini, dan untuk pengembang CSS, salah satu manfaat terbesar dari mengadopsi strategi mobile adalah cara untuk melihat teks dan logo dilihat. Jika teks mudah siap pada perangkat mobile, maka mungkin tidak akan menjadi masalah pada desktop atau tablet. Namun, teks yang mudah dibaca dari komputer mungkin tidak dibaca pada ponsel.

  1. Jaga kode Anda tetap bersih.

Memiliki kode yang bersih sangat penting dengan desain yang responsif. Jika Anda memiliki kode berantakan, Anda akan memiliki waktu yang sulit mengacu pada kode sebelumnya, dan semuanya akan berubah menjadi sungguh berantakan. Ketika Anda menulis, membuat indentasi yang tepat dan komentar mereka yang benar. Ketika Anda meninjau kode Anda, menanggalkan setiap yang tidak penting, yang tidak hanya akan membantu hal-hal terlihat bersih, tetapi juga meningkatkan waktu loading halaman.

  1. Lihat situs lain untuk inspirasi.

Sering kali mendatangkan ide adalah salah satu bagian yang paling sulit dari desain CSS. Lihat beberapa situs favorit Anda dan mengidentifikasi komponen masing-masing yang benar-benar Anda suka. Anda tidak harus menyalin dan mendesain seluruh situs, tapi membantu untuk memisahkan aspek yang dapat berguna di situs yang sedang Anda bangun.

Comments

comments