Bekerja dengan front end, sudah pasti kamu tidak bisa menghindari CSS (Cascading Style Sheet) - CSS ini akan menentukan bagaimana masing-masing situs web akan terlihat di browser. Bersama dengan HTML dan JavaScript, CSS diketahui sebagai salah satu dari tiga teknologi utama yang digunakan untuk web. Namun, ada beberapa orang yang menyangkal dan berpendapat bahwa CSS terkesan agak primitif dan sulit untuk dikelola. CSS ini sendiri dirilis di tahun 1996, dan meskipun sudah ada dan masih ada pembaruan yang konstan, sintaks dasarnya tetap tidak banyak berubah. Di sinilah preprocessor CSS yang dipilih dengan baik bisa berguna.
Daftar Isi
Pertama, apa itu preprocessor CSS?
Browser internet hanya bisa memahami dan mendengarkan CSS saja, karena hal itulah browser intenet tidak bisa diganti dengan bahasa yang benar-benar baru. Meskipun begitu, hal tersebut memang memiliki batasan tertentu, yang mungkin tidak akan terasa signifikan dalam proyek kecil, tetapi sangat merugikan saat kamu sedang berurusan dengan stylesheet besar. Nah untuk mengakali masalah seperti ini, pengembang pun menggunakan proprocessor CSS. Pada intinya, preprocessor adalah program yang memiliki sintaks uniknya sendiri. Setelah kamu menulis kodemu, mereka akan mengkompilasinya menjadi CSS murni.
Penawaran Terakhir yang Aktif Saat Ini:
GET 50% OFF
DataCamp Black Friday Sale
During this DataCamp Black Friday, you can access the top-rated courses with a 50% discount. Enroll now for way less!
Alasan kenapa kami menggunakan CSS preprocessor adalah untuk menambahkan fungsi tambahan yang tidak dimiliki CSS murni. Sebagai contoh, kamu bisa saja memilih selektor nesting atau juga selektor penurunan, sama halnya dengan mixin (bundel deklarasi yang bisa digunakan kembali). Fitur tambahan praktis yang memungkinkanmu menjadi lebih efisien dalam pekerjaan sehari-hari dan memberi kamu skalabilitas ekstra.
Preprocessor CSS mana yang harus kamu gunakan?
Memilih sebuah CSS preprocessor bukanlah suatu hal yang bisa dengan mudahnya dilakukan, seperti kebanyakan teknologi informasi lainnya, kamu akan dihadapkan dengan jenis-jenis CSS preprocessor yang bervariasi, dimana masing-masing pilihan pastinya akan mempunyai manfaat tersendiri dan keuntungan berdasarkan pengguna. Untuk membuat pilihanmu sendiri, kamu harus terlebih dulu mengetahui dan memahami kebutuhanmu, mengenali kelebihan dari masing-masing preprocessor, dan memahami perbedaan setiap preprocessor.
Sass vs. CSS
Diperkenalkan ke khalayak umum pada tahun 2006, Sass (Syntactically Awesome Style Sheets - penamaan yang ciamik dari nama resmi CSS) dianggap sebagai pelopor dari preprosesor CSS. Makanya tidak heran kalau Sass juga menjadi salah satu yang paling populer! Sass sendiri juga turut digunakan dalam Bootstrap 4, yang saat ini menjadi salah satu framework besar di dunia yang digunakan untuk front end dan dengan demikian menjadi pencipta tren terkemuka di dunia TI.
Sampai sekarang, Sass ini memiliki dua sintaks yang terpisah: Sass dan SCSS. Meskipun hanya yang pertama yang ada di versi pertama dari preprocessor, tim Sass khawatir bahwa ini mungkin sedikit terlalu berbeda dari CSS yang biasa. Oleh karena itu, mereka kemudian menghadirkan sintaks baru yang disebut dengan SCSS (Sassy CSS) di versi ketiga. Filenya juga dapat memiliki ekstensi baik .sass atau .scss.
Perbedaan utama dari Sass dan SCSS ini adalah bahwa penggunaan titik koma dan tanda kurung dengan cara yang sama seperti yang dilakukan CSS. Sass, di sisi lain, tidak - ditambah, ia menggunakan tanda sama alih-alih menggunakan titik dua untuk tugas. Sementara SCSS sekarang ini secara resmi menjadi sintaks utama dari preprocessor Sass CSS, dan tidak ada rencana untuk menghentikan versi aslinya. Beberapa pengembang mengklaim bahwa hal itu sebenarnya lebih mudah untuk dibaca karena lebih ringkas. Namun, SCSS jauh lebih mudah untuk dipelajari dan diintegrasikan ke CSS.
Less
Less (Learner Style Sheet) pertama kali muncul ke publik pada tahun 2009. Less sendiri memiliki pengaruh dari Sass, namun tetap memiliki pengaruhnya sendiri pada format SCSS yang kemudian diperkenalkan ke publik. Kenapa? Karena tidak seperti sintaks Sass versi pertama, preprocessor CSS ini awalnya dibuat dengan tujuan agar bisa menjadi semirip mungkin dengan CSS murni. Tidak hanya ini berarti bahwa kurva belajar yang ada lebih lancar, tetapi kamu juga dapat menggunakan kode CSS valid yang telah ditulis sebelumnya di Less. Preprocessor Less ini sendiri ditulis dalam JavaScript, yang juga dapat menyederhanakan pengaturan.
Membandingkan Less vs. Sass, kita bisa memilihat bahwa Less dan Sass memang memiliki kesamaan dalam fungsi dasar mereka. Masing-masing dari preprocessor CSS ini memungkinkan kamu untuk melakukan nesting, impor, dan menggunakan variabel. Meskipun begitu, dengan menggunakan Less, kamu pun bisa mengangkat variabel dan menambahkan komponen tambahan dari sebuah warna yang tidak kamu bisa lakukan bila menggunakan Sass - yang biasa disebut dengan hue, saturasi, luminositas, dan kecerahan. Di sisi lain, Sass memungkinkan kamu untuk menggunakan pernyataan if dan menginterpolasi mereka di bagian pemilih dan nama properti. Sintaksnya juga berisi operator terner dan nesting kolektor - dan Less, sayangnya, tidak memungkinkan hal tersebut.
Kerugian kecil lainnya dari Less adalah penggunaan simbol @ untuk deklarasi variabel (Sementara Sass sendiri menggunakan tanda $ sebagai gantinya). Meskipun begitu, di CSS, @ juga dapat digunakan untuk bingkai utama dan kueri media. Ini mungkin akan menyebabkan sedikit kebingungan saat membaca kode.
Stylus
Preprocessor CSS lainnya untuk kita ketahui adalah Stylus yang mulai muncul di pasaran pada tahun 2010. Yah meskipun memiliki basis pengguna yang jauh lebih kecil daripada Sass atau Less, namun ada baiknya untuk dilihat. Stylus ditulis dalam Node.js dan oleh karena itu merupakan pilihan yang menarik bagi mereka yang sudah terbiasa dengan platform tersebut. Stylus ini juga memiliki fungsi dan mixin bawaan yang berguna.
Hal pertama dan terpenting yang membuat Stylus berbeda dari proprecessor CSS lainnya adalah karena fleksibilitasnya: titik dua, titik koma, dan koma semuanya adalah opsional. Selain itu, kamu tidak harus memerlukan tanda kurung kurawal untuk menentukan blok kode: alih-alih simbol, Stylus lebih menggunakan lekukan untuk itu. Sedangkan untuk variabelnya sendiri, kamu bisa menggunakan tanda $ seperti di Sass ... Tapi kamu juga bisa melewatkan bagian tersebut. Dan itu bukanlah masalah yang besar.
Semua hal dari Stylus tersebut memungkinkan kamu mengetik dengan lebih sedikit sementara kamu tetap bisa mendapatkan kode yang jelas. Sayangnya, ada beberapa pengembang yang justru melihat fleksibilitas Stylus sebagai suatu kecacatan. Tidak adanya pengenal yang jelas dapat membuat kode yang dihasilkan susah untuk dibaca dan dipahami, terutama jika kode tersebut dipakai untuk proyek yang lebih besar. Jadi bisa dibilang, apa yang kamu akan dapatkan adalah sebuah anarki yang disebabkan oleh kebebasan. Jika kita membandingkan Stylus vs. Sass, yang terakhir jelas memiliki keunggulan dengan kode yang mudah dibaca.
- Mudah digunakan
- Menawarkan konten berkualitas
- Harga transparan
- Gratis sertifikat penyelesaian
- Fokus pada keahlian data science
- Waktu belajar yang fleksibel
- Desain yang sederhana (tidak ada informasi yang tidak perlu)
- Kursus-kursus berkualitas tinggi (bahkan untuk kategori yang gratis)
- Terdapat berbagai fitur khusus
- Program Nanodegree
- Cocok untuk perusahaan/firma
- Sertifikat kelulusan berbayar
- Cukup terkemuka di pasaran
- Tersedia beragam fitur
- Kursus setingkat universitas
- Kursus setingkat universitas
- Cocok untuk kalangan korporasi
- Sertifikat kelulusan berbayar
PostCSS
Mari kita mulai dengan menegaskan satu hal dengan jelas: PostCSS sebenarnya bukan sebuah preprocessor CSS. Pada awalnya tim PostCSS memang menggunakan istilah tersebut, namun mereka kemudian menyadari kesalahan mereka. PotsCSS ini dapat digunakan sebagai preprocessor, dan juga postprocessor - sebenarnya, semua jenis dari preprocessor yang juga dapat membantu kamu untuk mengoptimalkan, membersihkan kode, dan melakukan berbagai macam tugas lainnya. PostCSS, pada intinya, adalah API yang memiliki banyak sekali plugin JavaScript yang diberdayakan (kamu juga dapat menulis kodemu sendiri). Dengan menggunakannya, kamu dapat memproses CSS dan membuat alat khusus.
PostCSS pertama kali dirilis pada tahun 2013 dan saat ini sudah tersedia sampai versi 7. Kamu bisa menggunakan ini bersama dengan sintaks CSS biasa atau juga preprocessor seperti yang sudah disebutkan di atas. Sedikit perbedaan dari PostCSS dengan Sass, Less, atau preprocessor lainnya adalah modularitasnya. Dimana kamu akan bisa memilih dengan teliti fitur mana yang kamu butuhkan, sehingga akan memiliki performa kerja yang sigap. Tidak heran jika popularitas PostCSS ini semakin meningkat dengan cepat - bahkan sudah ada deklarasi publik yang mungkin akan digunakan dalam versi Bootstrap mendatang.
Apakah kamu tahu?
Pernahkah Anda bertanya-tanya situs belajar online mana yang terbaik untuk pengembangan karier Anda?
Apa lagi yang perlu diketahui?
Preprocessor CSS dapat menambahkan langkah kompilasi yang penting, yang bisa memperlambat pengembangan dan debugging. Ukuran file akhir CSS yang dihasilkan pun bisa agak besar.
Meskipun begitu, keuntungan yang didapat jauh melebihi kerugiannya. Variabel, mixin, nesting, serta beberapa fungsi ekstra - semua fitur tersebut dapat membuat penulisan dan pemeliharaan kode menjadi lebih menyenangkan. Pilihlah preprocessor CSS yang paling membuatmu nyaman dan nikmati fungsionalitas CSS yang semakin dikembangkan sekarang!