ننشر اليوم الجزء الثاني من ترجمة المواد المتعلقة بمكافحة شفرة CSS غير المستخدمة.
→
الجزء الأولالمغلق postprocessing
افترض في بعض المشروعات أن CSS مكتوب باستخدام Less أو Sass ، ثم يتم استخدام postprocessor في ترجمة الشفرة الحالية إلى CSS العادية. في مثل هذا المشروع ، من المحتمل أن يكون هناك نظام تلقائي للتخلص من CSS غير المستخدم ، والذي يبدأ بعد المعالجة المسبقة لـ CSS. هذا قد يبدو مثل هذا:
- ساس.
- PostCSS / نظام البادئة التلقائي.
- إزالة CSS غير المستخدمة.
- كود CSS جاهز للإنتاج.
هذا ، من ناحية ، منطقي ، ومن ناحية أخرى - يبدو غريبا بعض الشيء في عيني. النقطة المهمة هي أنه مع هذا النهج ، لا يتم تصحيح التعليمات البرمجية المصدر التي تحتوي على أوامر stylization ، بناءً على إنشاء كود CSS النهائي ، والذي يتضمن CSS غير المستخدم. بدلاً من ذلك ، تتم إزالة CSS غير الضرورية ببساطة في نهاية عملية الإنشاء. أظن أنه في جافا سكريبت ، عند تنفيذ خوارزمية تهتز الأشجار ، تم القيام بشيء مشابه لبعض الوقت. وهذا يعني أن التعامل مع CSS ليس بالأخبار على الإطلاق. لكن بالنسبة لي ، يبدو أن كل هذا خطأ ، لأن قاعدة كود CSS هي شيء يمكن أن يقال إنه يقع على سطح مشاريع الويب. يطالب هذا النهج المطورين تقريبًا بكتابة CSS بلا مبالاة ، لضمان إلقاء كل شيء في شفرة مصدر CSS. والحقيقة هي أن النظام سوف يتخلص من CSS غير الضروري تلقائيًا. لكن هذا يحرم المطورين تمامًا من الرغبة في فهم كيفية تصميم تصميماتهم بالضبط ، وكيف يتم استخدام CSS بالضبط فيها.
PurgeCSS
PurgeCSS هو مشروع آخر يهدف إلى مكافحة CSS غير المستخدمة. على الرغم من أن هذا لا يرتبط ارتباطًا مباشرًا بقدرات هذا المشروع ، إلا أنني أحب ذلك لأن وثائقه توضح بوضوح
اختلافاته عن المنافسين. أعلاه ، لقد قدمنا بالفعل جزءًا من المقارنة بين PurgeCSS و PurifyCSS. وهنا مقتطف آخر من وثائق PurgeCSS مخصص لـ PurifyCSS. النقطة المهمة هي أن المشكلة الرئيسية مع PurifyCSS هي انخفاض مستوى هذا المشروع. ومع ذلك ، هذه هي القوة الرئيسية لـ PurifyCSS. كما ذكرنا سابقًا ، فإن PurifyCSS يعتبر الكلمات CSS هي كل الكلمات التي يعثر عليها في الملفات. هذا النهج محفوف بالأخطاء. لكن PurifyCSS يحل هذه المشكلة عن طريق تمكين إنشاء وظائف مستخرج. تأخذ هذه الوظيفة محتويات الملف وتستخرج منه قائمة من محددات CSS المستخدمة فيه. يتيح لك ذلك حل مشكلة التخلص من شفرة CSS غير المستخدمة.
يبدو مشروع PurgeCSS الآن وكأنه لاعب رئيسي في سوق تنظيف كود CSS. كثير استخدامها ، والكثير يكتب عن ذلك.
- فيما يلي مواد حول كيفية استخدام PurgeCSS ، خاصة عند العمل مع Bootstrap.
- من هذه المقالة ، يمكنك معرفة أن PurgeCSS لن يزيل المحددات في ظروف غير عادية باستخدام قوائم بيضاء.
- هنا يمكنك التعرف على كيفية استخدام PurgeCSS بالاقتران مع البرامج النصية npm و PostCSS.
- يتحدث عن كيفية عمل PurgeCSS مع Tailwind.
على الرغم من حقيقة أن PurgeCSS يحتاج إلى ضبط خاص للعمل مع Tailwind ، يبدو أن هاتين الأداتين يتم دمجهما تمامًا مع بعضهما البعض. في الواقع ، حتى في
وثائق Tailwind
، يمكنك العثور على توصية لمشاركتها. و PurgeCSS لديه
أداة سطر الأوامر لتطبيقها في عملية بناء المشاريع.
أعتقد أن جوهر ذلك يأتي إلى ما يلي: ينشئ Tailwind ملف CSS كبيرًا مليئًا بمتحددات المساعد. لكن ليس من المفترض أن يتم استخدام كل هذه المحددات في المشروع. يستخدمهم المطور لحل جميع مشاكل تصميم كود HTML الخاص به ، ثم يقوم PurgeCSS بتحليل كود HTML هذا ويزيل محددات غير ضرورية ، مما يجعل CSS جاهزًا للإنتاج.
صحيح ، لا يزال يتعين على PurgeCSS إبلاغه بكل ملف HTML و JavaScript يستخدم على الموقع. بمعنى آخر ، تحتاج إلى تكوين كل ما يتعلق بالموارد الخارجية بشكل مستقل ، ومراعاة حقيقة أن البيانات الواردة إلى المشروع من مستودعات معينة من المحتمل ألا يتم تحليلها أثناء تجميع المشروع. نتيجة لذلك ، ينطوي استخدام PurgeCSS في تجميع المشروعات على قدر كبير من العمل اليدوي.
مقاربي المفضلة للتخلص من CSS غير المستخدمة
أكثر ما يعجبني هو الطريقة التالية لإزالة CSS غير الضرورية. هذا يعني أنه سيكون هناك شخص ما في فريق تطوير المشروع على دراية بكود CSS لهذا المشروع. يجب أن يكون هذا الشخص على دراية بالمشكلات الحالية في الأساليب وأن يحلها تدريجياً. ربما هذه وجهة نظر قديمة للوضع الذي ينتمي إلى الشخص الذي ينبغي مواكبة العصر. لكن بالنسبة لي ، على أي حال ، يبدو أنه النهج الأكثر عملية. بالنظر إلى أن المهمة التي ندرسها صعبة للغاية ، أعتقد أن الإجابة على التحدي الذي تمثله هذه المهمة للمطورين يمكن أن تكون مهمة شاقة. الجواب هو فهم المشكلة والحل التدريجي لها. مطور الواجهة الأمامية الذي يكون على دراية بالمشروع ويعرف ما هو مستخدم فيه وما هو غير قادر على حل هذه المشكلة.
لقد رأيت أسلوبًا متطرفًا واحدًا لمعرفة ما إذا كان محدد الموقع يستخدم أم لا. استخدمت كتلة CSS تصميمًا مثل
background-image: url(/is-this-being-used.gif?selector); . بعد تطبيقه ، تم فحص سجلات الخادم بشكل دوري لمعرفة ما إذا كان قد تم تقديم طلب لاستلام الصورة المقابلة. إذا كان هناك مثل هذا الطلب ، فسيتم استخدام كتلة CSS قيد التحقيق. إذا لم يكن كذلك ، فلا يتم استخدامه.
ولكن ربما تكون أداتي المفضلة في مجموعة أدوات CSS explorer غير المستخدمة هي الأداة التي سيتم مناقشتها في القسم التالي.
دراسة المشاريع عن طريق الانحدار البصري
تتكون هذه الطريقة من حقيقة أن المطور يأخذ أكبر عدد ممكن من لقطات الموقع. إنهم يقومون بنسخ من شاشات أهم الصفحات ، وتلك الصفحات ، التي يعتمد مظهرها على حالة التطبيق. تؤخذ لقطات الشاشة في متصفحات مختلفة ، بأحجام مختلفة للشاشة. يتم إنشاء لقطات الشاشة هذه بناءً على مواد من الفرع
master لمستودع المشروع.
ثم ، قبل دمج أي فرع آخر مع الفرع
master ، يتم إنشاء لقطات شاشة جديدة بناءً على مواد الفرع الجديد ومقارنتها مع تلك المصنوعة للفرع
master . هذا ، بالطبع ، لا يتم يدويا ، ولكن برمجيا.
بالمعنى الدقيق للكلمة ،
إليك مقطع فيديو يظهر فيه.
تجدر الإشارة إلى أنه سبق أن قيل الكثير حول موضوع أدوات لدراسة الانحدار البصري ، لكن
مؤلف هذا الفيديو هو الشخص الوحيد الذي شرح كل شيء بشكل واضح للغاية. لا تحتاج فقط إلى التقاط لقطات شاشة ؛ تحتاج إلى مقارنتها والبحث عن الاختلافات بينهما. يجب ألا يجد المرء الاختلافات فقط ؛ تحتاج إلى قبولها أو رفضها. بالإضافة إلى ذلك ، من الضروري أن يؤثر اعتماد التغييرات أو الموافقة عليها على عملية دمج الفروع في المستودعات. بالإضافة إلى ذلك ، يجب أن يكون المطور قادرًا على تكوين المتصفح قبل التقاط نسخة من الشاشة والقدرة على أتمتة العمل باستخدام لقطات الشاشة التي تم التقاطها.
الذري CSS و CSS-in-JS
أنا متأكد من أن العديد من قراء هذه المادة يمكنهم أن يقولوا: "ليس لديّ CSS غير مستخدم ، لأن الأدوات التي أستخدمها تولِّد الشفرة التي أحتاجها بالضبط ولا شيء أكثر من ذلك."
إذا كان الأمر كذلك ، فهذا رائع.
ربما نحن نتحدث عن
البخاخة . ربما تكون هذه أداة
Tachyons ، يتم تمرير
نتائجها عبر
UnCSS ويتم توخي الحذر. ربما - هذا هو مزيج من
Tailwind +
PurgeCSS ، والذي يُسمع الآن
على نطاق واسع .
ربما - ما زالوا يعملون مع الأساليب بطريقة أو بأخرى. إذا كان شخص ما يربط مكونات وأنماط JavaScript بشكل وثيق ، على سبيل المثال ، عند استخدام React and Emotion ، أو حتى مجرد تطبيق وحدات CSS مع أي شيء ، من بين مزايا أساليب CSS-in-JS ، هناك انخفاض في حجم CSS غير المستخدم في المشاريع النهائية. بالإضافة إلى ذلك ، نظرًا لأن العديد من المشروعات المستندة إلى جافا سكريبت تستخدم خوارزمية هز الأشجار وتقنيات فصل الكود ، فلن يكون لهذه المشروعات CSS أقل أهمية فحسب. أثناء عملهم ، سيتم تحميل فقط ما هو مطلوب في كل موقف محدد. ولكن ، بالطبع ،
هناك عيوب لمثل هذه الأساليب للعمل مع CSS.
النتائج
دعونا الآن نفكر في كيفية تجنب ظهور شفرة CSS غير الضرورية في مشاريعنا المستقبلية. أعتقد أن مستقبل التصميم هو الفصل بين الأنماط العالمية والأساليب المطبقة على المكونات الفردية. تقتصر معظم الأنماط على نطاق المكونات ، ولكن هناك أنماط عامة يمكن استخدامها لاستغلال الطبيعة المتتالية لـ CSS. على سبيل المثال ، قد يكون الأمر مثل إعدادات الطباعة القياسية العالمية.
إذا كانت معظم الأنماط مقيدة بنطاق المكونات ، فأعتقد أن الأنماط غير الضرورية تكون أقل عرضة لاختراق المشروعات الجاهزة ، نظرًا لأن من السهل على المطور الخوض في العلاقات بين أجزاء HTML و CSS الصغيرة ذات الصلة الوثيقة. وعندما تتم إزالة المكون من المشروع أو تطويره ، يترك الأسلوب الأسلوب المشروع أو يتطور معه. نتيجة لذلك ، يتم إنشاء تجميعات CSS استنادًا إلى المكونات المستخدمة فعليًا في المشروع.
تتحرك تقنية CSS-in-JS بشكل طبيعي تمامًا في هذا الاتجاه. عند تطبيق هذه التقنيات ، ترتبط الأنماط بالمكونات. وهذا هو الشيء الأكثر أهمية في هذه الحالة. لكن أنماط الربط للمكونات اختيارية. أنا أحب النهج العالمي ، الذي ينطوي على استخدام
وحدات CSS . إنه يهدف بالكامل تقريبًا إلى فصل نطاق الأنماط ولا يجبر المطور على استخدام أي إطار JavaScript محدد.
ربما يبدو أن كل ما سبق ذكره لك شيء نظري أو بعيد عن الاحتياجات الحقيقية لمطوري الويب. لديك فقط موقع يستخدم Bootstrap ، وترغب في تقليل حجم CSS الذي يقوم المستخدمون بتحميله. إذا كان الأمر كذلك ، فإنني أنصحك باستخدام شفرة مصدر Bootstrap بدلاً من بنائها القياسي. تتم كتابة هذا الكود المصدري باستخدام SCSS ويتكون من العديد من المكونات الإضافية. هذا يعني أنه إذا كنت لا تحتاج إلى بعض أجزاء Bootstrap ، فيمكنك ببساطة تعطيل الوحدات المقابلة.
إزالة الوحدات المنسدلة والشارات وفتات التنقل من Bootstrap قبل إنشاء المشروعأتمنى لكم كل التوفيق في الصراع الصعب مع CSS-code غير الضرورية.
أعزائي القراء! كيف تتعامل مع كود CSS غير المستخدم الذي يدخل حيز الإنتاج؟
