Apa yang Dilakukan Pengembang CSS dan Mengapa Anda Membutuhkannya

Pengembang CSS adalah profesional web yang tanggung jawab utamanya adalah memberikan produk yang dipoles dan bergaya ke browser pengunjung. Hampir setiap situs web menggunakan CSS, tetapi CSS sering kali tidak dianggap "sama" dalam tumpukan pengembangan web modern. Sayangnya, persepsi yang salah ini dapat menyebabkan CSS diterima begitu saja, atau bahkan diabaikan sampai batas tertentu.

Mengizinkan pengembang non-CSS untuk menangani CSS sering kali mengakibatkan pengenalan peretasan dan bug CSS dalam kode Anda, dan dapat menyebabkan frustrasi yang tidak perlu bagi pengembang. Dalam artikel ini, saya ingin membiasakan semua orang dengan apa yang tercakup dalam pekerjaan ini sehingga Anda bisa mendapatkan pemahaman yang lebih baik tentang mengapa setiap situs membutuhkan pengembang CSS profesional yang andal.

Apa yang Dilakukan Pengembang CSS?

Mari kita mulai dengan dasar-dasarnya. Mengapa CSS begitu penting, dan apa sebenarnya yang seharusnya dilakukan oleh pengembang CSS?

CSS adalah bahasa tertentu, dan karena itu, tidak dapat berdiri sendiri. Hal ini membutuhkan HTML untuk masuk akal. Jadi, hal pertama yang dilakukan pengembang CSS adalah menulis kode HTML.

Menulis HTML yang Rapi Selalu Penting

Menulis HTML yang lugas, bersih, dan terorganisir dengan baik adalah tanggung jawab besar karena dokumen HTML sederhana adalah hal pertama yang Anda berikan kepada pengguna akhir Anda.

Jika Anda menulis dokumen HTML siap produksi, Anda harus mencoba memastikan untuk menyertakan semua tag wajib dan opsional di kepala dokumen untuk memaksimalkan situs web Anda. Saya berbicara tentang pengaturan doctype, bahasa, tag meta, favicons, teknik pemuatan, dan SEO yang benar.

Segala sesuatu yang dapat membantu membuat situs web Anda lebih berperforma, lebih mudah diakses, dan memberikan lebih banyak paparan kepada audiens dan mesin telusur Anda, serta layanan dan alat lainnya. Badan dokumen HTML juga tidak boleh membengkak. Mengetahui kapan harus menggunakan tag HTML semantik, bagaimana menambahkan atribut HTML yang diperlukan, dan bagaimana menghindari deep nesting atau divitis, tidak boleh diabaikan, melainkan diterapkan sejak awal proyek. Tidak ada pengembang profesional yang mulai mengikuti praktik terbaik di tengah-tengah proyek, namun bahkan hal-hal yang tampaknya mendasar seperti HTML sering dilakukan dengan salah.

Desain keseluruhan sering menentukan bagaimana kita mengatur berbagai komponen HTML. Pengembang CSS bekerja sama dengan desainer, dan tidak setiap desainer menggunakan alat yang sama untuk menyediakan desain. Menjadi akrab dengan Sketch, Photoshop, InVision, atau Figma, dan mampu "mengiris" desain, adalah keterampilan yang harus dimiliki untuk pengembang CSS. Seseorang harus selalu mengingat bagaimana menyusun suatu komponen untuk memungkinkan penerapan desain pada waktu yang sama. Menggunakan konvensi penamaan yang baik, seperti BEM atau OOCSS, akan mencegah penulisan kode HTML yang membengkak atau kode CSS yang tidak dapat dipertahankan.

JavaScript ada di mana-mana

Beberapa komponen harus interaktif, seperti modals atau tooltips. Itu sering membutuhkan pemahaman yang baik tentang JavaScript, bukan JavaScript "dalam", tetapi peristiwa JavaScript dan penanganan DOM. Penanganan DOM bisa jadi menantang karena Anda tidak ingin menguras sumber daya pengguna dan membuat situs web Anda lamban atau, lebih buruk lagi, mogok dan membuatnya benar-benar tidak responsif.

Dunia JavaScript berkembang pesat, dan terkadang tampaknya kerangka kerja dan alat baru muncul setiap hari. Karena popularitas JavaScript yang luar biasa, tetap mengikuti perkembangan sangat penting jika Anda ingin menggunakan praktik terbaik terbaru dan memberikan pengalaman paling menyenangkan bagi pengguna akhir.

CSS

Itu juga berlaku untuk CSS, meskipun banyak yang berpendapat bahwa itu tidak berkembang dengan kecepatan yang hampir sama dengan JavaScript. Namun, fitur baru seperti variabel CSS, kisi CSS, atau bahkan Flexbox memerlukan waktu untuk dikuasai.

