كيفية استخدام PostCSS لتنظيف تصميم الويب الخاص بك -

القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

لنفترض أنك تعرفت على ميزة CSS الرائعة حقًا ، مثل التداخل. ولكن عندما تمضي قدمًا وتجربته ، فإنك تدرك أن الدعم مروع ، وستستغرق سنوات قبل أن تتمكن من استخدامه أخيرًا. كانت هذه مشكلة كبيرة في CSS حتى إدخال المعالجات الأولية مثل PostCSS.

اجعل فيديو اليوم قم بالتمرير للمتابعة مع المحتوى

تعرف على كيفية السماح لـ PostCSS باستخدام CSS الحديث والمستقبلي اليوم أثناء التطوير. ستكتشف بالضبط ما هو PostCSS ، وكيف يمكنك استخدامه ، وأفضل طريقة للاستفادة من ميزاته.

إنشاء المشروع

انتقل إلى مجلد فارغ ، وأنشئ ملفًا باسم index.html ، وأضف ترميز HTML التالي في الملف:

 <!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <link rel="stylesheet" href="src/styles.css"> 
</head> 
 
<body> 
  <p>Paragraph</p> 
  <div>Div</div> 
</body> 
 
</html>

يعرض مستند HTML هذا فقرة و

عنصر. يقوم أيضًا باستيراد ملف ورقة أنماط باسم Styles.css هذا داخل src مجلد. قم بإنشاء الملف بتنسيق src المجلد وتضمين قواعد نمط CSS التالية:

 body p { 
  color: orange; 
} 
 
body div { 
  color: blue; 
} 
 
body { 
  display: grid; 
}

يقوم CSS هذا بتنسيق لون كلا العنصرين على الصفحة وإنشاء تخطيط شبكة. تدعم معظم المتصفحات بناء جملة CSS العادي مثل هذا. ولكن عندما يكون لديك نظرة على البنية الأحدث ، فستحتاج إلى إحضار PostCSS.

إنشاء مشروع Node.js وتثبيت PostCSS

بعبارات بسيطة ، يتيح لك PostCSS تحويل CSS الحديث إلى شيء يمكن لمعظم المتصفحات فهمه ؛ عملية معروفة باسم النقل. يعد هذا مثاليًا إذا كنت ترغب في تجربة خصائص CSS جديدة أو تجريبية أو غير قياسية في التعليمات البرمجية الخاصة بك والتي قد لا تدعمها المتصفحات الرئيسية.

تقدم PostCSS أيضًا نظامًا بيئيًا غنيًا لمكونات JavaScript الإضافية التي يمكنك تثبيتها لتمكين ميزات معينة ، مثل تصغير CSS ودعم الألوان ودعم الفحص.

أفلام مجانية بدون تسجيل أو تنزيل

لاستخدام PostCSS ، فإن أول شيء عليك القيام به هو تهيئة مشروع Node.js جديد:

 npm init -y

سينشئ هذا الأمر ملف package.json يحتوي على القيم الافتراضية لتطبيقك.

بعد ذلك ، قم بتثبيت كل من PostCSS و PostCSS CLI. تسمح لك الحزمة الثانية بتشغيل PostCSS من سطر الأوامر:

 npm i --save-dev postcss postcss-cli

ال - حفظ ديف العلم يثبت كليهما حزم npm كما تبعيات ديف ؛ ستستخدم فقط PostCSS ومكوناته الإضافية لمعالجة كود CSS أثناء التطوير.

لبدء استخدام PostCSS عبر ملف واجهة خط الأوامر ، انتقل إلى package.json ملف وإنشاء ملف بناء: المغلق أمر للترحيل باستخدام PostCSS:

 "scripts": { 
  "build:css": "postcss src/styles.css --dir dest -w" 
}

سيأخذ هذا الأمر CSS الخاص بك (المخزن في ملف src / styles.css ) ، قم بترجمة الكود ، ثم أخرجه في ملف يبدأ مجلد. تشغيل بناء npm: css يقوم الأمر بإنشاء هذا المجلد وملئه بامتداد Styles.css ملف يحتوي على رمز يمكن قراءته من خلال المتصفح.

عندما تقوم باستيراد CSS الخاص بك إلى HTML ، تأكد من أنك تقوم بالاستيراد من مجلد الوجهة حيث تقوم بتجميع CSS الخاص بك ، وليس من المجلد المصدر الذي يقوم PostCSS بالتجميع منه. هذا ، في حالتنا ، هو حي المجلد ، وليس ملف src مجلد.

إذا فتحت موقع الويب الخاص بك في متصفح ، فسترى أن الموقع لا يزال يصل إلى CSS. في أي وقت تقوم فيه بإجراء تغييرات على الملف المصدر ، ستقوم PostCSS بإعادة تجميع التعليمات البرمجية وستنعكس التغييرات على صفحة الويب.

استخدام إضافات PostCSS

