Bekerja dengan Cascading Style Sheets (CSS) mungkin sulit bagi pemula. Dengan menggunakan CSS, Anda dapat menyusun, memperbarui, dan memelihara tampilan aplikasi Anda. Tetapi bahasa tersebut membutuhkan keterampilan untuk memanipulasi halaman HTML untuk mendapatkan tata letak yang diinginkan.
Berikut adalah beberapa kesalahan yang harus dihindari saat bekerja dengan CSS. Mereka akan menghemat waktu Anda dan memudahkan proses pengembangan Anda.
1. Menggunakan px untuk Ukuran Font
Unit "px" mewakili piksel. Anda dapat menggunakannya untuk mengekspresikan berbagai panjang halaman web, mulai dari lebar dan tinggi elemen hingga ukuran fontnya.
Namun, px mengunci desain Anda ke ukuran tetap untuk semua layar. Gambar dalam px dapat memenuhi lebar penuh satu layar, dan hanya sebagian kecil dari layar lainnya. Jika Anda menginginkan elemen yang lebih proporsional, menggunakan pengukuran relatif seperti rem, atau persentase (%).
Pengukuran relatif terbaik untuk digunakan adalah rem. Unit ini mengacu pada ukuran font dari elemen root yang sering dapat diatur oleh pembaca di pengaturan browser mereka. Anda dapat melihat dampak px dan rem pada elemen dalam contoh berikut:
html>
<HTML>
<kepala>kepala>
<tubuh>
<h1>Ini judul 1h1>
<h2>Ini judul 2h2>
<P>Ini adalah sebuah paragraf.P>
<P>Ini adalah paragraf lain.P>
tubuh>
html>Anda dapat menata ukuran font dalam dokumen ini menggunakan unit px dengan CSS berikut:
h1 {
ukuran huruf: 50px;
}h2 {
ukuran huruf: 30px;
}
P {
ukuran huruf: 15px;
}
Halaman yang dihasilkan terlihat dapat diterima saat Anda melihatnya di layar besar:
Tapi tidak terlihat rapi di layar yang lebih kecil, seperti di ponsel:
Selanjutnya, terapkan rem pada konten yang sama. Tentukan ukuran font dasar pada elemen html, dan ukuran elemen lainnya menggunakan rems, seperti yang diilustrasikan di bawah ini:
html {
ukuran huruf: 16px;
}h1 {
ukuran huruf: 3rem;
}h2 {
ukuran huruf: 2rem;
}
P {
ukuran huruf: 1rem;
}
Perhatikan perbedaan antara layar besar dan kecil. Dengan rem, skala konten lebih baik terlepas dari ukuran layar. Elemen tidak akan pernah melebihi ukuran layar yang ditetapkan. Itu sebabnya lebih baik menggunakan panjang relatif daripada piksel.
Di layar desktop:
Di layar kecil, teks dalam unit rem masih dapat dibaca:
2. Menempatkan Semua Gaya Anda dalam Satu File
Menggunakan satu file CSS untuk proyek besar dapat membuat kekacauan. Anda akan memiliki file dengan baris kode yang panjang yang akan membingungkan saat memperbarui. Coba gunakan file yang berbeda untuk lembar gaya CSS untuk komponen yang berbeda.
Misalnya, Anda dapat memiliki file berbeda untuk navigasi, header, dan footer. Dan satu lagi untuk bagian tubuh. Memisahkan file CSS Anda membantu menyusun Aplikasi Anda dan mendorong kegunaan kode.
3. Menggunakan Inline CSS dengan tidak tepat
Di vanilla CSS Anda dapat menulis gaya pada halaman HTML seperti pada Kerangka kerja CSS seperti Bootstrap dan TailwindCSS. Inline CSS memungkinkan Anda menerapkan gaya unik ke elemen HTML. Ia menggunakan atribut style dari elemen HTML.
Kode berikut adalah contoh CSS sebaris.
<h2gaya="warna: hijau;">Ini adalah Tajuk Hijauh2>
<Pgaya="warna merah;">Ini adalah paragraf merah.P>
Teks akan muncul seperti ini:
Namun, HTML dengan CSS sebaris hanya bisa berantakan. Karena tidak ada lokasi lain untuk CSS, semua CSS ada di file yang sama dengan HTML. Ini akan terlihat ramai. Mengedit file seperti itu sulit, terutama jika itu bukan kode Anda.
Selain itu, dengan CSS sebaris, Anda harus menulis kode untuk setiap elemen. Ini meningkatkan pengulangan dan mengurangi penggunaan kembali kode. Selalu gunakan kombinasi lembar gaya eksternal dan CSS sebaris untuk menata halaman web Anda.
4. Penggunaan berlebihan! Penting
Di CSS, file !penting aturan menambahkan lebih penting untuk properti/nilai. Ini mengesampingkan aturan gaya lain untuk properti itu pada elemen itu.
Anda seharusnya hanya memiliki sedikit !penting aturan dalam kode Anda. Gunakan hanya bila diperlukan. Tidak ada gunanya menulis kode dan kemudian menimpanya. Kode Anda akan terlihat berantakan dan menimbulkan masalah saat dijalankan di beberapa perangkat.
html>
<html>
<kepala>kepala>
<tubuh>
<P> saya oranye P>
<Pkelas="kelasku"> saya hijau P>
<Ppengenal="my-id"> saya biru. P>
tubuh>
html>CSS:
#my-id {
warna latar belakang: biru;
}.kelasku {
warna latar belakang: hijau;
}
P {
warna latar belakang: oranye !penting;
}
Hasilnya seperti ini:
5. Tidak Mengikuti Konvensi Penamaan
CSS memiliki konvensi penamaan yang memandu pengembang tentang cara menulis kode standar. Ini penting jika Anda berakhir men-debug file CSS di masa mendatang.
Salah satu standar ini termasuk menggunakan tanda hubung untuk memisahkan kata-kata yang dikelompokkan. Lainnya adalah memberi nama pemilih sesuai dengan fungsinya. Jadi siapa pun yang melihatnya tidak perlu menebak. Itu juga membuatnya lebih mudah untuk membaca, memelihara, dan berbagi kode. Misalnya:
Alih-alih ini:
.image1 { margin-kiri: 3%; }Tulis seperti ini:
.boy-image { margin-kiri: 3%; }Saat melihat lembar gaya, Anda akan tahu persis untuk gambar mana kode itu. Panduan gaya HTML/CSS Google mencantumkan lebih banyak konvensi yang harus diketahui oleh setiap pengembang.
Menulis komentar adalah keterampilan yang paling diremehkan dalam pemrograman. Banyak orang lupa menulis komentar untuk menjelaskan kode mereka. Tapi itu menghemat waktu. Komentar sangat penting untuk membaca dan memelihara kode.
Karena CSS terstruktur secara longgar dan siapa pun dapat mengembangkan konvensi mereka sendiri, komentar sangat penting. Menggunakan komentar yang terstruktur dengan baik untuk menjelaskan style sheet Anda adalah praktik yang baik. Anda dapat menulis komentar yang menjelaskan bagian kode dan apa fungsinya.
/* elemen video membutuhkan ruang untuk bernapas */
.video {
margin-atas: 2em;
}
/* menata bagian pahlawan */
.sapaan {
margin-atas: 1em;
}
7. Gagal Merancang Terlebih Dahulu
Banyak orang melakukannya, tetapi merupakan kesalahan besar untuk memulai pengkodean tanpa rencana. CSS menentukan seperti apa struktur front-end Anda. Desain mengatakan banyak tentang keterampilan pemrograman Anda.
Desain untuk situs Anda menjelaskan visi Anda dan sumber daya yang dibutuhkan untuk membawa Anda ke sana. Miliki gambaran mental tentang proyek Anda. Kemudian desain di atas kertas atau gunakan perangkat desain seperti Canva untuk memvisualisasikan apa yang Anda inginkan.
Saat Anda memiliki gambaran lengkap tentang proyek, kumpulkan semua sumber daya Anda dan mulailah membuat kode. Ini akan menghemat waktu dan redundansi Anda.
Mengapa Anda Harus Mempertimbangkan Rekomendasi Ini
Jika Anda sedang mengembangkan aplikasi di web, Anda akan menggunakan CSS. Bekerja dengan baik dengan CSS membutuhkan latihan dan mengikuti konvensi standar. Konvensi tidak hanya membuat kode Anda dapat dibaca tetapi juga dapat dipelihara.
Menulis kode standar akan menghemat waktu dan tenaga Anda. Waktu yang Anda habiskan untuk memformat front-end dapat Anda habiskan untuk fitur yang lebih kompleks. Ini juga memastikan Anda dapat menggunakan kembali kode dan membaginya dengan orang lain. Tulis kode yang lebih baik dengan mengikuti konvensi yang ditetapkan dan jadilah pengembang yang lebih baik.