Loading…

حول مُجمِّل CSS هذا مُجمِّل ومنسِّق CSS عبر الإنترنت

هذه الصفحة مخصصة **لتجميل وتنسيق CSS**. الصق صفحة الأنماط الخاصة بك، اختر إجراء *التنسيق*، وحوِّل فوراً كود CSS الفوضوي المكون من سطر واحد إلى كود نظيف وقابل للقراءة. عندما تكون مستعداً للنشر في الإنتاج، يمكنك تبديل الإجراء إلى *التصغير* لإنشاء نسخة مضغوطة `.min.css`.

لماذا تستخدم مُجمِّل CSS هذا؟

  • تنسيق على غرار Prettier لـ CSS نظيف وقابل للقراءة
  • مسافة بادئة متسقة مع مسافات أو علامات تبويب قابلة للتكوين
  • يوسع CSS المصغَّر أو المكون من سطر واحد إلى هيكل واضح
  • وضع *تصغير* اختياري لضغط CSS بعد التنسيق
  • نسخ أو تحميل ورقة الأنماط المنسقة بنقرة واحدة
  • معالجة 100% من جانب العميل - الأنماط لا تغادر متصفحك أبداً

🛠️ كيفية تجميل CSS باستخدام هذه الأداة for css-beautifier

1

الصق أو ارفع CSS الخاص بك

📥 الصق CSS الخاص بك في المحرر أو أسقط ملف `.css`. تفتح الأداة في وضع **التنسيق**، المثالي للتجميل.

2

اختر نمط المسافة البادئة

📏 قم بتكوين المسافة البادئة باستخدام المسافات أو علامات التبويب، وضبط حجم المسافة البادئة (1-8). هذا يساعد في مطابقة نمط مشروعك أو قواعد `.editorconfig`.

3

تشغيل أداة التجميل

✨ انقر على **تنسيق**. يقوم المُنسق بتوسيع الكود المضغوط، وإضافة فواصل الأسطر، وتطبيق تباعد متناسق مع الحفاظ على بناء جملة CSS صالح.

4

تصغير اختياري للإنتاج

⚡ عندما تكون راضياً عن الكود المنسق، قم بتبديل الإجراء إلى **تصغير** لإنشاء نسخة مضغوطة للاستخدام في الإنتاج.

قواعد التنسيق والسلوك

المسافة البادئة والتخطيط

المنطق الأساسي يعكس مُنسق CSS على نمط Prettier عندما يتم ضبط الإجراء على *تنسيق*.

الإعدادالخياراتالافتراضي
المسافة البادئةمسافات (1-8) أو علامات تبويبمسافتان
الأقواس الحاصرةمحدد + سطر جديد + كتلة ذات مسافة بادئةكتل متعددة الأسطر
تخطيط الخاصيةخاصية واحدة في كل سطرنعم، لسهولة القراءة
الأسطر الفارغةموحدة بين كتل القواعديتم تقليم المسافات الزائدة
نهاية السطرLF (\n) أو CRLF (\r\n)التكوين عبر الإعدادات
يركز التنسيق على **التخطيط والمسافات البادئة فقط**. لا يعيد تسمية محددات CSS، ولا يعيد ترتيب القواعد، ولا يغير قيم الخصائص.

المحركات والأوضاع

تستخدم هذه الصفحة نفس المكون الأساسي لأداة تصغير CSS، لكنها تعطي أولوية لإجراء *التنسيق*.

الوضعالمحركالاستخدام الأساسي
تنسيقمُنسق على غرار PrettierCSS مقروء للبشر
تصغيرضاغط على غرار CSSOCSS مضغوط للإنتاج
على رابط **منسق CSS**، يكون التنسيق هو الإجراء الرئيسي. يُعرض التصغير كخطوة تالية مريحة بمجرد أن تبدو أنماطك نظيفة.

إرشادات الحجم والأداء

لتحقيق تجربة مستخدم سلسة، تفرض المنطق حدًا أقصى آمن لحجم النص (حوالي 2 ميجابايت) وحدًا أقصى للملفات في الواجهة (~5 ميجابايت).

