Kesalahan CSS Terbodoh Saya

Diterbitkan Ulang Oleh Plato

Followers: 0

Kita semua membuat kesalahan dalam kode kita. Itu terjadi! Saya tahu jika saya memiliki salah satu dari tanda-tanda "Hari Sejak Kesalahan Terakhir" yang tergantung di atas meja saya, telur angsa besar akan melayang di atas saya sepanjang waktu. Itu juga tidak harus menjadi kesalahan besar. Diri saya yang kikuk telah melakukan kesalahan kecil pada repo mulai dari salah ketik hingga menyelesaikan direktori modul npm.

Whoooooops.

Itulah salah satu hal yang sangat saya sukai tentang CSS: itu memaafkan. Jika tidak memahami kesalahan ketik, ia terus mencari kaskade untuk mencari kecocokan. Tak satu pun dari hal-hal di mana satu karakter yang tidak pada tempatnya merusak situs dan tidak mengambil tahanan. Tapi itu masih memalukan ketika kesalahan CSS muncul!

Seperti ini, saya mendapati diri saya membuat lebih banyak waktu daripada yang ingin saya akui:

.element {
  display: flexbox; /* 🤦‍♂️ */
}

Atau ketika saya mencoba mengatur gradien tanpa a background milik:

.gradient {
  linear-gradient(45deg, rgb(50% 100% 90%), rgb(62% 85% 93%));
}

Aku benci seberapa dekat X dan C ada di keyboard karena saya tidak dapat menghitung berapa kali saya mengalami sesuatu dan kesalahan px untuk pc unit.

.element {
  font-size: 16pc; /* I meant pixels! */
}

Kesalahan CSS lain yang sering saya tangkap adalah kesalahan yang saya tahu banyak dilakukan orang lain karena saya terlalu sering melihatnya di posting blog dengan cuplikan kode:

// This is not a CSS comment.
.element {
  /* This is a CSS comment. */
}

Pernahkah Anda lupa menggunakan var() di sekitar variabel CSS? Saya yakin punya.

.element {
  color: --primary-color;
}

Berbicara tentang variabel CSS, penamaannya sulit (seperti yang lainnya) dan saya sering menggunakan versi yang salah dari variabel yang saya beri nama!

:root {
  --color-primary: #FF5722;
  --color-secondary: #3E2723;
}

/* Much later on... */

.element {
  color: var(--primary-color); /* 🙃 */
}

Ya, saya memang telah menyalin potongan CSS sebelumnya hanya untuk mendapatkan tanda kutip yang bagus untuk membuatnya bekerja:

.element::before {
  content: “”; /* Should be "" */
}

Dan, ya, saya telah menghabiskan waktu terlalu lama untuk mencari tahu bahwa kutipan-kutipan itu adalah biang keladinya.

Melihat yang terakhir itu mengingatkan saya bahwa saya terkadang lupa untuk menyetel content properti ketika saya bekerja dengan ::before or ::after. Yang mengingatkan saya bagaimana saya lupa mengatur elemen position sebelum mencoba mengimbanginya atau mengubahnya z-index. Serius, hal-hal ini terjadi!

Sulit berbicara tentang kesalahan

Pernahkah Anda selesai membaca beberapa posting blog yang membagikan beberapa trik luar biasa dan merasakan semacam Sindrom Penipu? Saya pikir itu sebagian besar karena posting blog sering menutupi pekerjaan nyata — dan kegagalan — yang menghasilkan trik luar biasa. Sebagai seseorang yang membaca posting seperti itu untuk mencari nafkah, saya dapat memberi tahu Anda bahwa banyak, jika bukan sebagian besar, melalui banyak putaran pengeditan di mana kesalahan yang berpotensi memalukan disingkirkan dan dihaluskan.

Bahkan artikel yang sangat luar biasa itu harus gagal sebelum mereka mendapatkan semua itu ooo dan ahhhh.

Hal yang sama berlaku untuk aplikasi, situs web, demo, atau apa pun yang Anda temui. Peluang salah satu dari mereka keluar dengan sempurna untuk pertama kalinya hampir tidak ada apa-apanya.

Tetapi jika saya benar-benar jujur kepada Anda, saya sering kali lebih kagum (dan tertarik) pada perjalanan dibutuhkan untuk mencapai sesuatu, kutil dan semua. Perjalanan adalah sekilas tentang bagaimana rasanya berpikir seperti pengembang front-end. Di situlah pembelajaran yang nyata (dan paling berharga) terjadi.

Dan semua ini hanya membangun apa yang benar-benar ingin saya tanyakan ...