تصغير CSS
أوراق أنماط أصغر والتصميم نفسه

ما هو تصغير CSS؟

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

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

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

التصغير الآمن يعني معرفة ما يحتاجه المحلل. ويُعد مرجع MDN لبناء جملة CSS أقصر وصف صادق لذلك.

أين تكسر معظم الأدوات CSS بصمت

ثلاثة فخاخ تسبب معظم الضرر، والأداة المبنية على البحث والاستبدال تقع فيها كلها. أولًا، يحتاج `calc(100% - 20px)` إلى المسافات حول علامة الطرح. احذفها وسيتجاهل المتصفح التصريح كله، فينهار التخطيط دون أي خطأ.

ثانيًا، يحدد `.card .title` و`.card.title` عناصر مختلفة. فهذا الفراغ هو محدد السلالة، وله معنى. ثالثًا، يحمل data URI داخل `url()` فواصل منقوطة وفواصل ليست فواصل على الإطلاق.

تقرأ هذه الأداة ورقة الأنماط حرفًا حرفًا، لذلك تعرف أي فراغ تنظر إليه. ونتيجة لذلك تحذف المسافات التي لا تعني شيئًا وتترك المسافات ذات المعنى.

متى تصغّر CSS

صغّر في النهاية، بعد البناء وبعد الاختبارات. احتفظ بالورقة المقروءة في محررك وانشر الصغيرة، لأنه لا ينبغي لأحد أن يعدّل ملفًا مصغّرًا يدويًا أبدًا.

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

وماذا عن CSS غير المستخدم؟

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