10 Plugin PostCSS yang Mengagumkan untuk Menjadikan Anda Wizard CSS

PostCSS adalah alat yang sangat serbaguna yang memungkinkan untuk melakukannya mengubah gaya CSS dengan plugin JavaScript. Fleksibilitasnya terletak pada cara ia dibangun.

Bagian inti dari PostCSS adalah modul Node.js yang dapat Anda instal dengan npm, dan memiliki ekosistem lebih dari 200 plugin yang dapat Anda pilih untuk digunakan dalam proyek Anda.

PostCSS bukan merupakan preprocessor, atau postprocessor, karena plugin PostCSS yang berbeda dapat jatuh ke dalam salah satu kategori ini, atau keduanya; itu sepenuhnya tergantung pada Anda apa yang Anda lakukan. Dengan PostCSS, Anda tidak perlu mempelajari sintaks yang berbeda seperti dalam kasus Sass atau KURANG; Anda dapat segera mulai menggunakannya.

PostCSS mengambil file CSS Anda yang ada dan mengubahnya menjadi data yang dapat dibaca JavaScript, kemudian plugin JavaScript melakukan modifikasi, dan PostCSS mengembalikan versi file asli yang diubah. Kedengarannya keren, bukan?

Dalam posting ini kita akan melihat 10 plugin PostCSS memberi Anda wawasan tentang beberapa hal besar yang dapat Anda capai dengan alat luar biasa ini.

1. Autoprefixer

Autoprefixer mungkin merupakan plugin PostCss paling terkenal, karena digunakan oleh perusahaan teknologi terkemuka seperti Google, Twitter, dan Shopify. Saya t menambahkan awalan vendor ke aturan CSS jika diperlukan.

Autoprefixer menggunakan data dari Can I Use. Dengan cara ini tidak ada tanggal, dan selalu dapat menerapkan aturan terbaru. Anda dapat memeriksa cara kerjanya di situs demo interaktifnya.

2. CSSnext

CSSnext adalah transpiler CSS itu memungkinkan Anda menggunakan sintaks CSS mendatang di situs saat ini. W3C memiliki banyak aturan CSS baru yang saat ini tidak diterapkan oleh browser, tetapi dapat memungkinkan pengembang untuk menulis CSS yang lebih canggih lebih cepat dan lebih mudah. CSSnext telah dibuat untuk menjembatani kesenjangan ini.

Layak untuk melihat fitur-fiturnya untuk melihat apa yang dapat Anda capai dengan itu, misalnya Anda bisa menggunakan kueri media khusus, penyeleksi kustom, pengubah warna, filter SVG, dan kacamata semu baru dalam desain Anda.

3. PreCSS

PreCSS adalah salah satu plugin PstCSS yang berfungsi seperti preprocessor CSS. Itu memungkinkan Manfaatkan markup mirip Sass di file sytlesheet Anda.

Dengan memperkenalkan PreCSS ke alur kerja Anda, Anda dapat menggunakan variabel, jika ada pernyataan, untuk loop, mixin, @memperpanjang dan @impor aturan, bersarang, dan banyak fitur berguna lainnya dalam kode CSS Anda. Dokumentasi Github milik PreCSS memberi Anda petunjuk terperinci tentang cara memaksimalkannya.

4. StyleLint

StyleLint adalah linter CSS modern itu mengoreksi dan memvalidasi kode CSS Anda. Ini membuatnya mudah untuk menghindari kesalahan dan mendorong Anda untuk mengikuti konvensi pengkodean yang konsisten.

StyleLint memahami sintaks CSS terbaru, sehingga dapat digunakan bersama dengan plugin PreCSS yang disebutkan sebelumnya. Ini juga memungkinkan Anda untuk membuat konfigurasi sendiri, dan bahkan memeriksa apakah pengaturan Anda valid.

5. Aset PostCSS

Plugin PostCSS Assets sangat berguna manajer aset untuk file CSS Anda. Ini bisa menjadi pilihan yang bagus jika Anda cenderung mengalami masalah dengan jalur URL, karena Aset PostCSS mengisolasi file stylesheet Anda dari perubahan lingkungan..

