CSS bisa rumit untuk dikelola, terutama untuk situs berukuran wajar. Dapatkan bantuan dengan preprosesor ini.

Katakanlah Anda belajar tentang fitur CSS yang sangat keren, seperti bersarang. Tetapi ketika Anda melanjutkan dan mencobanya, Anda menyadari bahwa dukungannya sangat buruk, dan butuh waktu bertahun-tahun sebelum Anda akhirnya dapat menggunakannya. Ini dulunya merupakan masalah besar di CSS hingga pengenalan preprosesor seperti PostCSS.

Pelajari bagaimana PostCSS memungkinkan Anda menggunakan CSS modern dan masa depan saat ini selama pengembangan. Anda akan mengetahui dengan tepat apa itu PostCSS, bagaimana Anda dapat menggunakannya, dan cara terbaik untuk memanfaatkan fitur-fiturnya.

Menyiapkan Proyek

Arahkan ke folder kosong, buat file bernama index.html, dan tambahkan markup HTML berikut di file:

html>
<htmllang="en">
<kepala>
<tautanrel="lembar gaya"href="src/styles.css">
kepala>


<tubuh>
<P>Gugus kalimatP>
<div>Divdiv>
tubuh>
html>

Dokumen HTML ini merender sebuah paragraf dan elemen. Itu juga mengimpor file style sheet bernama

instagram viewer
style.css yang ada di dalam src map. Buat file di src folder dan sertakan aturan gaya CSS berikut:

tubuhP {
warna: oranye;
}
tubuhdiv {
warna: biru;
}
tubuh {
menampilkan: kisi;
}

CSS ini menata warna kedua elemen pada halaman dan membuat tata letak kisi. Sebagian besar browser mendukung sintaks CSS normal seperti ini. Tetapi ketika Anda melihat sintaks yang lebih baru, Anda harus memasukkan PostCSS.

Membuat Proyek Node.js dan Memasang PostCSS

Secara sederhana, PostCSS memungkinkan Anda mengubah CSS modern menjadi sesuatu yang dapat dipahami sebagian besar browser; sebuah proses yang dikenal sebagai transpiling. Ini sempurna jika Anda ingin mencoba properti CSS baru, eksperimental, atau tidak standar dalam kode Anda yang mungkin tidak didukung oleh browser utama.

PostCSS juga menawarkan ekosistem plugin JavaScript yang kaya yang dapat Anda instal untuk mengaktifkan fitur tertentu, seperti minifikasi CSS, dukungan warna, dan dukungan linting.

Untuk menggunakan PostCSS, hal pertama yang perlu Anda lakukan adalah menginisialisasi proyek Node.js baru:

npm init -y

Perintah ini akan menghasilkan file package.json yang berisi nilai default untuk aplikasi Anda.

Selanjutnya, instal PostCSS dan PostCSS CLI. Paket kedua memungkinkan Anda menjalankan PostCSS dari baris perintah:

npm i --save-dev postcss postcss-cli

Itu --save-dev flag menginstal keduanya paket npm sebagai dependensi dev; Anda hanya akan menggunakan PostCSS dan pluginnya untuk memproses kode CSS selama pengembangan.

Untuk mulai menggunakan PostCSS melalui antarmuka baris perintah, masuk ke Anda package.json file dan buat yang sederhana membangun: css perintah untuk transpilasi dengan PostCSS:

"skrip": {
"bangun: css": "postcss src/styles.css --dir dest -w"
}

Perintah ini akan mengambil CSS kosong Anda (disimpan di src/styles.css), transpile kode, lalu tampilkan di tujuan map. Menjalankan membangun npm: css perintah membuat folder ini dan mengisinya dengan style.css file yang berisi kode yang dapat dibaca browser.

Saat Anda mengimpor CSS ke dalam HTML, pastikan Anda mengimpor dari folder tujuan tempat Anda mengompilasi CSS, dan bukan dari folder sumber tempat PostCSS mengompilasi. Ini, dalam kasus kami, adalah dist folder, bukan src map.

Jika Anda membuka situs web di browser, Anda akan melihat bahwa situs tersebut masih mengakses CSS. Setiap kali Anda membuat perubahan pada file sumber, PostCSS akan mengkompilasi ulang kode dan perubahan tersebut akan terlihat di halaman web.

Menggunakan Plugin PostCSS

