Panduan Ringkas PostCSS: Penjelajahan Plugins

Indonesian (Bahasa Indonesia) translation by Zadip (you can also view the original English article)

Seperti yang Anda akan simpulkan dari entri sebelumnya dalam seri ini, PostCSS adalah semua tentang plugin. Plugin yang Anda pilih akan benar-benar mendefinisikan pengalaman Anda dengan PostCSS.

Mengingat bahwa mereka begitu integral dan mendasar, sebelum kita melanjutkan untuk benar-benar menghasilkan stylesheet melalui PostCSS, kita akan melihat cara menjelajahi ekosistem plugin PostCSS. Melalui ini Anda juga akan mendapatkan pandangan seberapa kuat PostCSS itu, dan bagaimana caranya menawarkan fungsi yang tidak sama dapat dibuat melalui cara lain yang sudah ada.

Kita akan membahas dari mana saja caranya untuk mengawasi plugin terbaru dan terbesar ini, plugin ini biasanya masuk ke dalam kategori dan pertimbangan untuk bagaimana untuk memuat semua plugin ini ke proyek-proyek dalam cara yang logis.

Menemukan plugin

Saat Anda mulai masuk ke bekerja dengan PostCSS ada tiga lokasi, Anda akan ingin mengawasi untuk menemukan plugin yang hebat.

Page PostCSS Github

Halaman utama PostCSS Github repo saat ini mengelola daftar dikategorikan sebagai komprehensif plugin. Daftar ini cenderung sering diperbarui sehingga cukup diandalkan untuk menjelajahi dan melihat apa plugin tersedia untuk berbagai aspek pembangunan.

https://GitHub.com/postcss/postcss#plugins

Katalog situs postcss.parts

Tambahan relatif baru, dan sangat terbuka, ke dunia PostCSS adalah situs postcss.parts, yang menyediakan Katalog dicari PostCSS plugin.

@postcss twitter

Sekarang PostCSS dilihat sebagai sebuah plugin baru dan menarik yang dirilis secara teratur. Dua lokasi di atas tidak menyoroti plugin baru jadi sekilas Anda tidak akan tahu jika ada item yang belum Anda lihat sebelumnya. Untuk alasan itulah, hal ini merupakan ide yang bagus untuk mengikuti atau sering mengunjungi @PostCSS di Twitter.

Jenis plugin

Luasnya fungsi plugin yang bisa bekerja dengan PostCSS begitu besar, jadi itu merupakan ide yang bagus untuk memiliki sebuah pengantar jenis umum plugin yang kemungkinan akan dihadapi sebelum Anda pindah ke trialling salah satu dari mereka.

Paket

Sifat dasar dari PostCSS adalah ia menyediakan modular CSS pengolahan. Dengan demikian, individu plugin didorong untuk mencakup hanya satu set yang kecil, ketat didefinisikan dari fungsi. Megalitik multifungsi plugin yang melakukan semuanya sekaligus akan mengecewakan.

Dikatakan, terkadang Anda ingin menggabungkan daftar panjang fungsionalitas ke dalam sebuah proyek, dan Anda tak perlu menginstalnya secara individual dan mengkonfigurasi dua puluh plugin berbeda. Ini adalah dimana "paket" digunakan. Paket dibaqa bersama beberapa modular plugin di bawah payung tematik, yang memungkinkan mereka semua harus dipasang dan digunakan sekaligus.

Contohnya, Paket PreCSS menggabungkan sembilan terpisah PostCSS plugin untuk menciptakan Sass-seperti fungsi. Paket cssnano menggunakan sekitar dua puluh PostCSS plugin untuk memberikan CSS minification dan optimasi. Dengan paket ini Anda terselamatkan dari harus menginstal dan mengisi setiap plugin secara manual.

Masa depan Syntax CSS

CSS masa depan membiarkan Anda menulis akan datang dalam spesifikasi W3C sintaks yang kita tahu, tapi mungkin tidak sepenuhnya didukung dalam browser.

