PostCSS Deep Dive: Apa yang Harus Anda Ketahui

Jika ada satu hal yang Anda benar-benar perlu tahu tentang PostCSS, itu adalah bahwa Anda harus belajar apa itu dan bagaimana menggunakannya ASAP.

Dalam seri ini, kita akan mengambil menyelam ke dalam PostCSS dan membawa Anda melalui semua cara utama yang dapat Anda gunakan. Jika Anda belum sudah memiliki pikiran Anda meledak oleh apa yang PostCSS mampu, bersiap-siap untuk sebuah dunia CSS baru yang berani.

Intro untuk PostCSS

PostCSS telah tumbuh dalam popularitas pada kecepatan sangat tinggi. Semakin banyak orang yang mulai memahami apa yang ditawarkannya, menikmati "lightbulb saat" ketika mereka menyadari betapa mereka dapat menggunakannya secara unik dalam proyek-proyek mereka sendiri.

Pada tahun 2014, ada sedikit di bawah 1,4 juta download dalam total untuk tahun, tapi dari Januari sampai Juni 2015 sudah lebih dari 3,8 juta download.

Autoprefixer, plugin PostCSS yang sangat populer, digunakan oleh Google, Shopify, Twitter, Bootstrap dan CodePen. WordPress juga menggunakan Autoprefixer, serta RTLCSS plugin. Dan Alibaba menggunakan beberapa plugin PostCSS, serta mengembangkan sendiri dan memberikan kontribusi untuk proyek-proyek plugin lainnya.

Selain itu, Mark Otto telah berbicara tentang Bootstrap versi 5 sedang ditulis dalam PostCSS:

Oh, btw — Bootstrap 4 akan di SCSS. Dan jika Anda peduli, v5 kemungkinan akan berada di PostCSS karena Suci crap kedengarannya keren.

-Otto Mark (@mdo) 23 April 2015

PostCSS hanya telah diintegrasikan ke dalam CodePen.io dan dapat digunakan inline dengan memilih dalam pengaturan CSS:

PostCSS tumbuh, berkembang cepat, dan untuk alasan yang baik.

PostCSS di a Nutshell

Jadi apa adalah PostCSS? Definisi terbaik berasal dari halaman GitHub proyek sendiri:

“PostCSS adalah alat untuk mengubah CSS dengan plugin JS.  Plugin ini dapat mendukung variabel dan mixins, transpile masa depan CSS sintaks, gambar sejajar, dan banyak lagi.

Singkatnya, PostCSS mengambil CSS dan mengubahnya menjadi bentuk data yang dapat dimanipulasi oleh JavaScript.  Plugin berbasis JavaScript untuk PostCSS kemudian melakukan manipulasi kode tersebut.  PostCSS itu sendiri tidak mengubah CSS Anda, itu hanya melicinkan jalan bagi plugin untuk melakukan transformasi apa pun mereka telah dirancang untuk membuat.

Ada pada dasarnya tidak ada pembatasan pada jenis manipulasi PostCSS plugin dapat mengajukan permohonan untuk CSS. Jika Anda dapat memikirkan itu, mungkin Anda dapat menulis sebuah plugin PostCSS untuk mewujudkannya.

PostCSS plugin dapat berperilaku seperti preprocessors; mereka dapat mengoptimalkan dan autoprefix kode, mereka dapat menambahkan sintaks masa depan, mereka dapat melakukan linting, mereka dapat memproses variabel dan logika, mereka dapat memberikan sistem grid lengkap, mereka dapat menawarkan pengkodean pintas... daftar ini panjang dan bervariasi.

Apa yang PostCSS adalah tidak

Fakta Anda dapat melakukan apa saja yang Anda inginkan dengan plugin PostCSS, dikombinasikan dengan fakta PostCSS masih relatif baru, telah menyebabkan beberapa kesalahpahaman tentang apa sebenarnya alat.

Banyak orang (termasuk saya sendiri, pada awalnya), memiliki kesan yang lengkap dari apa yang PostCSS benar-benar, dan memiliki karena itu terjawab di PostCSS apa yang ditawarkan, atau tiba terlambat ke meja.

Jadi sebelum kita melangkah lebih jauh, mari menjernihkan beberapa hal-hal yang PostCSS adalah tidak.

PostCSS bukanlah sebuah pre-prosesor

Banyak pengembang mengatakan mereka sedang meninggalkan CSS preprocessors mendukung PostCSS. Sementara yang lain menyatakan bahwa karena mereka lebih suka preprocessor mereka saat mereka tidak seperti PostCSS. Namun PostCSS bukanlah preprocessor.