Ada ratusan Plugin PostCSS untuk menambahkan prefiks, linting, dukungan sintaks baru, dan lusinan fitur lainnya ke PostCSS. Setelah menginstal plugin PostCSS, Anda mengaktifkannya di dalam postcss.config.js file — file JavaScript yang dapat Anda gunakan untuk menyiapkan semua konfigurasi untuk PostCSS.

Instal cssnano Plugin PostCSS dengan perintah berikut:

npm i --save-dev cssnano

Sekali lagi, Anda hanya perlu menyimpan dependensi ini sebagai dependensi dev. Alasannya adalah semua ini terjadi saat Anda berkembang. Anda tidak memerlukan PostCSS atau pluginnya setelah mendorong situs ke produksi.

Untuk menggunakan plugin cssnano yang baru diinstal, Anda harus menambahkan kode berikut di dalam file postcss.config.js mengajukan:

const csnano = memerlukan("csnano")
modul.ekspor = {
 plugin: [
 cssnano({
 prasetel: 'default'
 })
 ]
}

Sekarang jika Anda kembali ke terminal dan menjalankan kembali perintah build, ini akan memperkecil output CSS (yaitu membuat kode sekecil mungkin secara manusiawi). Jadi saat Anda mendorong ke situs siap produksi, itu akan membuat CSS Anda sekecil mungkin.

Menggunakan Fitur Modern Seperti Nesting

Misalkan Anda ingin menggunakan sintaks bersarang di stylesheet Anda, jadi Anda mengganti blok paragraf src/styles.css dengan ini:

tubuh {
 & P {
warna: oranye;
 }
}

Kode ini sama dengan versi di kode awal Anda. Tapi ini akan menimbulkan kesalahan karena sintaksnya sangat baru, dan sebagian besar browser web tidak mendukungnya. Anda dapat mengaktifkan dukungan untuk sintaks ini dengan PostCSS dengan menginstal postcss-preset-env plugin.

Plugin mengkompilasi bersama banyak plugin berbeda untuk menangani CSS berdasarkan pada tahap apa itu. Tahap 0 mewakili fitur super eksperimental yang bahkan mungkin tidak berhasil masuk ke dalam CSS. Sedangkan, tahap 4 untuk fitur bahasa yang sudah menjadi bagian dari spesifikasi CSS.

Secara default, present-env menggunakan fitur tahap 2 (yang kemungkinan besar membuatnya menjadi CSS). Tetapi Anda dapat mengubah stage menjadi apa pun yang Anda inginkan di file konfigurasi.

Untuk menginstal plugin, jalankan perintah berikut:

npm i --save-dev postcss-preset-env

Kemudian di Anda postcss.config.js file, Anda harus mengimpor plugin dan mendaftarkannya:

const csnano = memerlukan("csnano")
const postcssPresetEnv = memerlukan("postcss-preset-env")
modul.ekspor = {
 plugin: [
 cssnano({
 prasetel: 'default'
 }),
 postcssPresetEnv({ panggung: 1})
 ]
}

Anda hanya boleh melewati tahap kode CSS baru yang ingin Anda gunakan. Dalam hal ini, kami menganggap fitur bersarang berada di tahap 1. Saat Anda menjalankan kembali perintah build dan memeriksa browser, Anda akan melihat bahwa itu mengkompilasi kode bersarang ke dalam CSS standar yang dapat dipahami oleh browser.

Menggunakan PostCSS Dengan Kerangka

Mengkonfigurasi PostCSS secara manual bisa sedikit menyusahkan. Inilah sebabnya mengapa hampir semua kerangka kerja modern dilengkapi dengan alat bundling (mis., Vite, Snowpack, dan Parcel), dan alat ini akan mendukung bawaan PostCSS. Dan meskipun tidak, proses menambahkan dukungan PostCSS sangatlah mudah.

Selalu ingat bahwa Vite dan sebagian besar bundler lainnya menggunakan Sistem Modul ES6, bukan CommonJS. Untuk menyiasatinya, Anda perlu menggunakan impor pernyataan menggantikan memerlukan() di Anda postcssconfig.js mengajukan:

impor cssnano dari"csnano"
// Kode konfigurasi ada di sini

Selama Anda memasang plugin, semuanya akan berfungsi dengan baik.

Pelajari Lebih Lanjut Tentang SaSS

PostCSS hanyalah salah satu dari lusinan praprosesor CSS yang tersedia saat ini. Salah satunya adalah SaSS, yang merupakan singkatan dari style sheet yang mengagumkan secara sintaksis.

Belajar menggunakan preprosesor utama lainnya bisa berguna sebagai pengembang CSS.