Misalnya, Anda mungkin ingin untuk dapat menggunakan mendatang delapan atau empat digit hexidecimal notasi untuk membuat warna buram. Untuk menghasilkan sedikit transparan biru Anda bisa menggunakan kode warna seperti #0000ffcc, atau yang disingkat membentuk#00fc, dan menjalankan plugin postcss-warna-hex-alpha untuk mengkonversi yang menjadi format yang didukung secara luas rgba (0, 0, 100%, 0.8) .

Kehadiran paling menonjol dalam PostCSS CSS masa depan adalah Pak cssnext, yang membawa banyak spesifikasi compliant CSS masa depan ke tabel. Namun, saat ini pengembangan Maxime Therouin mengambil paket melalui transisi yang besar dalam bagaimana fungsinya. Dengan demikian, kami akan memastikan untuk membawa Anda tutorial CSS masa depan sampai transisi selesai.

Fallback

Di mana CSS masa depan adalah tentang membuat kode besok bekerja di browser hari ini, fallback pada dasarnya tentang membuat kode kerja hari ini di browser kemarin. Dalam dunia yang sempurna kita harus tidak pernah berpikir tentang browser yang tua dan usang, tetapi kenyataannya adalah masih ada beberapa proyek yang mendukung browser warisan sangat penting. Kategori fallback dari plugin PostCSS yang dapat membantu di mana itu terjadi.

Semua plugin ini dijalankan dengan hands-free, yang berarti Anda menulis kode sesuai dengan standar saat ini, dan plugin akan menemukan kode yang memerlukan fallacy warisan dan secara otomatis memasukkannya sesuai kebutuhan.

Sebagai contoh, Anda dapat memiliki warna-warna datar ditambahkan sebagai fallbacks untuk rgba () warna oleh plugin postcss-color-rgba, atau menambahkan IE8 kompatibel fallbacks untuk opacity melalui plugin postcss-opacity. Yang paling terkenal dari plugin ini adalah Autoprefixer, yang menambahkan awalan vendor sesuai kebutuhan, berdasarkan data dari CanIUse.com.

Anda akan mempelajari lebih lanjut tentang plugin fallback "Untuk Kompatibilitas Lintas Komputer " dalam tutorial seri ini.

Ekstensi Bahasa

Ekstensi bahasa plugin menambahkan fungsionalitas ke CSS yang sebaliknya tidak akan ada. Sebagai perbandingan, Anda mungkin mempertimbangkan paling preprocessors yang sepenuhnya terdiri dari bahasa ekstensi. Faktanya, pengguna Sass, Stylus dan LESS kemungkinan akan merasa cukup berapa pada home dengan banyak ekstensi bahasa PostCSS, seperti yang menambahkan mixin, variabel, conditional, loop, bersarang, memperluas dan sebagainya.

Karena PostCSS benar-benar fleksibel Namun, ada juga ekstensi bahasa menawarkan fungsionalitas yang tidak biasa ditemukan di preprocessors. Sebagai contoh, plugin postcss-bem menambahkan sintaks khusus untuk membuat CSS yang mengikuti BEM / sesuai dengan metodologi, (lebih pada yang di kemudian tutorial). Plugin postcts-define-property memungkinkan Anda untuk membuat properti kustom Anda sendiri, atau mendefinisikan kembali properti asli. Dan plugin postcss-match memungkinkan Anda untuk menggunakan tidak hanya conditional, tetapi logika pencocokan pola dalam kode Anda.

Dengan variasi ini semua indikasi bahwa PostCSS akan jatuh tempo ke titik di mana hal ini dapat memberikan banyak fungsi banyak dari kita mencari di preprocessors, tetapi juga cukup fungsionalitas melampaui itu.

Warna

Banyak plugin warna yang saat ini tersedia untuk PostCSS berurusan dengan mengubah warna dari format satu ke lainnya, misalnya dari #hex.a untuk rgba(), hcl(H,C,L) ke #rgb, atau pantone untuk #rgb . Selain itu, beberapa plugin yang paling berguna dalam menangani manipulasi warna, pencampuran dua warna atau scaling ringan atau kegelapannya.

