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

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

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

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

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

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<وصلةrel="ورقة الأنماط"href="src / styles.css">
رأس>
<جسم>
<ص>فقرةص>
<شعبة>ديفشعبة>
جسم>
لغة البرمجة>

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

جسمص {
لون: البرتقالي;
}
جسمشعبة {
لون: أزرق;
}
جسم {
عرض: شبكة;
}

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

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

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

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

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

npm الحرف الأول

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

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

npm i - postcss-dev save-dev postcss-cli

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

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

"نصوص": {
"بناء: 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 - حفظ-ديف cssnano

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

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

مقدار ثابت cssnano = يتطلب("cssnano")
وحدة.exports = {
 المكونات الإضافية: [
 cssnano ({
 المعد مسبقا: "الافتراضات"
 })
 ]
}

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

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

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

جسم {
 & ص {
لون: البرتقالي;
 }
}

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

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

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

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

npm i - حفظ-dev postcss-preset-env

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

مقدار ثابت cssnano = يتطلب("cssnano")
مقدار ثابت postcssPresetEnv = يتطلب("postcss-preset-env")
وحدة.exports = {
 المكونات الإضافية: [
 cssnano ({
 المعد مسبقا: "الافتراضات"
 }),
 postcssPresetEnv ({ منصة: 1})
 ]
}

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

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

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

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

يستورد cssnano من"cssnano"
// رمز التكوين يذهب هنا

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

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

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

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