المغلق بعد المعالجات للحصول على نصائح والموارد للمبتدئين

المغلق قبل المعالجة هو مفهوم تعلمه معظم مطوري الويب أو قرأوا عنه بالفعل. لقد قمنا بتغطية المعالجة المسبقة لـ CSS بتفصيل كبير لمساعدة المطورين على الاستفادة من هذه التقنية السائدة. لكن ماذا عن بعد المعالجات?

هذه الأدوات الجديدة نسبيا متشابهة بمعنى أنها تؤثر على سير العمل في تطوير الشبكة, لكنهم يعملون على الجانب الآخر من تطوير CSS (“بريد” تطوير).

في هذا المنشور ، أود تقديم أساسيات مرحلة ما بعد المعالجة, كيف تعمل ، ولماذا تستخدمها ، وتشارك بعض المكتبات / الأدوات التي يمكنك استخدامها لتطوير لعبة CSS مع المعالجة اللاحقة.

نشر مقابل المعالجة المسبقة

ال ثورة ما قبل المعالجة حدث عندما ساس / أقل ضرب المشهد. تتيح هذه الأدوات للمطورين استخدام المتغيرات والحلقات والوظائف والخلطات داخل CSS. هذا يجعل تقريبا تطوير CSS الأساسية تشبه لغة البرمجة مع وظائف الموسعة.

المعالجة البعدية يحدث بعد أن أنتجت بالفعل CSS العادي ، وتريد تمديده أبعد من ذلك من خلال الأتمتة. هذا يمكن أن تشمل تمديد محددات الصف, أو بادئات إلحاق تلقائي لبعض خصائص CSS.

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

إليك اقتباس من منشور يمثل أيضًا مصدر الصورة أعلاه. أعتقد المؤلف ستيفان بومجارتنر يلخص الفرق ببراعة.

بطريقة ما ، كلاهما يشبه أدوات الأتمتة ، يعمل فقط بطرق مختلفة. على سبيل المثال ، ألم شائع حلها بعد المعالجة هو بادئات الإلحاق التلقائي لخصائص CSS3 الأحدث.

ولكن يمكن القيام بذلك أيضًا في Sass مع الامتدادات. فهل هناك حقا فرق? إليك اقتباس رائع آخر من نفس المنشور:

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

احتواء ما بعد المعالجة في سير العمل الخاص بك

الجميع تقريبا المراجع PostCSS كمورد نهائي للمعالجة بعد. ومع ذلك ، فقد اعترف فريق PostCSS علانية على Twitter to تغيير لقبهم لأن إسهاب لا معنى له بعد الآن.

لم تعد PostCSS مجرد أداة ما قبل CSS أو post-CSS. يمكن في الواقع العمل في كلا المجالين! هذا ما يفسر الاقتباس من القول في وقت سابق أن جميع أدوات CSS تتلخص في شيء واحد - معالجة.

PostCSS يستخدم مكونات جافا سكريبت ل أتمتة سير العمل CSS الخاص بك, ويمكنك حتى كتابة ملحق JS الخاص بك لتوسيع مكتبة PostCSS. إذا كنت تريد البدء في استخدام PostCSS ، فراجع هذا البرنامج التعليمي التقديمي على Smashing Magazine. إذا كنت تستخدم Sass بالفعل وتفهمه ، فسوف تلتقط Post CSS بسرعة.

لإنشاء سير عمل معالجة CSS قبل / بعد ، ابدأ من عمل قائمة بنقاط الألم, مثل:

• البادئة لصناعة السيارات في التدرجات CSS
• التنظيم التلقائي لقواعد CSS
• إلحاق polyfills لخصائص معينة
• توليد أبعاد الصورة لصور الخلفية

لاحظ أنه يمكن القيام بكل هذه الأشياء في كل من قبل وبعد المعالجة. من المهم أن ندرك أن معالجة CSS قبل / بعد يتم دمجها بسرعة لتصبح واحد في نفس الشيء.

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

أفضل أدوات ما بعد المعالجة

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

Pleeease

إذا كنت تعمل بالفعل مع Node.js ، فسيبدو Pleeease كخيار واضح. لديها الكثير ميزات CSS معالجة نموذجية, مثل استيراد الملفات ، والمتغيرات / الوظائف ، والتصغير التلقائي ، ودعم النسخ الاحتياطي لعناصر أحدث مثل SVGs.

الموقع يحتوي أيضا على ملعب تفاعلي لمن يريد تجربة المكتبة على الإنترنت دون تنزيل نسخة محليًا.

بارك

أتذكر عندما كان Internet Explorer 6 لا يزال مصدر إزعاج ، ومن الجيد معرفة أن تطوير IE قد تحسن - ولكن ليس كثيرًا. بينما أحب أن أخبرك أن استخدام IE قد انتهى ، إلا أن هذا لا يبدو صحيحًا.

لحسن الحظ ، Bless CSS هو الحل الذي بالكشف عن المشاكل المحتملة المتعلقة بـ IE في CSS الخاص بك ، ويخلق حلولًا بعد المعالجة. يتم تشغيله على Node.js ، لذا فهو مناسب تمامًا لسير عمل NPM / Gulp النموذجي.

CSSNext

إليك مكتبة رائعة حقًا تسمح لك بذلك بناء CSS مع وظائف أكثر تقدما هذا غير معتمد حاليًا. تتضمن مكتبة CSSNext دعم وظائف CSS4 الفردية, مثل اللون الرمادي(), الموجودة حاليًا فقط في مسودات W3C.

لا أعتقد أن كل مطور سيحتاج إلى هذه المكتبة. إنها محددة للغاية ولن تحل المشكلات اليومية ، ومع ذلك يمكن أن تعطيك مشكلة طعم المواصفات CSS4 القادمة أثناء تحويل بناء الجملة إلى CSS3 الحديثة.

Stylecow

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

يمكنك تنزيل Stylecow من GitHub ، ويأتي مع بعض الوثائق المفصلة بشكل لا يصدق.

-خالية من بادئة

وأخيرا أريد أن أشارك -خالية من بادئة المكتبة التي تعد أيضًا أداة محببة لتطوير CSS ، لأنها تتيح لك ذلك استخدام خصائص CSS غير مسبوقة. الكل يريد استخدام خصائص CSS الحديثة ، مثل الرسوم المتحركة والتدرجات ، لكن لا أحد يريد نسخ / لصق رمز مطوّل يدويًا.

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

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

تغليف

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

إذا كنت تبحث عن مزيد من المعلومات حول مرحلة ما بعد المعالجة ، فقم بإلقاء نظرة خاطفة على هذه المقالات ذات الصلة:

• ما الذي سيوفر لنا من الجانب المظلم من المعالجات المسبقة CSS?
• نظرة على كتابة CSS المستقبلية مع PostCSS و cssnext
• CSS Preprocessing (SASS or LESS) vs CSS Postprocessing