لماذا بحاجة إلى تنسّق كود CSS؟
كود CSS القادم من أداة ضغط أو منسوخ من مصدر خارجي غالبًا يكون في سطر واحد طويل من غير أي مسافات، وهذا يصعّب تتبع القواعد (Rules) والخصائص داخل كل Selector. التنسيق يفصل كل خاصية بسطر مستقل ويرتب الأقواس، فتقدر تقرا الكود وتعدّله بسهولة من دون أن تضيع وسط نص متكدس.
بنية CSS الذي تخلي التنسيق أوضح
بنية CSS بسيطة: كل قاعدة تتكون من Selector يليه قوس مفتوح { وثم مجموعة خصائص، كل واحدة على شكل property: value; وقوس مغلق } في النهاية. أكثر ما يصعّب القراءة هي كتابة كل الخصائص في سطر واحد أو نسيان الفاصلة المنقوطة بعد القيمة. الأداة ترتب كل قاعدة في سطر منفصل وتضع مسافة بادئة موحدة لكل خاصية داخل القوسين، فتقدر تلاحظ فورًا إذا ناقص قوس أو فاصلة منقوطة قبل أن الكود يوصل للمتصفح.
خطوات التنسيق
الأداة ترتب الكود فورًا:
افتح أداة منسق CSS
افتح الأداة من صفحة الأدوات مباشرة.
الصق كود CSS
الصق الكود الذي يريد تنسّقه في مربع الإدخال.
خلي الأداة تنسّقه
الأداة ترتب الخصائص والأقواس بمسافات بادئة واضحة تلقائيًا.
انسخ النتيجة
انسخ الكود المنسّق الجاهز أو حمّله كملف.