كيف يعمل تجميل CSS؟
يقرأ المُجمِّل ورقة أنماطك حرفاً حرفاً، يتتبع عمق تداخل كل كتلة، ثم يُعيد إصدارها بمسافات بادئة متسقة. لا يغير أبداً ما تفعله الأنماط — فقط طريقة ظهورها في الملف.
- التقسيم إلى رموز. تمسح المكتبة مدخلاتك وتحوّله إلى سلسلة من الرموز: المحدّدات وأسماء الخصائص والقيم والقواعد المصوَّرة والتعليقات والأقواس والنقطتين والفاصلات المنقوطة الفاصلة بينها. تُعامَل السلاسل النصية وقيم url() بوصفها وحدات متكاملة، فلا يُخطأ في قوس داخل خاصية المحتوى بحسبانه حدّ كتلة.
- تتبُّع التداخل. أثناء سير المُجمِّل في سلسلة الرموز يحتفظ بمستوى المسافة البادئة الجاري. كل قوس فاتح يزيد المستوى درجة، سواء أكان يخص كتلة قاعدة أم استعلام وسائط أم كتلة keyframes، وكل قوس إغلاق يُعيده درجة. هذا العمق يحدد عدد وحدات المسافة البادئة أمام كل سطر في الناتج.
- تطبيق خياراتك. يحدد اختيار المسافة البادئة (مسافتان أو 4 مسافات أو مسافة جدولة) عرض كل مستوى. يقرر إعداد أسلوب الأقواس إما أن يلتصق القوس الفاتح بالمحدّد الذي يسبقه أو ينزل إلى سطر خاص به. تُضيف خيارات أخرى سطراً فارغاً بين كتل القواعد وتفصل المحدّدات المتجمّعة على أسطر منفصلة.
- إعادة الإصدار. أخيراً، يطبع المُنسِّق الرموز مرةً أخرى مع المسافات البادئة وفواصل الأسطر التي حدّدها، مع وضع تصريح واحد في كل سطر ومسافة واحدة بعد كل نقطتين. النتيجة هي ورقة الأنماط ذاتها مُرتَّبة ترتيباً يُيسِّر على الإنسان تصفّح التتالي.
لماذا نُجمِّل CSS؟
- قراءة أوراق الأنماط المُصغَّرة. يُشحن CSS الإنتاجي في سطر واحد دون مسافات بين القواعد. يستعيد التجميل فواصل الأسطر والمسافات البادئة حتى تتمكن من العثور على المحدّد وراء خطأ في التخطيط ورؤية التصريحات التي يضبطها بالضبط، حتى في غياب خريطة المصدر.
- تنظيم الملفات غير المتسقة. ورقة الأنماط التي لمسها أشخاص متعددون تنزلق نحو مسافات بادئة متخلطة وأساليب أقواس متباينة. مرور واحد عبر المُجمِّل يوحّد الملف بأكمله في تخطيط واحد، فيُظهر الفرق التالي تغييرات تتالي حقيقية لا ضجيج المسافات.
- هذه الأداة لا تُثقل صفحتك. تحمّل معظم المُنسِّقات أونلاين مكتبتها بالكامل فور فتح الصفحة. هذه الأداة تُحمِّل js-beautify بشكل كسول فقط حين تنقر على تجميل أو تُشغّل الوضع المباشر، فيكون تحميل الصفحة الأول بضعة كيلوبايتات لا بضع مئات، ويظل التصيير الأولي سريعاً.
- لا شيء يغادر متصفحك. يعمل المُجمِّل كلياً على جهازك. لا تُرفع ورقة أنماطك إلى أي خادم، وهذا مهم حين تكون ورقة الأنماط التي تفحصها ملكاً لعميل، أو تحمل أسماء فئات داخلية، أو تخضع لاتفاقية سرية.
التطبيقات الشائعة
يظهر تجميل CSS في كل مرة يحتاج فيها أحد إلى قراءة ورقة أنماط لم تُكتب أصلاً لتُقرأ.
- تصحيح الإنتاج: الصق ورقة أنماط مُصغَّرة مسحوبة من تبويب الشبكة للعثور على القاعدة التي تتجاوز التخطيط المتوقع.
- تجهيز مراجعة الشيفرة: أعد تنسيق ورقة أنماط مساهم بمسافات بادئة غير متسقة قبل فتح طلب السحب حتى يرى المراجعون تغييرات التتالي لا اضطراب التخطيط.
- التعلم والتدقيق: وسّع ورقة أنماط إطار عمل أو مكتبة مكوّنات لدراسة كيفية بناء محدّداتها واستعلامات وسائطها وخصائصها المخصصة.
مثال عملي
خذ سطراً مضغوطاً: a{color:red;margin:0}b{padding:0}. الصقه أعلاه بمسافة بادئة مضبوطة على مسافتين وأسلوب الأقواس "مضغوط"، ثم انقر تجميل. ستحصل على كتل مقروءة: a { في سطرها الخاص، وتصريحا color: red; وmargin: 0; كلٌّ في مستوى أعمق بمسافة بادئة، والقوس المغلق مصطفاً تحت المحدّد، وقاعدة b تلي أسفله. بدِّل أسلوب الأقواس إلى "موسَّع" وسينزل كل قوس فاتح إلى سطره الخاص. بدِّل المسافة البادئة إلى مسافة جدولة وسيتحوّل كل مستوى من مسافتين إلى محرف جدولة. الأنماط متطابقة؛ ما يتغير فقط هو التخطيط.
FAQ
هل يُشغَّل هذا في متصفحي؟
نعم. تُحمَّل مكتبة js-beautify بشكل كسول في المرة الأولى التي تنقر فيها على تجميل أو تُفعِّل الوضع المباشر، ثم تُخزَّن. ورقة أنماطك لا تغادر الصفحة — لا رحلة إلى خادم ولا أي رفع.
هل التجميل هو نفسه إلغاء الضغط؟
يستعيد التنسيق القابلية للقراءة — المسافات البادئة وفواصل الأسطر والمسافات — لكنه لا يستطيع إعادة التعليقات التي حذفها التصغير أو استرداد أي بنية لم تكن في الملف أصلاً. يُعيد تنسيق التصريحات والمحدّدات الموجودة فحسب.
هل يغير التجميل طريقة تصيير أنماطي؟
لا. التجميل يُضيف ويحذف المسافات وفواصل الأسطر فحسب؛ التتالي لا يُمسّ والصفحة تُصيَّر بصورة مطابقة. ترتيب الخصائص والخصوصية والقيم تبقى تماماً كما كتبتها.
ماذا تعني خيارات أسلوب الأقواس؟
"مضغوط" يُبقي القوس الفاتح على السطر ذاته مع المحدّد (a {)، وهو الأسلوب الشائع في CSS. "موسَّع" يُنزل كل قوس فاتح إلى سطره الخاص أسفل المحدّد. تتحكم خيارات السطر الفارغ والمحدّد الواحد في كل سطر في التباعد بين القواعد وكيفية تخطيط المحدّدات المتجمّعة كـ h1, h2, h3.
يمنحك تجميل CSS من جانب المتصفح ورقة أنماط مقروءة دون خطوة بناء أو رفع. الصق ملفاً مُصغَّراً أو غير منظَّم، اختر المسافة البادئة وأسلوب الأقواس، ثم انسخ الناتج أو نزّله. لا شيء يغادر جهازك، ولا حساب مطلوب، والمكتبة لا تُحمَّل إلا حين تطلبها — فتحميل هذه الصفحة يكلّفك بضعة كيلوبايتات لا ميغابايت.