آموزش PostCSS – معرفی و قابلیت ها

آموزش PostCSS – معرفی و قابلیت ها

همیشه نبودن قابلیت های مثل Variables, Functions, Mixins، دستورات شرطی و حلقه ها و… یا نبودن یک ساختار درست برای فایل ها، کامپوننت ها و…  توسعه دهنگان وب را آزار میداد تا اینکه تکنولوژی هایی به نام Preprocessor ها یا پیش پردازنده ها معرفی شدند از این پیش ها میتوان به LESS و SASS و Stylus و … اشاره کرد که قدرتمند ترین این ها SASS است که قابلیت هایی که در بالا ذکر شده را به بهترین نحو در خود دارد.

اما خب همان طور که میدانید Syntax پیش پردازنده ها Syntax سوای از CSS است و از راه ها و Syntax های دیگری برای اضافه کردن این قابلیت ها استفاده میکنند در صورتی که قابلیت هایی که پیش پردازنده ها دارند را W3C کم کم به CSS در حال اضافه کردن است اما جدای این دلیل Module هایی که برای SASS وجود داشت اصلا زیاد نبودند که کارا تر باشند و محدوده به مجموعه mixin ها یا توابع بود مثل : Compass و همچنین چون API ثابتی وجود نداشت تا Module هایی نوشته شود و و اگر هم بود این API ها با زبان هایی مثل Ruby نوشته شده بود که خیلی سخت عملیات تولد و توسعه انجام میشد.

اینجا بود که postCSS معرفی شد تا این مشکلات و دیگر مشکلاتی که کمتر شناخته شده بود را حل کند.

postCSS چیست؟

یک ابزار برای تبدیل CSS شما به CSS بهینه تر است و Module هایی برای راحت تر کردن کد نویسی CSS به ما میدهند. برای مثال: کد شما را فشرده میکند، پیشوند های مروگر را اضافه میکنند قابلیت هایی مثل متغیر ها و… را به شما میدهد قابلیت هایی که در آینده به CSS اضافه خواهند شد را اکنون در اختیار شما قرار میدهد و ده ها قابلیت دیگر که بررسی میکنیم.

از استفاده کنندگان postCSS میشود به توییتر و وردپرس و گوگل اشاره کرد.

اما کار هایی که شما انتظار دارید توسط خود postCSS انجام نمی شوند توسط Module های postCSS انجام میشود. روند کاری postCSS به صورت زیر است:

 

Main-Workflow

 

** یعنی اگر شما از postCSS بدون Module استفاده کنید همان فایل CSS اولیه به شما در خروجی داده میشوند. به صورت زیر:

 

no-wokflow

 

برای مثال از Module Autoprefixer برای اضافه کردن پیشوند مرورگر، از Post CSS Next CSS برای اضافه کردن قابلیت های آینده CSS و… استفاده میشود.

 

 


شاید با خود بگویید این قابلیت ها اکثرا و عموما در SASS بود و نیازی نیست! خب دلایل زیر شاید شما را مجاب کند تا از postCSS استفاده کنید.

پس سوال این مطرح است: چرا از postCSS استفاده کنیم؟ ابتدا بیاییم و تصورات اشتباهی که در مورد postCSS وجود دارند را از بین ببریم:

اما تصورات اشتباه درباره postCSS :

  • postCSS یک Preprocessor نیست اما میتواند به این منظور استفاده شود.
  • postCSS یک Postprocessor نیست اما میتواند به این منظور استفاده شود.
  • postCSS فقط درباره قابلیت های آینده CSS نیست اما میتواند به این منظور استفاده شود.
  • postCSS یک بهینه ساز و Minify کننده کد نیست اما میتواند به این منظور استفاده شود.
  • postCSS یک بستر برای ساخت دیگر ابزار های نیست اما میتواند به این منظور استفاده شود.

در تمام موارد بالا “میتواند به این منظور استفاده شود” وجود داشت یعنی postCSS فقط یکی از این ها نیست بلکه همه ی این ها است.

 

اما ویژگی هایی postCSS علاوه بر گزینه هایی که در بالا ذکر شد:

 

تمام قابلیت های SASS و… را دارد:

قابلیت متغیر ها و توابع و Mixin هاو including و…  را با استفاده از Module Pre CSS را به ما میدهد و شما را از Preprocessor ها بی نیاز میکند همچنین چون با CSS Next سازگاری دارد میتوانید از قابلیت های آینده CSS نیز استفاه کنید.

 

فقط از قابلیت هایی که نیاز دارید استفاده میکنید:

Preproccessor هایی مثل SASS و LESS تمام قابلیت هایشان به زور به شما میدهند و در موقع کامپایل با کندی بزرگی مواجه هستیم ولی در postCSS به لطف Modular بودن فقط از قابلیت هایی که نیاز دارید استفاده میکنید.

 

توسعه راحت و داشتن پایه Javascript:

postCSS کاملا با Javascript و NodeJS نوشته شده است و این یک مزیت بزرگ برای طراحان وب است چرا که قبلا جاوا اسکریپت را یاد گرفتند و برای اینکه به postCSS مهاجرت کنند و آن را یاد بگیرند برایشان زیاد کار سختی نیست. و همچنین توسعه پلاگین یا Module برای postCSS خیلی آسان است و چون API بسیار آسانی تحت Javascript و NodeJS برای این کار میدهد نیازی به یادگیری چیز های خارق العاده ندارید.

 