Ya, Anda dapat benar-benar menggunakannya sebagai preprocessor jika Anda inginkan, tetapi Anda juga dapat menggunakan PostCSS dengan benar-benar tidak preprocessor-seperti fungsi. Anda dapat bahkan tetap menggunakan preprocessor favorit Anda dalam hubungannya dengan PostCSS.

PostCSS bukanlah sebuah Post-prosesor

PostCSS memiliki kata "post" dalam nama, tetapi tidak benar-benar "pasca processor" baik. Posting pengolahan biasanya dilihat sebagai mengambil stylesheet selesai terdiri dari sintaks CSS valid/standar dan memproses, melakukan hal-hal seperti menambahkan Penjual awalan. Namun PostCSS ini tidak dibatasi untuk beroperasi semata-mata dalam cara ini. Seperti disebutkan di atas, itu dapat berperilaku seperti pra-prosesor terlalu.

Hal ini mungkin terbaik untuk hanya memikirkan PostCSS sebagai "prosesor". Sebagai Andrey Sitnik, PostCSS's pencipta, mengatakan Twitter:

Saatnya mengakui kesalahan saya. Istilah "Postprocessor" yang buruk. PostCSS tim berhenti untuk menggunakannya. https://t.co/vs2AiXGoJy

-PostCSS (@PostCSS) 28 Juli 2015

Dan sebagai prolific kontributor PostCSS dan pengembang plugin Maxime Thirouin dijelaskan pada kegugupan, daripada "post" dalam PostCSS merujuk kepada "post"-pengolahan, itu dapat lebih baik dianggap sebagai bererti "CSS dan di luar".

@HugoGiraudel tak seorang pun di kontributor postcss menggunakan ungkapan ini lagi. Sekarang Postcss seperti "css dan di luar"

-Maxime Thirouin (@MoOx) 21 Juli 2015

PostCSS bukanlah "Masa depan sintaks"

Ada beberapa plugin PostCSS yang sangat baik dan sangat terkenal yang memungkinkan Anda untuk menulis dalam sintaks masa depan, yaitu menggunakan CSS yang akan tersedia di masa depan tetapi belum didukung secara luas.  Namun PostCSS bukanlah secara inheren tentang mendukung sintaks masa depan.

Beberapa pengembang telah menyatakan keengganan untuk menggunakan PostCSS, mengatakan itu adalah karena mereka tidak yakin mereka merasa nyaman dengan menulis masa depan sintaks. Namun, menulis masa depan sintaks adalah hanya salah satu dari banyak cara Anda dapat menggunakan PostCSS.

Jika Anda memilih demikian, Anda dapat menggunakan PostCSS untuk benar-benar merevolusi proses pengembangan Anda tanpa garis Hotel-sintaks masa depan di mata.

PostCSS bukanlah Clean Up / perangkat pengoptimalan

Keberhasilan Autoprefixer plugin telah menyebabkan persepsi umum PostCSS sebagai sesuatu Anda menjalankan pada CSS Anda selesai untuk membersihkannya dan mengoptimalkan itu untuk mempercepat dan lintas kompatibilitas browser. Ini adalah persepsi yang aku sendiri, sampai saya belajar dari array yang besar dari hal-hal lain yang Anda dapat mencapai dengan PostCSS.

Ya, ada banyak plugin yang fantastis yang menawarkan besar membersihkan dan optimasi proses, tetapi ini hanya sebagian kecil dari apa yang ditawarkan.

PostCSS adalah tidak setiap satu hal

Hal yang paling menarik tentang PostCSS adalah tidak terbatas untuk semua satu jenis fungsi; ini mewakili sepenuhnya disesuaikan dan dikonfigurasi set fungsi yang dibatasi.

Pertimbangkan WordPress Plugin sebagai paralel. E-commerce plugin sangat populer, tapi tidak ada menganggap WordPress itu sendiri sebagai mesin e-commerce, dan manfaat WordPress tidak dinilai berdasarkan plugin e-commerce.

Dalam kasus PostCSS, aku suka berpikir itu sebagai seperti roti yang Anda gunakan untuk membuat sandwich. Dengan sendirinya itu tidak tampak seperti banyak, tetapi itulah bagaimana ini dimaksudkan untuk menjadi, dan ini jelas "kekosongan" adalah mengapa memiliki begitu banyak potensi. Ini adalah kemampuan untuk tak terbatas berbagai tambalan yang memberi Anda sesuatu yang menakjubkan.

