إيجاد css غير المستخدم
أداة تجد القواعد الميتة ثم تحذفها

ماذا تفعل أداة إيجاد css غير المستخدم

ملفات الأنماط تكبر دائمًا. تضيف ميزات وتغيّر التصميم، فيبقى الكود القديم. نتيجة لذلك، ينزّل كل زائر أنماطًا لأجزاء من موقعك لم تعد تظهر.

تجيب أداة إيجاد css غير المستخدم عن سؤال واحد. ما القواعد التي يمكن حذفها دون تغيير شكل أي صفحة؟ لذلك تقرأ هذه الأداة HTML وCSS وJavaScript. ثم تضع كل قاعدة في واحدة من أربع مجموعات.

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

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

كيف تقرأ أداة إيجاد css غير المستخدم كودك

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

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

تتبع المطابقة قواعد CSS الحقيقية. مثلاً، المسافة تعني عنصرًا متفرعًا، وعلامة أكبر من تعني ابنًا مباشرًا. كما يعدّ :nth-child الأشقاء تمامًا مثل المتصفح. لذلك يذكر التقرير متى لا يطابق المحدد ترميزك.

اعثر على css غير المستخدم في عدة صفحات

نادرًا ما تُظهر صفحة واحدة الصورة كاملة. مثلاً، تبدو قاعدة الدفع ميتة في الصفحة الرئيسية، لكن صفحة الدفع تحتاجها. لذلك تقبل هذه الأداة كل الصفحات التي تعطيها.

يمكنك لصق عدة صفحات في مربع واحد. فقط ابدأ كل صفحة جديدة بسطر تعليق مكتوب فيه page. أو ارفع ملفات HTML، وكل ملف يُعد صفحة واحدة.

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

لماذا لا تكفي صفحة واحدة

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

القاعدة العملية بسيطة. أضف صفحة من كل نوع في موقعك، لأن الأداة لا تحكم إلا على الصفحات التي تراها.

أصناف يضيفها JavaScript لاحقًا

تنفتح القوائم، وتتبدل التبويبات، وتظهر النوافذ. في كل مرة يضيف سكربت صنفًا، لذلك لا يكون الصنف في HTML أول الأمر. نتيجة لذلك، تعدّ الأداة المهملة هذه القواعد غير مستخدمة، وحذفها يعطل القائمة.

تقرأ هذه الأداة سكربتاتك أيضًا. فهي تجمع كل نص فيها، حتى أجزاء نصوص القوالب. لذلك إذا ذكر سكربت is-open، تبقى قاعدة .menu.is-open مع علامة بدل الحذف.

البادئات مهمة أيضًا. مثلاً، السكربت الذي يبني btn--${state} يستطيع إنشاء أي صنف يبدأ بـ btn--. لذلك تبقى كل قاعدة لتلك الأصناف، وتشرح العلامة السبب.

روابط أطر العمل تلقى العناية نفسها. تفحص الأداة سمات الأصناف في Vue وAlpine وAngular، إضافة إلى سمات data والأحداث المضمنة. باختصار، تغطي الأماكن المعتادة التي تأتي منها الأصناف المخفية.

القائمة الآمنة لكل ما عدا ذلك

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

كل سطر يقبل اسم صنف، أو اسمًا مع نجمة، أو نمطًا بين خطين مائلين. لذلك يحفظ wp-* كل أصناف WordPress. كما يحفظ نمط مثل /^is-/ كل أصناف الحالة مرة واحدة.

الأصناف الزائفة والعناصر الزائفة والحالات

كثير من أدوات css غير المستخدم تخطئ هنا بالضبط. تبحث عن .card::after أو .menu summary::before، فلا تجد عنصرًا كهذا، فتعدّ القاعدة ميتة. لكن pseudo-element ينسّق جزءًا من عنصره. لذلك تُعد القاعدة مستخدمة ما دام العنصر موجودًا.

الحالات تعمل بالطريقة نفسها. عند تحميل الصفحة، لم يمرّر أحد الفأرة أو يركّز أو يحدد شيئًا بعد. لكن الزوار سرعان ما يمرّرون وينقرون. لذلك تُعد :hover و:focus و:checked هنا قابلة للوصول.

ومع ذلك، البنية مهمة. مثلاً، li:nth-child(4) في قائمة من ثلاثة عناصر لا يطابق أبدًا، لأن أي نقرة لا تضيف عنصرًا رابعًا. باختصار، تحتفظ الأداة فقط بما يمكن أن يطابق فعلاً.

حذف css غير المستخدم مع الحفاظ على تنسيقك

إيجاد القواعد الميتة نصف العمل فقط. النصف الآخر ملف نظيف يمكنك نشره. لذلك تقص هذه الأداة القواعد الميتة من نصك نفسه. ولا تعيد بناء ملف الأنماط.

تبقى تعليقاتك ومسافاتك وترتيبك. عندما يموت جزء فقط من قائمة محددات، يُحذف ذلك الجزء وحده. كما تحذف الأداة media queries الفارغة.

أنت تختار شكل النتيجة. اتركها مقروءة لمشروعك، أو اختر التصغير لنسخة أصغر. ثم انسخها، أو نزّلها بجانب تقرير CSV.

@keyframes وخطوط ومتغيرات ميتة

القواعد ليست الوزن الميت الوحيد. الحركة غير المستخدمة، والخط غير المستخدم، والخاصية المخصصة التي لا يقرؤها أحد، كلها تكلف بايتات أيضًا. لذلك تعرض الأداة كلاً منها تحت عنوانه الخاص.

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

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

اجلب صفحة حقيقية من عنوانها

أحيانًا لا تملك إلا عنوان الويب. عندئذٍ اكتبه، فيجلب هذا الموقع الصفحة وملفات أنماطها وسكربتاتها الخاصة. ثم يجري الفحص في متصفحك كالمعتاد.

الجلب حذر. يتبع مستوى واحدًا من @import، ويتخطى سكربتات المواقع الأخرى، ويتوقف عند حجم آمن. لذلك لا يضيع وقتك مدير وسوم أو أداة دردشة.

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

ما لا تستطيع الأداة معرفته

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

لذلك تعامل مع النتيجة كمراجعة كود. راجع القائمة، واحمِ ما تحتاجه، واختبر الملف النظيف على نسخة تجريبية. ولرأي ثانٍ، تعرض Coverage panel in Chrome DevTools ما استخدمته زيارة واحدة.