Anda perlu menetapkan jalur muat, jalur relatif, dan jalur dasar, dan plugin akan secara otomatis mencari aset yang Anda butuhkan. Misalnya Anda dapat menulis kode berikut jika Anda memerlukan URL yang tepat foobar.jpg gambar:

 body background: resol ('foobar.jpg'); 

Aset PostCSS juga menangani cache aset, karena Anda dapat mengatur cachebuster variabel menjadi true jika Anda ingin jalur URL diubah secara otomatis jika aset diubah. Plugin pintar ini juga menghitung dimensi (lebar dan tinggi) file gambar, atau bahkan mengubah ukurannya menggunakan rasio preset.

6. CSSNano

Jika Anda membutuhkan file CSS yang dioptimalkan dan diperkecil untuk situs produksi, ada baiknya Anda memeriksanya CSSNano. Ini adalah plugin modular yang terdiri dari banyak plugin PostCSS yang lebih kecil dan tanggung jawab tunggal. Itu tidak hanya melakukan teknik minifikasi dasar seperti menghapus spasi putih, tetapi juga memiliki opsi lanjutan yang memungkinkan optimasi terfokus.

Di antara banyak fitur lainnya, CSSNano mampu mengubah nilai indeks z, mengurangi pengidentifikasi khusus, mengonversi nilai panjang, waktu dan warna, dan menghapus awalan vendor yang ketinggalan zaman.

7. Penyihir Huruf

Jika Anda adalah penggemar tipografi canggih, Anda pasti akan menyukai Penyihir Huruf Plugin PostCSS. Keajaiban Font Magician bergantung pada kemampuannya secara otomatis menghasilkan semua yang diperlukan @ font-face aturan.

Cara kerjanya cukup mudah, Anda hanya perlu menambahkan font-family: "My Fav Font"; Aturan CSS ke elemen HTML, dan Font Magician mengerjakan sisanya. Itu dapat menambahkan Google Font, salinan lokal font, tipografi Bootstrap, dan juga dapat memuat font secara tidak sinkron. Inilah situs demo interaktifnya.

8. Tulis SVG

Pernahkah Anda bertanya-tanya tentang betapa kerennya menulis SVG langsung ke file CSS Anda? Dengan bantuan plugin Write SVG PostCSS Anda dapat dengan mudah mencapai tujuan ini.

Plugin praktis ini, misalnya, memungkinkan untuk simpan latar belakang dan ikon SVG Anda di file CSS Anda, dan kemudian tambahkan mereka ke elemen HTML yang relevan dengan cara berikut:

 @svg square @rect fill: var (- color, black); lebar: 100%; tinggi: 100%;  .example background: white svg (param persegi (- color # 00b1ff)) penutup; 

9. Lost Grid

Kisi Hilang adalah plugin PostCSS yang hebat yang memberi Anda mengesankan Sistem grid CSS itu tidak hanya bekerja dengan CSS biasa tetapi juga dengan bahasa preprosesor (Sass, KURANG, Stylus). Ini menggunakan calc () Fungsi CSS untuk membuat kisi-kisi indah yang dapat Anda gunakan dengan mudah tanpa menghabiskan terlalu banyak waktu dengan penyesuaian.

Lost Grid memiliki cukup banyak aturan langsung, misalnya mendefinisikan kolom dengan lebar 25% tidak membutuhkan lebih dari potongan kode kecil ini:

 div lost-kolom: 1/4; 

10. Sprite PostCSS

Itu PostCSS Sprite plugin membuatnya mudah menghasilkan sprite gambar, mis. koleksi gambar ditempatkan ke dalam satu file. Setelah menetapkan beberapa opsi, plugin mengambil gambar dari file stylesheet Anda, menggabungkannya menjadi sprite, lalu memperbarui referensi gambar di mana pun diperlukan..

Anda dapat menggunakan berbagai filter dan kerapu untuk menentukan gambar mana yang ingin Anda masukkan ke dalam sprite, dan Anda dapat mengatur dimensi dari gambar keluaran juga.