مزایای PostCSS

PostCSS توسط Andrey Sitnik، نویسنده Autoprefixer، توسعه داده شد. PostCSS امکان تغییر و گسترش ویژگی های CSS را با استفاده از پلاگین های JavaScript فراهم می کند. هر پلاگین به صورت جداگانه نصب می شود و به تیم ها اجازه می دهد پردازنده های خود را با ویژگی های دقیق مورد نیاز خود ایجاد کنند و نه چیز دیگر. این امر اجازه می دهد تا توسعه دهندگان کنترل بسیار بیشتری بر ویژگی های استفاده شده و در نتیجه CSS خروجی داشته باشند.

 این ابزار لزوما جایگزین Sass یا Less نیست. شما هنوز هم می توانید از پیش پردازنده مورد علاقه خود استفاده کنید و سپس از پردازش PostCSS با پلاگین ها استفاده کنید.  PostCSS به تنهایی یک API است که اگر با اکوسیستم گسترده پلاگین های خود استفاده شود، توانایی های قدرتمندی را ارائه می دهد. برای ارائه اشکال زدایی مفید، نقشه های منبع تولید می شوند و یک درخت نحوی انتزاعی (AST) وجود دارد که به ما کمک می کند تا بفهمیم کجا و چگونه کد تبدیل خواهد شد.

از آنجا که این ابزار از چارچوب Node.js استفاده می کند، توانایی های زبان و ابزار را می توان به راحتی اصلاح و در صورت لزوم سفارشی کرد. ابزارهای دیگری مانند Sass و LESS توانایی سیستم را به روش های موجود، هنگام نوشتن کامپایلر محدود می کنند. به علت این که PostCSS از API استفاده میکند، به شما این امکان را میدهد که پلاگین ها و ابزارهای سفارشی را برای ویژگی های مورد نیاز ایجاد کنید. این طراحی پلتفرم مدولار ابزار را خنثی می کند، که به نوبه خود ویژگی های مورد نیاز پروژه را متمرکز می کند.

از جمله مشکلاتی که پیش پردازنده های مرسوم دارند:

استفاده از پیش پردازنده های مرسوم مثل Sass ، Less ، Stylus و غیره ضعف ها و محدودیت هایی را به همراه دارند. این موارد شامل:

• بیشتر این پردازنده ها با استانداردهای W3C سازگاری ندارند.
• پیش پردازنده ها توسعه پذیر نیستند بنابراین اگر شما به چیزی بیش از آنچه ارائه می دهد نیاز دارید، لازم است مرحله دیگری را در روند ساخت خود اضافه کنید.

نگهداری کتابخانه ای از  Sass یا Less می تواند دست و پا گیر شود و پروژه شما را با گروهی از کدهای بلا استفاده مثل کد " just in case" ترک کند. اما PostCSS در این فرایند نقش مهمی دارد. آن تمام کدهای مورد نیاز برای ایجاد توابع، ابزارها و مخلوط ها را از صفحه تولید منتقل کرده و آنها را به عنوان پلاگین بسته بندی می کند. اکنون به وسیله محتوای پلاگین ها می توانید برای هر پروژه، ابزارهای مورد نیاز را انتخاب کرده و بردارید.

مزایای استفاده از PostCSS

PostCSS در مقایسه با سایر پردازنده های CSS مزایای بسیاری دارد، از جمله سرعت، عملکرد، سازگاری و نوآوری. شاید بزرگترین مزیت آن این باشد که تلاش نمی کند با این زبان ها رقابت کند و می تواند در کنار آنها استفاده شود. برای شروع استفاده از PostCSS لازم نیست تنظیمات front end فعلی خود را کنار بگذارید. درواقع می توانید از توابع، Mixins و متغیرهایی که از قبل دارید و به هر زبانی که هستند، استفاده کنید.

1. این ابزار با روشی کاملاً جدید و نیز با استفاده خصوصیاتی که از قبل بوده، به توسعه CSS کمک میکند.
2. دارای اکوسیستم Plugin بوده که همیشه همراهش میباشد. بیشتر از 200 پلاگین وجود دارند که امکاناتی مانند ترکیب CSS آینده، میانبرها (shortcuts)، ابزارها و توسعه زبان را اعطاء می کند. و در حال حاضر تیم های وردپرس، گوگل و توییتر جزئی از کاربران آن هستند.
3. از مزیت دیگر PostCSS سریع بودن آن است. از آن جا که این ابزار در جاوا اسکریپت ساخته شده است، از سرعت بالایی برخوردار است. ممکن است هنگام کار متوجه این موضوع نشوید اما خوب است به موارد زیر توجه کنید.:

• PostCSS:   36 ms (میلی ثانیه)
• libsass:   110 ms (3.0 برابر کندتر)
• Less:      157 ms  (4.3 برابر کندتر)
• Stylus:    286 ms  (7.9 برابر کندتر)
• Ruby Sass: 1092 ms (30.1 برابر کندتر)