Lalu, ada dukungan browser, yang masih dapat menimbulkan masalah bahkan hingga hari ini. Situs Anda mungkin terlihat seperti satu juta dolar di browser modern, tetapi tidak begitu banyak di browser lawas. Flexbox mungkin didukung di IE11, tetapi sekali lagi, mungkin tidak berfungsi seperti yang diharapkan. Mengetahui cara menghindari masalah ini adalah bagian dari pekerjaan pengembang CSS.

Untungnya, komunitas ini sangat membantu, dan situs seperti Flexbugs atau Gridbugs dapat menghemat banyak waktu.

Alat, Teknik, dan Prinsip CSS

Terkadang kami dapat mengandalkan alat seperti task runner atau bundler seperti Grunt, Gulp, dan webpack untuk membantu kami mengirimkan kode yang andal. Anda dapat meningkatkan kode Anda dengan linter, minifiers, babel, atau PostCSS untuk mengubah kode.

Kemudian kita perlu memperhitungkan berbagai font, tipografi, gambar, ikon, font ikon, animasi, transisi, dan aspek abstrak lainnya yang merupakan bagian dari tugas sehari-hari untuk pengembang CSS. Setiap fitur memiliki kekhususan, keterbatasan, masalah, dan solusi. Semakin banyak fitur dan teknik yang Anda kuasai, semakin mudah untuk menata dan mengimplementasikan komponen dalam proyek Anda.

Ada sejumlah besar properti dan nilai CSS, dan seseorang tidak dapat mengetahui segalanya. Untungnya, alat kami membantu kami di sana, terutama editor kode dan alat pengembang. Namun, bahkan alat tidak dapat membantu mengatasi sakit kepala saat Anda perlu menyelesaikan masalah indeks-z. Gagal adalah cara terbaik untuk belajar.

Saya akan mengatakan ini terutama benar ketika bekerja dengan CSS, dan inilah alasannya:

Jika Anda belum pernah mencoba memecahkan masalah indeks-z, maka Anda tidak akan pernah belajar tentang konteks susun. Jika Anda belum pernah mencoba untuk mengganti kelas Bootstrap, maka Anda tidak akan pernah belajar tentang spesifisitas. Jika Anda belum pernah mencoba memperbaiki masalah float, Anda tidak akan pernah belajar tentang model kotak.

Terkadang, solusinya sederhana, tetapi hanya mengajukan pertanyaan itu sulit. Jika dibandingkan dengan bahasa lain, Anda tidak dapat bertanya mengapa loop saya tidak berfungsi. Anda memerlukan konteks lengkap untuk menyelesaikan masalah dalam CSS, dan ini sering kali tidak dipahami oleh banyak orang: cascade .

Cascade adalah fitur terbaik di CSS, dan itu akan bekerja untuk Anda, bukan melawan Anda. Beberapa pengembang menyiasatinya dengan menciptakan pendekatan khusus seperti CSS-in-JS. Jika Anda mengemas CSS Anda di lingkungan yang dienkapsulasi seperti React, Anda tidak dapat menggunakannya di tempat lain. Saya ragu ini adalah pendekatan yang Anda inginkan dalam platform skalabel Anda. Jika Anda memiliki masalah dengan kaskade, belajarlah untuk menerimanya, dan kemudian belajar bagaimana menjinakkannya.

Saat saya sedang mempersiapkan artikel ini, Max Bock menulis tentang pola pikir CSS, dan inilah yang perlu dilakukan oleh pengembang CSS. Pengembang CSS berpikir di dalam kotak, memprediksi modifikasi konten, dan menghindari angka tetap bila memungkinkan sambil mencoba menulis kode sesedikit mungkin tanpa mengesampingkan nilai dan konteks default.

Mengapa Anda Membutuhkan Pengembang CSS?

Sebagian besar pengembang frontend atau bahkan full-stack dapat menulis kode CSS. Tetapi tidak semua dari mereka dapat memperbaiki setiap bug CSS atau mengimplementasikan desain tanpa membuat kode HTML berbelit-belit atau mengandalkan JavaScript di tempat yang tidak diperlukan.

Pengembang CSS profesional peduli dengan kode hingga detail akhir, senang membuat tata letak dan komponen, bahkan yang paling rumit, dan tahu cara menyelesaikan setiap masalah atau bug.

Standar Pengkodean CSS

Sebelum menulis kode apa pun, biasanya ada baiknya Anda memiliki beberapa aturan dasar tentang penulisan kode. Pengembang CSS harus menghormati standar pengkodean—ini penting untuk pemeliharaan dan skalabilitas proyek.

Pilih konvensi penamaan mana yang akan digunakan di seluruh proyek. Menetapkan konvensi penamaan sejak dini dapat membantu pengembang menghasilkan kode yang lebih baik dan lebih terorganisir. Ini juga dapat membantu semua orang yang terlibat dalam proyek memahami struktur komponen dan hubungan antara komponen dan elemen dengan membaca kode HTML saja.