هناك المئات من الإضافات PostCSS لإضافة البادئات والفحص ودعم بناء الجملة الجديد وعشرات الميزات الأخرى إلى PostCSS. بعد تثبيت المكون الإضافي PostCSS ، يمكنك تنشيطه داخل ملف postcss.config.js ملف - ملف JavaScript يمكنك استخدامه لإعداد جميع التكوينات لـ PostCSS.

تحميل هذا cssnano المكون الإضافي PostCSS باستخدام الأمر التالي:

 npm i --save-dev cssnano

مرة أخرى ، ما عليك سوى حفظ هذه التبعيات على أنها تبعيات ديف. والسبب هو أن كل هذا يحدث أثناء تطورك. لا تحتاج إلى PostCSS أو أي من مكوناته الإضافية بعد دفع الموقع إلى الإنتاج.

هاتفي لا يعمل

لاستخدام المكون الإضافي cssnano المثبت حديثًا ، يجب عليك إضافة الكود التالي داخل ملف postcss.config.js ملف:

 const cssnano = require("cssnano") 
 
module.exports = { 
  plugins: [ 
    cssnano({ 
      preset: 'defaults' 
    }) 
  ] 
}

الآن إذا عدت إلى المحطة وأعدت تشغيل أمر الإنشاء ، فسيؤدي ذلك إلى تقليل CSS الناتج (أي جعل الكود صغيرًا قدر الإمكان). لذلك عندما تضغط على موقع جاهز للإنتاج ، فستجعل CSS الخاص بك صغيرًا قدر الإمكان.

استخدام الميزات الحديثة مثل التعشيش

لنفترض أنك تريد استخدام بناء الجملة المتداخلة في ورقة الأنماط الخاصة بك ، لذلك قمت باستبدال كتلة الفقرة في src / styles.css مع هذا:

 body { 
  & p { 
    color: orange; 
  } 
}

هذا الرمز هو نفس الإصدار الموجود في رمز البداية الخاص بك. ولكن هذا سيؤدي إلى حدوث خطأ لأن البنية جديدة جدًا ، ومعظم متصفحات الويب لا تدعمها. يمكنك تمكين دعم بناء الجملة هذا باستخدام PostCSS عن طريق تثبيت ملف postcss- الإعداد المسبق- env توصيل في.

يجمع المكون الإضافي مجموعة من المكونات الإضافية المختلفة للتعامل مع CSS بناءً على المرحلة التي وصل إليها. تمثل المرحلة 0 الميزات التجريبية الفائقة التي قد لا تصل إلى CSS. حيث أن المرحلة 4 مخصصة لميزات اللغة التي تعد بالفعل جزءًا من مواصفات CSS.

بشكل افتراضي، الحاضر-البيئة يستخدم ميزات المرحلة 2 (التي من المرجح أن تجعله في CSS). ولكن يمكنك تغيير المرحلة إلى ما تريد في ملف التكوين.

لتثبيت البرنامج المساعد ، قم بتشغيل الأمر التالي:

 npm i --save-dev postcss-preset-env

ثم في ملف postcss.config.js ملف ، فأنت تقوم باستيراد المكون الإضافي وتسجيله:

 const cssnano = require("cssnano") 
const postcssPresetEnv = require("postcss-preset-env") 
 
module.exports = { 
  plugins: [ 
    cssnano({ 
      preset: 'defaults' 
    }), 
    postcssPresetEnv({ stage: 1}) 
  ] 
}

يجب عليك اجتياز مرحلة كود CSS الجديد الذي تنوي استخدامه فقط. في هذه الحالة ، نفترض أن ميزة التداخل في المرحلة الأولى. عند إعادة تشغيل أمر الإنشاء والتحقق من المتصفح ، ستلاحظ أنه تم تجميع الشفرة المتداخلة في CSS القياسية التي يمكن للمتصفح فهمها.

استخدام PostCSS مع الأطر

قد يكون تكوين PostCSS يدويًا أمرًا مزعجًا بعض الشيء. هذا هو السبب في أن جميع الأطر الحديثة تقريبًا تأتي مع أدوات تجميع (على سبيل المثال ، Vite و Snowpack و Parcel) ، وستدعم هذه الأدوات لـ PostCSS المدمج. وحتى إذا لم يفعلوا ذلك ، فإن عملية إضافة دعم PostCSS سهلة للغاية.

تذكر دائمًا أن Vite ومعظم الحزم الأخرى تستخدم نظام وحدة ES6 ، ليس CommonJS. للتغلب على هذا ، تحتاج إلى استخدام يستورد بيان بدلا من يتطلب() في الخاص بك postcssconfig.js ملف:

 import cssnano from "cssnano" 
 
// Configuration code goes here

طالما أن الإضافات مثبتة لديك ، فسيعمل كل شيء على ما يرام.

تعرف على المزيد حول SaSS

PostCSS هو مجرد واحد من عشرات معالجات CSS الأولية المتاحة حاليًا. واحد منهم هو SaSS ، والذي يرمز إلى أوراق الأنماط الرائعة من الناحية التركيبية.

يمكن أن يكون تعلم استخدام معالج رئيسي آخر مفيدًا كمطور CSS.