سرعت بسیار بالا:

دلیل دیگری که باید از postCSS استفاده کرد سرعت بسیار بالای آن است. به اطلاعات این لینک https://github.com/postcss/benchmark توجه کنید  کاملا متوجه میشوید که postCSS چقدر سریع تر است.

 

مخزن Module های بسیار:

postCSS از Module های بسیار در همه زمینه ها شامل میشود میتوانید به این لینک http://postcss.parts و دسته بندی های آن را مشاهده کنید از آنالیز و رنگ و اشکال یابی گرفته تا طراحی واکنش گرا و SVG و بهینه سازی و…

 

سازگاری با Task Runner ها و Bundler ها :

postCSS با Task Runner ها معروف و محبوب مثل Gulp , Grunt سازگار و هماهنگ  است و براحتی میتوان ازآن بروی Task Runner ها استفاده کرد که آموزش های ما بر اساس Gulp خواهد بود همچنین postCSS با Bundler هایی مثل Web Pack نیز سازگاری کامل دارد.

 

امکان استفاده با SASS یا LESS :

نگران این بودید که دیگر نمیتوانید از SASS یا LESS استفاده کنید خوشبختانه باید بگویم شما میتوانید از postCSS با SASS یا LESS استفاده کنید به این صورت که ابتدا طبق یک Workflow خط لوله ای ای فایل SASS یا LESS خود را کامپایل میکنید و بعد از آن postCSS از فایل Compile شده شروع میکند و کار ها را انجام میدهد.

 

استفاده با CSS خام:

اگر علاقه ای ندارید از CSS Next یا حتی SASS یا … استفاده کنید یا Syntax های سفارشی Module ها را بپذیرید باز هم postCSS برای شما مناسب است چرا که میتواند CSS خروجی بسیار بهینه کند. برای مثال import@ های شما را یک فایل کند تا Request کمتر شود یا Media Query هایی که چند بار نوشته شده اند را در یک Media Query خلاصه کند، دستورات بی استفاده را حذف کند و ده ها کار دیگر.

 

سرعت انجام کار ها چند برابر میشود:

منظور ازینکه سرعت کار ها چند برابر میشود ینی سرعت اجرا نیست بلکه خیلی از کار های توسط postCSS به صورت خودکار انجام میشود کار هایی که شما قبلا ساعت ها برای آن وقت میگذاشتید برای مثال شما سایت چند زبانی در حال توسعه هستید قطعا و حتما باید CSS را برای یک زبان به صورت LTR تبدیل کنید باید تمام چیز ها را بر عکس کنید اما حال فقط فایل CSS به postCSS میدهد و آن برای تمام زبان های آن فایل CSS را تبدیل میکند. خارق العاده است نه؟این تنها یکی از این کار بود.

 

خطا یابی و خوانایی بالای کدها:

اگر در جایی از کد اشتباهی کرده باشید یا کد رنگی را اشتباه وارد کرده باشید و یا Selector را درست صدا نزده باشید یا هر خطای دیگریpostCSS این را به شما گزارش میدهد.

همچنین خوانایی کد های شما را بالا میبرد چرا نیاز نیست prefix ها را اضافه کنید چون با Module Autoprefixer اضافه میشوند و شما در کد اصلی یک خصوصیت دارید و همچنین از Nesting برای انتخاب و استایل های تو در تو استفاده میکنید و  از CSS Module و ترکیب آن با BEM یا OOCSS برای اینکه فایل های CSS منظمی داشته باشید استفاده میکنید و…

 

تمام توضیحات بالا فقط برای این بود بدانیم postCSS چیست؟ چرا باید از postCSS استفاده کنیم و چه مزیت هاو قابلیت هایی را به ما میدهد و اما  در قسمت های بعد یادمیگیرم:

  1. چگونه از postCSS استفاده کنیم؟
  2. چگونه Module ها را نصب کنیم و از آن استفاده کنیم و آن ها را Configure کنیم؟
  3. از قابلیت های CSS Next استفاده کنیم؟
  4. از ماجول PreCSS برای جایگزینی با SASS استفاده کنیم.
  5. از ماجول های کمکی برای سریعتر شدن کدنویسی استفاده کنیم (چند زبانی، موقعیت دهی و…)
  6. کدهایمان را با postCSS بهینه کنیم؟
  7. از  CSS Module برای Component Base کردن کد هایمان استفاده کنیم؟

منتظر آموزش های آینده، خیلی زود باشید.

در صورتی که سوالی دارید در توییتر http://twitter.com/hamidgreedy بپرسید در صورتی که بلد باشم حتما جواب میدم.

  • سحر

    بسیار مفید و عالی بود 🙂

    • حمید فرجی

      خواهش میکنم.

      خوشحالم مفید بوده 🙂

  • میلاد

    حرف نداشت ممنون

    • حمید فرجی

      خواهش میکنم، خوشحالم مفید بوده 🙂