Mencoba sandwich selai kacang dan tidak suka? Itu adalah benar-benar ada alasan untuk berjanji berhenti roti dan semua jenis sandwich selamanya. Sebaliknya, melanjutkan untuk mencoba mengisi berikutnya dan Anda mungkin hanya menemukan sesuatu yang menjadi mengagumkan baru bagian dari kehidupan sehari-hari.

Apa yang membuat khusus PostCSS

PostCSS adalah pendekatan yang berbeda untuk CSS. Kontraktor frontend dari London yang saya berbicara dengan menggambarkannya sebagai "pisau Swiss army untuk produksi CSS" dan itu adalah deskripsi yang sepenuhnya tepat.

Mari kita lihat beberapa hal yang membuat PostCSS begitu istimewa.

Ekosistem Plugin yang menawarkan beragam fungsi

Menakjubkan sebagai PostCSS itu sendiri, ini adalah daftar panjang beragam plugin yang benar-benar membuatnya Penyemiran. Ketika Anda membaca daftar plugin yang tersedia pada halaman PostCSS GitHub, Anda akan menemukan berbagai fungsi yang telah pernah terkandung dalam satu ruang sebelum.

Ada plugin untuk masa depan sintaks, memungkinkan Anda untuk menggunakan hal-hal seperti warna fungsi, berbentuk kerucut gradien, custom properti, penyeleksi kustom, kustom alias untuk query media dan masih banyak lagi.

Ada fallback plugin untuk membuat warisan sintaks, menambahkan heksadesimal fallback untuk rgba() warna, menambahkan filter opacity untuk IE8, mengkonversi psuedo elemen pemilih untuk IE8 dan menghasilkan px fallback untuk rem unit.

Lebih dari dua puluh bahasa ekstensi plugin tersedia, termasuk menambahkan mixins, variabel, conditional, untuk dan setiap loop, BEM dan sesuai gaya generasi kelas dan beberapa lagi.

Pilihan warna manajemen plugin juga tersedia, memungkinkan konversi dari satu warna format lain, memodifikasi tingkat alpha, menggabungkan warna, menghasilkan skema warna ramah buta warna, untuk beberapa nama.

Ada sistem grid, optimasi tools, plugin yang menambahkan cara pintas dan steno, linters dan analisis & pelaporan plugin.

Hal ini tidak mungkin untuk sepenuhnya menyampaikan keragaman terus memperluas pilihan plugin saat ini dalam beberapa paragraf, jadi pastikan untuk memeriksa daftar untuk diri sendiri.

It's Modular; Gunakan hanya apa yang Anda butuhkan

Sisi lain untuk daftar plugin yang tersedia untuk PostCSS, luar biasa adalah bahwa Anda dapat menggunakan sebagai banyak atau sedikit dari mereka seperti yang Anda pilih.

Hanya ingin menggunakan PostCSS untuk membuat CSS Anda lebih efisien dan browser salib ramah? Memuat beberapa optimasi plugin dan Anda pergi.

Ingin menggunakan PostCSS hanya sebagai preprocessor? Menggunakan beberapa bahasa ekstensi plugin sebaliknya dan Anda sudah siap.

Filosofi dasar PostCSS adalah modularitas butiran halus, dimana ada tidak ada plugin raksasa yang menangani beberapa fungsi. Sebaliknya, sebuah plugin yang dibuat setiap fungsi, dan dari sana mereka dapat dirakit menjadi paket plugin dengan fungsionalitas yang biasanya bertema.

Misalnya, Anda dapat tangan memilih pilihan plugin untuk ekstensi bahasa dan membuat preprocessor kustom Anda sendiri. Atau sebagai alternatif, Anda hanya dapat memuat hingga pack PreCSS yang akan memberikan Anda otomatis akses ke beberapa bahasa ekstensi plugin sekaligus.

Apapun cara yang Anda ingin menggunakan PostCSS, Anda dapat menjalankan hanya plugin yang Anda butuhkan untuk tujuan spesifik Anda, berarti Anda tidak harus menyeret fungsionalitas yang tidak terpakai sebagai bobot mati.

Cepat: hingga 3 kali lebih cepat

Ada dua alasan utama PostCSS tes sangat cepat di benchmark. Salah satunya adalah fakta bahwa Anda hanya perlu memuat plugin yang Anda butuhkan, seperti dijelaskan di atas. Yang lain adalah bahwa ia berjalan pada JavaScript.