حجم ورقة الأنماطتجربة التنسيقالتوصية
≤ 100 كيلوبايتتنسيق فوريمثالي للصفحات أو المكونات الفردية
100–300 كيلوبايتسريع جدًارائع للمشاريع المتوسطة أو أنظمة التصميم
300–500 كيلوبايتلا يزال مقبولاًفكر في تقسيم الحزم الكبيرة جدًا
> 500 كيلوبايتقد يشعر بأنه ثقيل في المتصفحيفضل استخدام أدوات CLI في خطوة البناء

بدائل سطر الأوامر لتنسيق CSS

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

Node.js

تنسيق CSS باستخدام Prettier

npx prettier --write "**/*.css"

يطبق نمط كود متناسق على جميع ملفات CSS.

Linux / 🍏 macOS / 🪟 Windows

التنسيق ثم التصغير عبر PostCSS

npx postcss style.css -o style.min.css -u autoprefixer cssnano

يجمع بين التطبيع الشبيه بالتنسيق والتصغير وإضافة البادئات الخاصة بالبائعين.

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

حالات استخدام عملية لجعل CSS جميلاً

تطوير الواجهة الأمامية وإعادة الهيكلة

اجعل CSS القديم أو التابع لجهات خارجية مقروءاً قبل إعادة الهيكلة.

  • توسيع CSS من سطر واحد أو مصغر من القوالب أو السمات القديمة
  • توحيد نمط الكود بين أعضاء الفريق
  • تصحيح مشاكل التخطيط بسهولة أكبر في CSS المنسق بشكل نظيف
/* قبل */ .btn{padding:0;margin:0;color:#fff}
/* بعد */
.btn {
  padding: 0;
  margin: 0;
  color: #fff;
}

تخصيص أنظمة إدارة المحتوى والسمات

اجعل أوراق الأنماط المجمعة جميلة قبل التخصيص.

  • تنظيف CSS لسمات WordPress أو Shopify للتحرير
  • مراجعة CSS من البائعين من مجموعات واجهة المستخدم أو القوالب
  • إضافة تعليقات وهيكلة للأنماط المصغرة سابقاً
/* مثال تجاوز السمة */
.navbar-brand {
  font-weight: 600;
  letter-spacing: 0.04em;
}

❓ Frequently Asked Questions

❓ماذا يفعل مُجمِّل CSS؟

يعيد مُجمِّل CSS تنسيق ورقة الأنماط الخاصة بك لتسهيل قراءتها وصيانتها. يضيف مسافات بادئة متسقة وفواصل أسطر ومسافات دون تغيير كيفية عرض CSS في المتصفح.

🧭ما الفرق بين التجميل (التنسيق) والتصغير هنا؟

التجميل (التنسيق) مخصص للبشر: فهو يوسع CSS المضغوط إلى هيكل مقروء. التصغير مخصص للآلات: فهو يضغط CSS لتسليم أسرع. في هذه الصفحة، *التنسيق* هو الإجراء الأساسي، مع توفر *التصغير* كخطوة نهائية اختيارية.

🔐هل يتم إرسال CSS الخاص بي إلى خادم؟

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

📏هل تقوم الأداة بالتحقق من صحة CSS أو تدقيقه؟

يتوقع المُنسِّق **بناء جملة CSS صالحاً** ويركز على التخطيط، وليس التدقيق. إذا كان الإدخال يحتوي على أخطاء بناء جملة خطيرة، فقد يطرح المحرك الأساسي خطأً بدلاً من إنتاج مخرجات.

🧪هل يمكنني استخدامه على CSS مصغر من شبكات توصيل المحتوى أو السمات التابعة لجهات خارجية؟

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

Pro Tips

Best Practice

احتفظ بنسخة **مُنسقة** من CSS في مستودعك وعامل النسخة المصغرة كمنتج بناء فقط.

Best Practice

محاذاة إعدادات المُنسق (مسافات مقابل علامات الجدولة، حجم المسافة البادئة) مع ملف `.editorconfig` لمشروعك لتجنب الاختلافات المزعجة.

Best Practice

بعد تنسيق CSS القديم، جمّع القواعد المتعلقة ببعضها وأضف تعليقات – سيوفر ذلك الوقت في إعادة الهيكلة المستقبلية.

Additional Resources

مرجع MDN لـ CSS
Documentation
MDN: تقنيات تحسين CSS
Documentation
مواصفات مجموعة عمل CSS
Documentation

Other Tools