Putuskan bagaimana menangani lekukan, jenis pemilih, properti singkatan, unit di CSS. Misalnya, hindari penggunaan unit piksel jika standar pengkodean mengusulkan penggunaan unit rem. Setiap orang memiliki gaya penulisan/coding yang berbeda, tetapi sebagai seorang profesional, Anda harus dapat mengadopsi, dan yang lebih penting, memahami setiap konsep.

Implementasi Desain CSS

Sebelum mengonversi desain menjadi kode, Anda harus meluangkan waktu untuk memahami setiap halaman, tata letak, dan komponen. Jika memungkinkan, bedah setiap halaman, buat daftar halaman dan komponen, dan coba temukan polanya.

Jika Anda melihat komponen yang ada di lebih banyak halaman, Anda harus mengenali lingkungan di sekitarnya dan mencoba menganggapnya sebagai komponen yang berdiri sendiri. Jika ada komponen yang serupa, seperti kartu atau daftar, Anda dapat memiliki variasi dari komponen yang sama. Dengan cara ini Anda dapat menggunakan kembali kode HTML dan hanya menulis sedikit kode CSS agar tampak dimodifikasi.

Ini juga merupakan ide yang baik untuk mencoba menemukan pola di area lain, seperti tipografi dan spasi. Terkadang ini mengarah pada memiliki kelas pembantu yang dapat digunakan di seluruh proyek daripada halaman individual.

Atur Kode CSS Anda

Pengembang CSS harus mengatur kode mereka dan membuat struktur yang bermakna untuk semua orang. Saat menggunakan alat seperti prosesor CSS, pengembang CSS harus mendokumentasikan proses pembuatan kode yang dikompilasi.

Jika diperlukan, pengembang CSS dapat membuat panduan gaya. Panduan gaya dapat menjadi referensi saat membuat halaman baru atau memutuskan cara mendekati halaman yang sudah ada. Saran saya adalah membuat panduan gaya tersedia secara global untuk seluruh tim karena seringkali jauh lebih mudah untuk membuat keputusan ketika memiliki konteks visual. Panduan gaya dapat berisi palet warna, aturan tipografi, standar pengkodean, dan bahkan halaman statis. Tidak ada batasan, kecuali anggaran dan imajinasi Anda.

Kode CSS dalam Produksi

Menulis kode CSS menyiratkan penanganan masalah lintas-browser, bug, animasi, transisi, responsivitas, dan gaya cetak. Banyak dari fitur ini tidak mudah dikelola oleh pengembang serba bisa. Saya akan melangkah sejauh itu dan mengatakan ini adalah tugas CSS yang paling tidak disukai secara keseluruhan, dan tidak setiap pengembang tahu cara menanganinya. Di sisi lain, pengembang CSS khusus tahu (atau setidaknya harus tahu) cara menghasilkan kode dengan mempertimbangkan setiap bug, browser, dan lingkungan.

Menggunakan pendekatan modern adalah salah satu cara yang harus dilakukan, tetapi mendukung browser lama dan menghormati pengaturan pengguna seperti pengurangan gerakan juga tidak boleh diabaikan.

Pengembang CSS juga menulis kode HTML dan JavaScript. Itu berarti pengiriman aset adalah tanggung jawab pengembang CSS. Pengembang CSS harus bertanggung jawab untuk memuat font, mengekstrak CSS Penting, menggunakan pemuatan JavaScript yang ditangguhkan dan asinkron, dan menyediakan gambar yang responsif.

Tak satu pun dari teknik ini yang mudah diterapkan, dan tidak ada peluru perak.

Apa yang Dapat Dilakukan Pengembang CSS Untuk Anda

Semua hal di atas menjelaskan mengapa Anda memerlukan pengembang CSS khusus. Berikut adalah beberapa hal penting yang mereka tangani:

• Pastikan setiap anggota proyek mematuhi standar pengkodean
• Menerapkan desain
• Atur kodenya
• Tulis kodenya
• Perbaiki bug
• Pelajari tentang teknik baru
• Tingkatkan kodenya

Membungkus

Sudah terlalu lama, pertanyaan tentang keberadaan dan pentingnya peran pengembang CSS mendorong diskusi yang tidak konstruktif dan bermaksud baik. Mari kita coba untuk menyetujui dan mengakui pengembang CSS sebagai peran yang tepat untuk selamanya.

Dalam artikelnya, The Great Divide , Chris Coyier mengutip beberapa pemimpin teknologi, dan kebanyakan dari mereka setuju harus ada pembagian, harus ada peran berbasis CSS yang tidak memerlukan pengetahuan tentang kerangka kerja JavaScript modern. Ini bisa membantu jika Anda tahu lebih dari "hanya CSS," tetapi peran itu harus ada, dan itu harus diterima sama dengan peran berbasis JavaScript.

Lagi pula, apakah Anda ingin menyerahkan produk Anda di tangan seorang profesional khusus yang dapat memolesnya dengan sempurna, atau apakah Anda akan puas dengan cukup baik ?

Bacaan Lebih Lanjut di Blog Teknik Toptal:

• Cara Mendekati Animasi SVG di CSS