Anda dapat menjalankan benchmark ini untuk diri Anda menggunakan https://github.com/postcss/benchmark

Hasil dari salah satu patokan ini, pengujian parsings, bersarang aturan, mixins, variabel dan matematika, adalah:

1

PostCSS:   36 ms

2

Rework:    77 ms   (2.1 times slower)

3

libsass:   136 ms  (3.8 times slower)

4

Less:      160 ms  (4.4 times slower)

5

Stylus:    167 ms  (4.6 times slower)

6

Stylecow:  208 ms  (5.7 times slower)

7

Ruby Sass: 1084 ms (30.1 times slower)

Anda dapat membuat plugin Anda sendiri untuk apa yang Anda inginkan

Plugin untuk PostCSS ditulis dalam JavaScript, dan karena itu siapa saja yang dapat menulis JavaScript dapat membuat sebuah plugin untuk tujuan apapun yang mereka inginkan. Untuk memberi Anda ide, saya tidak menganggap diri saya seorang pengembang JavaScript inti keras dengan cara apapun, tapi setelah menemukan PostCSS saya mampu membuat plugin berfungsi penuh pertama dalam waktu beberapa jam.

Proyek-proyek preprocessor seperti Stylus, Sass dan kurang melakukan pekerjaan yang indah, tetapi mereka tidak bisa menjadi segalanya untuk semua orang. Mereka harus memutuskan pada fitur-fitur yang akan melayani pengguna dasar secara keseluruhan. Jika ada fungsi yang Anda ingin memiliki, Anda dapat membuat permintaan fitur tetapi mungkin atau mungkin tidak dianggap rata dengan lebih luas kebutuhan proyek.

Bahkan jika Anda membuat permintaan fitur yang dianggap cocok, pengelola proyek adalah sukarelawan yang biasanya tidak dibayar yang mungkin tidak memiliki waktu untuk mengembangkan itu. Jadi jika Anda tidak memiliki tingkat keterampilan untuk menciptakannya mengatakan fitur sendiri, Anda beruntung.

Dengan PostCSS di sisi lain, Anda tidak perlu untuk meminta siapa pun. Jika Anda ingin fitur baru, Anda dapat pergi ke depan dan membuat. Dari pengalaman saya, JavaScript tingkat pengalaman yang diperlukan untuk membuat sebuah plugin PostCSS akan dikelola untuk banyak front end developers.

Dalam tutorial berikutnya dalam seri ini kita akan melangkah melalui pembentukan sebuah plugin PostCSS dasar. Bahkan jika Anda tidak menganggap diri Anda JavaScript ahli, saya pikir Anda akan menemukan penciptaan plugin PostCSS menjadi cukup dicapai.

Anda Dapat Menggunakannya Dengan CSS Biasa 

Sebagian besar plugin PostCSS tidak memerlukan penggunaan sintaks kustom, seperti yang biasa dilakukan oleh preprocessors.  Sebaliknya, mereka dapat diterapkan untuk CSS biasa. Ini berarti bahwa Anda dapat menggunakan PostCSS dengan file CSS Anda menemukan diri Anda memiliki, seperti selesai stylesheet dari kerangka ujung depan, dari orang lain proyek, atau Normalize.css file sebagai contoh.

Ini juga berarti Anda tidak terkunci keluar dari proyek yang menggunakan preprocessor tertentu, baik itu Stylus, Sass atau kurang, karena Anda selalu dapat menerapkan PostCSS untuk CSS dikompilasi. Misalnya, jika menggunakan Yayasan melalui Sass, Anda bisa menjalankan optimasi dan masa depan sintaks plugin setelah menghasilkan file CSS proyek Anda.

PostCSS perpustakaan tidak terikat pada satu Preprocessor

Kami juga mulai melihat seluruh perpustakaan dibangun dengan PostCSS, yang mana di masa lalu mereka mungkin telah ditulis dalam Stylus, Sass atau kurang.

Sebagai contoh, Cory Simmons awalnya adalah menjaga Stylus dan Sass versi sistem grid hilang sehingga pengguna preprocessors kedua bisa mendapatkan akses. Ia kemudian porting proyek PostCSS, yang berarti bahwa sekarang semua orang dapat menggunakan Lost, termasuk Stylus dan Sass pengguna, tetapi juga kurang pengguna dan orang-orang yang tidak bekerja dengan preprocessor sama sekali.

Itu menyebarkan mulus dengan alat populer

Menjadi berbasis JavaScript, PostCSS tidak memerlukan bahwa Anda telah menginstal Ruby, dan itu telah siap membuat integrasi untuk beberapa alat-alat pengembangan.

