مُنسِّق CSS

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

يقتصر تصغير هذه الأداة على إزالة المسافات البيضاء والتعليقات — الأجزاء من ورقة الأنماط الموجودة فقط من أجل إنسان يقرأها ولا تحمل أي معنى لمحرك عرض المتصفح. لا تدمج عمدًا المحددات المكررة، ولا تُعيد ترتيب التصريحات، ولا تختصر قيم الألوان مثل إعادة كتابة `#ffffff` إلى `#fff`، رغم أن مُصغِّرًا أكثر عدوانية قد يفعل الثلاثة وينتج ملفًا أصغر. تلك التحويلات يمكن أن تُغيِّر السلوك بطرق يسهل تفويتها: دمج قاعدتين بنفس المحدد لكن مكتوبتين في نقطتين مختلفتين من التسلسل يمكن أن يُغيِّر أي تصريح يفوز عند التعارض، وإعادة ترتيب التصريحات تحمل نفس الخطر. إزالة المسافات البيضاء وحدها لا تحمل ذلك الخطر — لا يمكنها تغيير ما يعرضه المتصفح، فقط عدد البايتات اللازمة لوصفه.

تضغط خوادم الويب تقريبًا عالميًا موارد النص بـgzip أو brotli قبل إرسالها عبر الشبكة، وكلتا خوارزميتي الضغط جيدتان جدًا في استغلال بالضبط نوع التكرار الذي تُمثِّله المسافات البيضاء والمسافة البادئة المتسقة — تسلسلات متكررة من المسافات تُضغَط بالفعل بشكل ممتاز. هذا يعني أن الفجوة بين ورقة أنماط مُنسَّقة وأخرى مُصغَّرة، بمجرد أن تمر كلتاهما عبر gzip، أصغر بكثير مما يُوحي به فرق الحجم غير المضغوط. لا يزال التصغير يساعد، خاصة بإزالة التعليقات مباشرة بدلًا من مجرد ضغطها، لكن يستحق معرفة أن معظم فائدة نقل الشبكة التي تعد بها الأداة الحديثة تأتي من الضغط، ويُسهم تصغير CSS بطبقة إضافية أصغر فوق ذلك.

تنسيق ملف Sass أو Less يعني تطبيق مسافة بادئة وتباعد متسقين على الكود المصدري بالضبط كما هو مكتوب — التداخل والمتغيرات والمزائج وتوجيهات التحكم تبقى سليمة، بصيغة معالج ما قبل المعالجة الأصلية. هذه عملية مختلفة تمامًا عن التحويل، الذي يحل المتغيرات إلى قيمها الفعلية، ويُسطِّح المحددات المتداخلة إلى قواعد CSS مسطحة مستقلة، وينفذ أي مزيج لإنتاج إخراجه الموسَّع. أي شخص يتوقع CSS مُحوَّلًا من إدخال SCSS سيتفاجأ برؤية نفس الكود المصدري المتداخل والمليء بالمتغيرات مُنسَّقًا بدلًا من مُحلولًا — هذه الأداة مُنسِّق للغة معالج ما قبل المعالجة، لا مُحوِّل لها.