سوالاتی برای ساختن و برقرار کردن راهنمای FrontEnd (جلسه ۸) : CSS – قسمت ۴

frontend

ابزارهای CSS

  • آیا تیم شما از CSS Postprocessor‌ها استفاده میکنه؟

همونطور که دیدید در جلسات قبلی در مورد CSS Preprocessor‌ها صحبت کردیم. Pre به معنای قبل از CSS شدن هست. همونطور که دیدید زبانهایی مثل Sass و Less در دسته CSS Preprocessor قرار میگرفتن و امکانات خاصی رو به کدهای شما اضافه میکردن و به کار شما سرعت میبخشیدن. حالا فرض کنید از Sass استفاده کردید و اون رو Compile کردید و کدهای CSS خالص رو بدست آوردید. در این کد قسمتهایی وجود دارن که در همه مرورگرها پشتیبانی نمیشه و میتونیم با استفاده از ابزارهای CSS Postprocessor اونا رو برطرف کنیم. مثالی که در این زمینه وجود داره اضافه کردن vendor prefix‌ها مثل webkit و moz هست که این کار رو به CSS Postprocessor‌ها میسپاریم. این ابزارها کارهای دیگه ای رو هم انجام میدن و در ادامه تعدادی از مهمترین هاشونو بهتون معرفی میکنم.prefix free

این تصویر مربوط به PrefixFree هست که کار اصلی اون اضافه کردن Vendor Prefix به کدهای CSS شما هست. این ابزار خیلی منعطف هست و تقریبا میشه در همه جا ازش استفاده کرد. تنها کاری که باید بکنید اینه که اون رو در قسمت Head سایت و بعد از link‌های مربوط به CSS اضافه کنید. این ابزار بصورت اتوماتیک همه کارها رو برای شما انجام میده.autoprefixer

این تصویر مربوط به Autoprefixer هست که تقریبا کارهایی که ابزار بالایی انجام میده رو به علاوه یه کارهای بیشتر انجام میده. کار اصلی این ابزار هم اضافه کردن Vendor Prefix‌ها بر اساس اطلاعات سایت Can I Use هست و بصورت دائمی به روز رسانی میشه.pleeease

این تصویر مربوط به Pleeease هست که یک ابزار بر پایه Node.js هست و به نوعی ترکیبی از Preprocessor و Postprocessor هست و همه کارها رو براتون انجام میده. مثلا کدهای Sass شما رو کامپایل میکنه و بعد از اون با استفاده از Autoprefixer، موارد مورد نیاز رو بهش اضافه میکنه. بعد اگر قسمتی از کد در مرورگرهای قدیمی پشتیبانی نشه، فکری به حالش میکنه. کدهاتون رو فشرده میکنه و Source Map هم براش میسازه. کارهای زیاد دیگه ای هم انجام میده.cssnext

این تصویر مربوط به CSSnext هست که با استفاده از اون میتونین کدهای CSS خیلی جدید و مدرن رو استفاده کنید. این ابزار هم به نوعی هم preprocessor هست و هم postprocessor.postcss

این تصویر مربوط به PostCSS هست و ابزار خیلی قدرتمند و پرطرفداری هست که با استفاده از پلاگینهایی که داره، کارهای شما رو خیلی خیلی راحت میکنه. این ابزار هم بر پایه Node.js هست و با استفاده از Javascript کدهای CSS شما رو تبدیل میکنه. مواردی که این ابزار رو تشکیل میدن بصورت زیر هست:

  • Autoprefixer : با استفاده از این مورد، Vendor Prefix‌ها رو اضافه و مدیریت میکنه
  • CSSnext : با استفاده از این مورد به شما اجازه میده که کدهای بسیار جدید رو استفاده کنید و نگران پشتیبانی شدن در مرورگرهای قدیمی نباشید
  • CSS Modules : با استفاده از این ابزار از قدرت ماژولار بودن بهره میبره و دیگه لازم نیس که نگران نامگذاری کلاسها و معنادار بودن اونا باشید
  • Stylelint : اگه کدهای شما خطا یا مشکلی داشته باشه، به شما میگه و میتونین به راحتی اون رو برطرف کنید
  • LostGrid : سیستم گرید بندی بسیار قدرتمند با استفاده از calc بر اساس کدهای شما و بصورت اتوماتیک

مورد آخر توسط خیلی از شرکتها و سایتهای معروف مورد استفاده قرار میگیره و شما هم میتونین از قدرت اون بهره ببرید. پس با پاسخ به این سوال هم تکلیف ابزارهای Postprocesspr هم مشخص میشه.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0