• Ada plugin untuk Grunt, Gulp, webpack, Broccoli, Brunch dan ENB.
• CodePen memungkinkan Anda untuk menggunakan PostCSS inline.
• Prepros memiliki dukungan dibangun untuk Autoprefixer dan cssnext plugin.
• postcss-use plugin memungkinkan Anda untuk dengan mudah memuat plugin lain dengan sederhana @ aturan dalam CSS Anda
• Anda dapat menggunakan "package.json" file sehingga npm dapat secara otomatis menginstal plugin PostCSS apa pun proyek mempekerjakan melalui perintah dua kata: npm install. Ini memfasilitasi mudah berbagi proyek-proyek PostCSS, meskipun jumlah besar kemungkinan variasi dalam plugin setup.

Kita akan pergi melalui bagaimana Anda bisa mendapatkan setup untuk menggunakan PostCSS di bagian "Cepat mulai panduan" mendatang dari seri ini.

Oke, mari kita rekap

Hal pertama yang perlu Anda ketahui adalah PostCSS adalah mengambil uap cepat, dan untuk alasan yang baik, jadi sekarang adalah waktu untuk mendapatkan ke membangun pemahaman yang jelas tentang bagaimana dapat membantu proses pengembangan Anda.

Di intro ini kita membahas apa yang PostCSS adalah tidak:

• Hal ini tidak pra-prosesor yang, meskipun ia opsional dapat berperilaku seperti satu.
• Hal ini tidak prosesor yang pasca, meskipun ia opsional dapat berperilaku seperti satu.
• It's bukan tentang "masa depan sintaks", meskipun ini dapat memfasilitasi dukungan untuk masa depan sintaks
• Ianya tidak bersih / alat optimasi, meskipun hal ini dapat memberikan fungsi tersebut.
• Ianya tidak satu hal; ini adalah cara untuk fungsionalitas dibatasi dikonfigurasi sebagai Anda pilih.

Kita juga membahas apa yang membuat PostCSS khusus:

• Fungsi beragam tersedia melalui ekosistem plugin yang
• Sifat modular, "menggunakan apa yang Anda butuhkan"
• Waktu kompilasi cepat
• Aksesibilitas untuk menciptakan plugin Anda sendiri
• Pilihan untuk menggunakannya dengan CSS biasa 
• Kemampuan untuk membuat pustaka yang tidak bergantung pada satu preprocessor 
• Penyebarannya yang mulus dengan banyak alat pembuat yang populer 

Datang di “PostCSS Deep Dive” 

Dalam seri ini kami akan memulai dengan memandu Anda melalui cara memulai dengan PostCSS melalui tutorial: 

• Panduan Quickstart - Opsi Pengaturan Instan 
  
• Panduan Quickstart - Gulp Setup 
• Panduan Quickstart - Setup Grunt 
• Panduan Quickstart - Menjelajahi Plugin 

Dari sana kita akan melihat lebih dekat pada beberapa cara yang bervariasi yang dapat Anda gunakan PostCSS di tutorial: 

• Untuk Kompatibilitas Lintas Browser 
• Untuk Minifikasi dan Pengoptimalan 
• Preprocessing dengan PreCSS  
• Gulung Preprocessor Anda Sendiri
• Dalam hubungannya dengan Stylus / Sass / LESS 
• Metode BEM / SUIT CSS 
• Pintasan dan tulisan singkat 
• Macam-macam barang PostCSS 

Akhirnya, kami akan menyelesaikan dengan membawa Anda melalui pembuatan plugin PostCSS dasar Anda sendiri.

Anda mungkin memperhatikan tidak adanya tutorial yang jelas dalam menggunakan PostCSS untuk mengaktifkan CSS di masa mendatang, terutama mengingat banyak orang melihat keduanya hampir sama. 

Alasan ketidakhadiran sementara ini adalah plugin terkemuka untuk CSS di masa depan, cssnext , tampak seperti akan mengalami major transformation yang mungkin secara signifikan mengubah langkah-langkah yang diperlukan untuk menggunakannya.  Karena itu, kami akan terus mengawasinya dan memberi Anda tutorial baru setelah mengerjakan pekerjaan tersebut. 

Jadi, mari kita mulai!  Dalam tutorial berikutnya kita akan langsung masuk ke "Panduan Quickstart" kami dan menunjukkan kepada Anda cara tercepat untuk mulai menggunakan PostCSS.  Sampai jumpa di sana!