Salah satu favorit tertentu saya memungkinkan Anda untuk mengambil skema warna Anda yang sudah ada, maka output versi seperti itu akan muncul untuk orang-orang dengan masalah buta warna. Tak akan ada sebuah pengalaman beharga untuk membantu Anda mengukur bagaimana pengaksesan desain Anda.

Kita akan melihat lebih detail pada warna plugin kemudian preprocessing, singkatan dan tutorial "miscellaneous barang".

Font dan gambar

Kategori ini plugin menangani banyak optimasi tugas, seperti pengepakan Base64 data, menghasilkan CSS sprite lembar dan optimasi SVG. Anda juga akan menemukan beberapa jenis gambar dan alat font, seperti SVG otomatis untuk konversi PNG untuk IE8, otomatis WebP gambar generasi dan Inklusi untuk mendukung browser cara pintas @font-face, retina mendukung jalan pintas dan lainnya.

Grid

Menemukan bahwa sistem grid dapat ditulis dalam PostCSS, tanpa perlu memuat stylesheet prewritten atau menggunakan preprocessor mixins, merupakan hal pertama yang benar-benar membuka mata saya seberapa hebat PostCSS. Aku sebelumnya berpikir PostCSS adalah tentang penyaringan dan memodifikasi CSS yang ada, tetapi sistem grid menunjukkan bahwa hal itu dapat digunakan untuk membuat seluruh keperpustakaan eksternal gaya.

Saat ini ada tiga sistem grid yang tersedia untuk PostCSS:

Lost, dibuat oleh Cory Simmons
postcss-grid, dibuat oleh Andy Jansson
postcss-neat, diciptakan oleh Jo Asakura

Optimasi

PostCSS optimasi plugin masuk ke dalam dua kategori Umum: minification dan kode modifikasi. Melalui plugin ini Anda dapat melakukan tugas-tugas minification seperti pengupasan spasi dan komentar, dan Anda juga dapat memiliki lebih kompleks modifikasi yang dilakukan seperti menggabungkan pencocokan query media, inlining @import stylesheet, mengoptimalkan bobot font, menghapus kosong atau duplikat aturan dan seterusnya.

Kita akan lebih membahas pada kategori ini plugin PostCSS dalam tutorial "Untuk Minification dan optimasi" mendatang.

Cara pintas

Sebagai pengguna preprocessor, saya selalu menemukan salah satu keuntungan terbesar adalah kemampuan untuk mengurangi jumlah kode yang harus ditulis menggunakan variabel dan mixins. Melalui PostCSS saya telah menemukan lebih luas lagi alat untuk membuau menulis kode lebih efisien melalui daftar panjang jalan pintas dan singkatan plugin tersedia.

Anda dapat memilih untuk menggunakan steno untuk properti, baik mendefinisikan Anda sendiri atau menggunakan singkatan yang ada, misalnya w dari pada lebar, h bukan height dan sebagainya. Anda bisa output @font-face kode, mengubah kode, segitiga dan lingkaran semua dalam satu garis masing-masing. Dan Anda dapat jalan pintas semua jenis tugas umum termasuk link styling, berpusat, clearfixing, posisi, ukuran, spasi, dan menghasilkan kode warna.

Kita akan mulai dari plugin ini secara lebih mendalam di tutorial "Shortcuts dan Shorthand".

Analisis & wartawan

PostCSS juga bisa digunakan bukan hanya mengubah CSS, dapat juga digunakan untuk memberikan umpan balik ketika Anda mengembangkan CSS. Beberapa plugin analisis dan pelaporan tersedia termasuk linter untuk kode BEM / SUIT, sebuah plugin untuk memberi Anda rincian kode Anda melalui CSSstats, "DoIUse" untuk memberi tahu Anda bagaimana kode Anda berisi data dari yang bisa saya gunakan, dan generator file Modernizr.

Lain-lain