علاوه بر پیشرفت هایی که در زمان compile داشته است، همچنین دارای پلاگین هایی است که به شما کمک می کند CSS را با عملکرد بیشتری بنویسید. این پلاگین ها شامل CSS MQPacker، postcss-zindex، cssnano میباشد.

4. این ابزار همچنین از modules استفاده میکند، به این معنا که نام گذاری کردن syntax بسیار آسان تر خواهد شد. مانند مثال زیر:

CSS input

CSS ouput     

5. از دیگر مزیت ها این است که به وسیله آن شما می توانید از خطاهای بیشتر در CSS خود جلوگیری کنید زیرا این امر قراردادهای سازگار با stylelint را اعمال می کند. به مثال زیر دقت کنید:

 CSS input

   CSS ouput

6. اضافه کردن PostCSS به کار خود و تنظیم کردن آن، از آنچه فکر میکنید راحت تر میباشد، مخصوصا اگر از task runner و پیش پردازنده استفاده میکردید. این ابزار به زبان جاوا اسکریپت نوشته شده و به طور یکپارچه ای با task runnerهایی مثل Gulp و Grunt ادغام می شود. هچنین نسخه CLI PostCSS برای کسانی که مایل به استفاده از اجرای برنامه نیستند نیز وجود دارد. ابزارهای کامپایل مانند Prepros همچنین از برخی از محبوب ترین پلاگین های PostCSS پشتیبانی می کنند. رابط هایی از این دست برای پلاگین های سفارشی مناسب نیستند.

7. شما احتمالاً قبلاً یک گردش کار با ابزارهای CSS تنظیم کرده اید که از آن راضی هستید، مثل Sass یا .Less مطمئنا برای اینکه به یک پردازنده جدید منتقل شوید بسیار میتواند وقت شما را بگیرد. خبر خوب این است که شما مجبور نیستید از تنظیمات فعلی یا همه توابع و Mixins که قبلاً نوشتید، صرف نظر کنید. PostCSS میتواند در کنار پیش پردازنده های قبلی اضافه شود. این امر اجازه می دهد تا یک انتقال بسیار ساده تر بدون نیاز به ایجاد تغییرات عمده در Codebase را انجام دهید. قابلیت های موجود نیز می توانند به مرور به PostCSS منتقل شوند.

8. همانطور که اکثر توسعه دهندگان اکنون دریافتند برخی از توابع موجود در پیش پردازنده ها می تواند تأثیر منفی بر عملکرد CSS داشته باشد. بر خلاف پردازنده های قبلی مثل Sass ، Less و Stylus؛ به وسیله PostCSS شما کنترل کامل روی تمام ویژگی هایی که فعال هستند، دارید. این روش منحصر به فرد به توسعه دهندگان امکان کنترل کامل Codebase را میدهد و امکان ایجاد CSS بد نوشته را محدود میکند. این یکی از مزیت های بسیار بزرگ محسوب میشود زیرا در حفظ برقراری پروژه های بزرگ و حفاظت از کد خروجی CSS نقش بسزایی دارد.

9.  PostCSS یک ابزار تفکر رو به جلو و آینده نگر است. پلاگین هایی مثل cssnext به توسعه دهندگان این امکان را می دهد تا از جدیدترین ترکیب ها و ویژگی های CSS بدون مشکلاتی مانند سازگاری، استفاده کنند. موارد جانبی برای مرورگرهای قدیمی توسط این پلاگین به طور خودکار اضافه می شود. گذشته از پلاگین های Syntax، همچنین پیشوندهای مرورگر و polyfills PostCSS فرصت هایی را برای بهبود روش استفاده از CSS و تلاش برای رفع برخی عیب و نقص های اساسی در زبان CSS فراهم می کند. از جمله پلاگین های معروف میتوان به postcss-modules، cq-prolyfill، postcss-autoreset اشاره کرد. با این پلاگین ها میتوان اجزای یک وب مستقل را ساخت و اجزای آن را طراحی کرد.

10. اگر نیاز خاصی دارید که در حال حاضر برای شما تأمین نمی شود، همیشه می توانید پلاگین PostCSS خود را بسازید. ساختن پلاگین در جاوا اسکریپت postcss، ابزاری در دسترس برای توسعه دهندگان Front End است که به راحتی می توانند در قالب پلاگین های سفارشی شرکت داشته باشند.

به طور خلاصه، PostCSS دارای کارایی های بیشتر و خطر کمتری بوده و توسعه، سفارشی سازی و گسترش آن آسان تر است. مهمتر از همه، امروزه برای شروع استفاده از PostCSS، نیازی به کنارگذاشتن کد فعلی یا پردازشگر قبلی نیست. شروع کوچک و افزودن فقط یک یا دو پلاگین به یک سایت موجود، هنوز هم مزایای قابل اندازه گیری خواهد داشت. PostCSS در کنار mixins، توابع و متغیرهایی که از قبل وجود داشتند، کار می کند و امکانات جدیدی را نیز در اختیارتان قرار خواهد داد.