Skip to main content

مُحَوِّل الكيباب-كيس تحويل النص إلى تنسيق كيباب-كيس لاستخدامه في فئات CSS وروابط URL وأسماء الملفات.

مُحَوِّل الكيباب-كيس illustration
📝

مُحَوِّل الكيباب-كيس

تحويل النص إلى تنسيق كيباب-كيس لاستخدامه في فئات CSS وروابط URL وأسماء الملفات.

1

أدخل النص

اكتب أو ألصق النص لتحويله إلى صيغة kebab-case.

2

عرض النتيجة

انظر الناتج بحروف منخفضة وفصل بين الكلمات باستخدام شرطة تحتية على الفور.

3

نسخ واستخدام

انسخ لاستخدامه في فئات CSS أو عناوين URL أو أسماء الملفات.

Loading tool...

What Is مُحَوِّل الكيباب-كيس?

مُحَوِّل الحالة الكبابیة يُغيّر النص إلى صيغة الحالة الكبابیة، حيث تكون جميع الحروف بحجم الصغير ويفصل بين الكلمات شرطات. تعتبر الحالة الكبابیة الاتفاقية القياسية لتسمية الصفوف في CSS والسمات في HTML ومسارات URL وأسماء حزم npm وأسماء الملفات في العديد من الإطارات. أمثلة: "Hello World" يصبح "hello-world"، و "backgroundColor" يصبح "background-color". جاءت التسمية من الشبه بين الكلمات على شكل شرطة، مثل الأشياء على سيخ کباب.

Why Use مُحَوِّل الكيباب-كيس?

  • المعيار لفئات الأسماء والخصائص المخصصة في CSS
  • التنسيق المطلوب لأسماء المسارات في معظم الإطارات العمل للويب
  • يستخدم لاسم حزم npm وأسماء الفروع في Git
  • أكثر التنسيقات قراءة لمعرفات الكلمات المتعددة في سياق الويب
  • يتعامل مع التحويل من أي تنسيق إدخال

Common Use Cases

فئات CSS

تنسيق أسماء الفئات وفقًا لأحكام التسمية القياسية في CSS أو BEM.

مسارات URL

إنشاء مسارات URL ودودة مع محركات البحث من عناوين الصفحات أو عناوين المحتوى.

حزم npm

تنسيق أسماء الحزم وفقًا لاتفاقية kebab-case في npm.

تسمية الملفات

تسمية الملفات بتركيب kebab-case لأطر العمل Angular و Vue وأطر عمل مكونات أخرى.

Technical Guide

يتبع تحويل الحالة الكبابیة نفس خوارزمية تقسيم الكلمات مثل الحالة الثعبانية ولكن يجمع الكلمات بشرطات بدلاً من الشرطات السفلية. يتم تقسيم الإدخال على المسافات البيضاء والشرطات السفلية والنقاط والشرطات الموجودة وانتقالات الحالة. تُحَوَّل جميع الكلمات إلى أحرف صغيرة وتُلحق بشرطات مفردة. يتم压缩 الشرطات المتتالية وإزالة الشرطات الرائدة والمؤخرة. يتعامل الخوارزمية بشكل صحيح مع إدخال camelCase ("backgroundColor" → "background-color")، و PascalCase ("PageTitle" → "page-title")، والتنسيقات الم مختلطة. يُلاحظ أن معرفات الحالة الكبابیة لا يمكن استخدامها مباشرة كأسماء متغير في معظم لغات البرمجة لأن الشرطة هي عامل الطرح.

Tips & Best Practices

  • 1
    الخصائص في CSS هي بحروف منخفضة وفصل بين الكلمات باستخدام شرطة تحتية: لون الخلفية، حجم الخط، نصف قطر الحدود
  • 2
    استخدم طريقة BEM مع شرطتين وشرطة سفلية مزدوجة: block__element--modifier
  • 3
    مسارات URL بتركيب kebab-case مفضلة لمحركات البحث أكثر من الشرطات أو camelCase
  • 4
    في لغة JavaScript، يمكن الوصول إلى الخصائص بتركيب kebab-case باستخدام تنسيق القوسين: obj["my-prop"]
  • 5
    يستخدم Angular تركيب kebab-case للمحددات المكونة (app-user-profile)

Related Tools

Frequently Asked Questions

Q ما هو kebab-case؟
استخدام جميع الحروف الصغيرة مع شرطات بين الكلمات: my-variable، page-title، nav-bar-item.
Q لماذا لا أستطيع استخدام تركيب kebab-case لمتغيرات JavaScript؟
الشرطات تُفسر كعامل الطرح في لغة JavaScript. استخدم تنسيق القوسين (obj["my-key"]) أو camelCase بدلاً من ذلك.
Q هل تركيب kebab-case أفضل من snake_case لمسارات URL؟
تعامل جوجل مع الشرطات كفاصل للكلمات وليس الشرطات السفلية، لذلك يفضل استخدام تركيب kebab-case لمحركات البحث في مسارات URL.
Q ماذا عن الخصائص المخصصة في CSS؟
الخصائص المخصصة في CSS (المتغيرات) تستخدم تركيب kebab-case مع بادئة --: --primary-color، --font-size-large.
Q كيف يرتبط BEM بتركيب kebab-case؟
يستخدم BEM (Block Element Modifier) تركيب kebab-case كقاعدة له، مع __ للعناصر و -- للمعديلات.

About This Tool

مُحَوِّل الكيباب-كيس is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.