Ada beberapa plugin PostCSS yang besar yang tidak cukup cocok ke dalam kategori tertentu tetapi terlalu baik untuk melewati. Sebagai contoh, kami memiliki postcss-gaya-panduan yang secara otomatis menghasilkan gaya panduan berdasarkan CSS Anda. Ada juga plugin rtlcss, yang digunakan oleh WordPress, yang menghasilkan kanan ke kiri versi stylesheet Anda.

Kita akan membahas beberapa plugin besar ini dalam tutorial "Miscellaneous barang".

Menyenangkan

Kategori "menyenangkan" berisi seperti permata sebagai postcss-spiffing yang memungkinkan Anda untuk menggunakan ejaan UK, misalnya warna warna, dan Hotel-sintaks sopan seperti !silahkan daripada !penting.

Anda tidak mungkin untuk melihat salah satu kategori ini plugin yang digunakan dalam proyek nyata, namun manfaat asli mereka menawarkan untuk bertindak sebagai contoh mudah dimengerti untuk calon pengembang plugin. Yang cukup sederhana dan singkat, mereka adalah sempurna untuk mengambil melihat di dalam dan melihat esensi bagaimana plugin PostCSS dibuat.

Urutan pelaksanaan plugin

Salah satu pertimbangan utama yang Anda harus membuat ketika loading array PostCSS plugin adalah urutan di mana Anda menjalankan mereka. Anda akan memiliki untuk berhenti sejenak dan berpikir melalui daftar Anda, menentukan apakah satu plugin mungkin perlu untuk menjalankan setelah lain untuk melakukan apa yang Anda inginkan untuk.

Misalnya, Anda mungkin menggunakan plugin seperti postcss-simple-vars yang menambahkan dukungan untuk variabel, dan Anda dapat menggunakannya untuk menyimpan nilai rgba() seperti:

/* source code */
$color: rgba( 0, 0, 0, 0.5);

.style {
    background: $color;
}

/* compiles to: */
.style {
    background: rgba( 0, 0, 0, 0.5);
}

Anda mungkin juga ingin menggunakan plugin seperti postcss-color-rgba-fallback untuk menambahkan hexcode datar sebagai mundur, memberikan Anda:

/* compiles to: */
.style {
    background: #000;
    background: rgba( 0, 0, 0, 0.5);
}

Dalam hal ini Anda akan memiliki untuk memastikan bahwa Anda menjalankan plugin variabel sebelum plugin mundur.

Jika Anda menjalankan fallback plugin pertama itu hanya akan menemukan latar belakang: $color; dalam CSS Anda dan tidak tahu ada nilai rgba() untuk itu untuk bekerja dengan.

Namun, dengan menjalankan plugin variabel pertama, ketika fallback plugin berjalan itu akan menemukan latar belakang: rgba (0 0 0, 0,5); pergi ke depan dan menambahkan fallback diperlukan.

Urutan beban untuk plugin adalah sesuatu yang akan berubah dengan setiap set plugin, jadi Anda mungkin menemukan Anda hanya perlu melakukan sedikit percobaan kadang-kadang untuk mendapatkan segala sesuatu bekerja bersama-sama dengan baik.

Mari kita rekap

Untuk meringkas menjelajahi PostCSS plugin:

Menemukan plugin di PostCSS Github repo dan postcss.parts
Menantikan untuk @PostCSS untuk belajar tentang plugin baru
Paket plugin memungkinkan Anda untuk menginstal beberapa plugin yang bertema sama sekaligus
Plugin PostCSS termasuk dalam banyak kategori yang sangat berbeda
Saat memuat pilihan plugin Anda, pastikan untuk mempertimbangkan urutan eksekusi mereka

Pada tutorial selanjutnya

Kita telah menyelesaikan panduan "Panduan Ringkas" kami untuk PostCSS dan kami siap untuk terjun ke praktik dan mulai memproduksi beberapa kode CSS yang sebenarnya.

Dalam tutorial berikutnya, kita akan mulai dengan cara menggunakan PostCSS untuk menghasilkan kode yang kompatibel lintas-browser dengan cara penyisipan otomatis awalan vendor, dan sejumlah fallback untuk properti dengan browser lawas, khususnya IE8.

Sampai jumpa di tutorial selanjutnya!