CSS Post-Processors Untuk Pemula Tips dan Sumber Daya
Pra-pemrosesan CSS adalah konsep yang sebagian besar pengembang web telah pelajari atau baca. Kami telah membahas preprocessing CSS dengan sangat terperinci untuk membantu pengembang meningkatkan kecepatan teknologi yang lazim ini. Tapi bagaimana dengan itu? post-prosesor?
Alat-alat yang relatif baru ini serupa dalam arti bahwa mereka mempengaruhi alur kerja pengembangan web, namun mereka beroperasi pada sisi lain dari pengembangan CSS (“pos” pengembangan).
Dalam posting ini, saya ingin memperkenalkan dasar-dasar pasca pemrosesan, cara kerjanya, mengapa Anda menggunakannya, dan berbagi beberapa perpustakaan / alat yang dapat Anda gunakan untuk meningkatkan permainan CSS Anda dengan pasca-pemrosesan.
Pasca vs. pra-pemrosesan
Itu revolusi pra-pemrosesan terjadi ketika Sass / KURANG memukul adegan. Alat-alat ini memungkinkan pengembang untuk menggunakan variabel, loop, fungsi, dan mixin dalam CSS. Ini hampir membuat pengembangan CSS dasar mirip dengan bahasa pemrograman dengan fungsionalitas yang diperluas.
Pengolahan pasca terjadi setelah Anda menghasilkan CSS polos, dan ingin lanjutkan melalui otomatisasi. Ini bisa termasuk memperpanjang pemilih kelas, atau menambahkan awalan otomatis untuk properti CSS tertentu.
Secara umum, pra-pemrosesan memiliki bahasa stylesheet sendiri, seperti Sass dan KURANG, itu dikonversi menjadi CSS murni. Post-processing mengambil CSS dasar itu, dan berlaku otomatisasi / pengulangan.
Berikut ini kutipan dari posting yang juga merupakan sumber gambar di atas. Saya pikir penulis Stefan Baumgartner meringkaskan perbedaannya dengan cemerlang.
Di satu sisi, keduanya tampak seperti alat otomatisasi, hanya bekerja dengan cara yang berbeda. Misalnya, rasa sakit yang umum dipecahkan dengan post-processing adalah untuk tambahkan awalan otomatis untuk properti CSS3 yang lebih baru.
Tapi ini juga bisa dilakukan di Sass dengan ekstensi. Jadi, apakah memang ada perbedaan?? Berikut kutipan hebat lainnya dari pos yang sama:
Meskipun ini mungkin benar dalam pengertian teoretis, komunitas pengembangan web masih menciptakan kesenjangan antara alat-alat ini. Untuk alasan ini, saya akan sangat merekomendasikan kepada pengembang frontend untuk setidaknya membaca tentang post-prosesor, dan untuk mengetahui apa yang dapat mereka lakukan.
Pasangkan pemrosesan pasca ke dalam alur kerja Anda
Hampir semua orang referensi PostCSS sebagai sumber daya definitif untuk pemrosesan pasca. Namun tim PostCSS secara terbuka mengakui di Twitter untuk mengubah judul mereka karena bertele-tele tidak masuk akal lagi.
PostCSS tidak lagi hanya alat pra-CSS atau pasca-CSS. Sebenarnya bisa bekerja di kedua bidang! Ini lebih jauh menjelaskan kutipan dari sebelumnya yang menyatakan bahwa semua alat CSS bermuara pada satu hal - pengolahan.
PostCSS menggunakan plugin JavaScript untuk mengotomatiskan alur kerja CSS Anda, dan Anda bahkan dapat menulis plugin JS Anda sendiri untuk memperluas perpustakaan PostCSS. Jika Anda ingin memulai dengan PostCSS, lihat tutorial intro ini di Smashing Magazine. Jika Anda sudah menggunakan dan memahami Sass maka Anda akan mengambil Post CSS dengan cepat.
Untuk membangun alur kerja pemrosesan pra / pasca CSS Anda sendiri, mulailah dengan membuat daftar poin rasa sakit Anda, seperti:
- auto-prefixing gradien CSS
- organisasi otomatis untuk aturan CSS
- menambahkan polyfill untuk properti tertentu
- menghasilkan dimensi gambar untuk gambar latar belakang
Perhatikan bahwa semua hal ini dapat dilakukan baik sebelum dan sesudah pemrosesan. Yang penting untuk disadari adalah bahwa pemrosesan pra / pasca CSS dengan cepat bergabung menjadi satu di hal yang sama.
Alih-alih memecah tujuan Anda ke dalam berbagai tahapan pemrosesan, lebih baik melakukannya daftar mereka sebagai tujuan, lalu lanjutkan a cari alat yang tepat.
Alat pasca pemrosesan terbaik
Saya sudah mencoba menghindari menyebutkan ekstensi di bagian ini, karena Sass & PostCSS memiliki begitu banyak hal untuk dipilih. Jujur kamu bisa bertahan hanya dengan perpustakaan-perpustakaan itu, tetapi saya juga ingin menawarkan beberapa alternatif untuk solusi yang lebih spesifik.
Pleeease
Jika Anda sudah bekerja dengan Node.js, maka Pleeease sepertinya pilihan yang jelas. Ada banyak fitur pemrosesan CSS yang khas, seperti mengimpor file, variabel / fungsi, auto-minification, dan dukungan fallback untuk elemen yang lebih baru seperti SVGs.
Situs web ini juga memiliki taman bermain interaktif bagi siapa saja yang ingin mencoba perpustakaan online tanpa mengunduh salinan secara lokal.
Memberkati
Saya ingat ketika Internet Explorer 6 masih merepotkan, dan senang mengetahui perkembangan IE telah meningkat - tetapi tidak banyak. Meskipun saya ingin memberitahu Anda bahwa penggunaan IE pada dasarnya sudah tidak ada, ini sepertinya tidak benar.
Syukurlah, Bless CSS adalah solusi itu mendeteksi potensi masalah terkait IE di CSS Anda, dan membuat solusi dengan post-processing. Ini berjalan pada Node.js, sehingga cocok dengan alur kerja NPM / Gulp khas.
CSSNext
Inilah perpustakaan yang sangat keren yang memungkinkan Anda melakukannya membangun CSS dengan fungsionalitas yang lebih maju yang saat ini tidak didukung. Pustaka CSSNext termasuk dukungan untuk fungsi CSS4 aneh, seperti Abu-abu(), yang saat ini hanya hadir dalam konsep W3C.
Saya tidak berpikir setiap pengembang akan membutuhkan perpustakaan ini. Ini sangat spesifik, dan tidak akan menyelesaikan masalah sehari-hari, namun itu bisa memberi Anda rasa spesifikasi CSS4 mendatang saat mengonversi sintaks ke CSS3 modern.
Stylecow
Jika dukungan browser adalah masalah bagi Anda, maka Stylecow adalah suatu keharusan. Pustaka yang kuat ini memungkinkan Anda untuk mengembangkan CSS hanya untuk peramban favorit Anda. Kemudian, Anda dapat menjalankan alat baris perintah melalui Node, dan CSS Anda akan diperbarui untuk semua browser yang ingin Anda dukung.
Anda dapat mengunduh Stylecow dari GitHub, dan disertai dengan beberapa dokumentasi yang sangat terperinci.
-bebas awalan
Terakhir saya ingin membagikan -bebas awalan perpustakaan yang juga merupakan alat yang dicintai untuk pengembangan CSS, karena memungkinkan Anda untuk melakukannya menggunakan properti CSS yang tidak diperbaiki. Semua orang ingin menggunakan properti CSS modern, seperti animasi & gradien, tetapi tidak ada yang mau menyalin / menempelkan kode verbose secara manual.
Dengan plugin ini Anda bahkan tidak perlu menjalankan CSS Anda melalui postprocessor di komputer Anda. Ini juga dapat berfungsi sebagai browser yang berjalan di komputer pengguna secara otomatis memperbarui file CSS.
Autoprefixer, yang merupakan bagian dari perpustakaan PostCSS, bahkan mungkin merupakan pilihan yang lebih baik pasca-pemrosesan lokal. Itu sebabnya saya katakan sebelumnya bahwa jika Anda menggunakan KURANG atau Sass bersama dengan PostCSS, maka Anda akan memiliki semua yang Anda butuhkan untuk alur kerja pengembangan CSS yang mengesankan.
Membungkus
Post-processing lebih merupakan frase menangkap daripada teknologi nyata, meskipun memiliki tempatnya dalam alur kerja CSS, seperti seluruh proses penulisan CSS modern telah ditingkatkan secara dramatis oleh alat-alat ini. Saya hanya dapat merekomendasikan agar pengembang menggali lebih dalam untuk menemukan apa pun yang terbaik untuk mereka.
Jika Anda mencari lebih banyak informasi tentang pemrosesan pasca, lihat artikel terkait berikut:
- Apa Yang Akan Menyelamatkan Kami dari Sisi Gelap Pra-Prosesor CSS?
- Pandangan untuk menulis CSS masa depan dengan PostCSS dan cssnext
- CSS Preprocessing (SASS atau KURANG) vs CSS Postprocessing
