camelCase وsnake_case وkebab-case: أيّها تستخدم

أنماط camelCase وsnake_case وkebab-case تتعلق في الأغلب بمكان وجود الاسم. تستخدم JavaScript وJava نمط camelCase (firstName)، وتستخدم Python وRuby وSQL نمط snake_case (first_name)، وتستخدم CSS وسمات HTML والروابط نمط kebab-case (first-name). اتبع عُرف اللغة ودليل أسلوب فريقك. ولتحويل النص بين الأنماط، تغطي معظم العمل في متصفحك أداة تحويل حالة الأحرف المجانية ومولّد slug المجاني للروابط.

نظرة سريعة على camelCase وsnake_case وkebab-case

النمط	المثال	أين تراه
camelCase	userFirstName	متغيرات ودوال JavaScript وTypeScript، وطرق Java، وبيانات JSON من كثير من واجهات الويب البرمجية
PascalCase	UserFirstName	أسماء الأصناف في معظم اللغات، ومكونات React، ودوال C#
snake_case	user_first_name	متغيرات ودوال Python، وRuby، وأسماء أعمدة SQL، وكثير من واجهات JSON البرمجية
SCREAMING_SNAKE_CASE	USER_FIRST_NAME	الثوابت في لغات كثيرة، ومتغيرات البيئة
kebab-case	user-first-name	خصائص CSS وأسماء الفئات فيه، وسمات HTML، والروابط، وأسماء الملفات، ومفاتيح أوامر CLI

تأتي الأسماء من شكلها: ينتج camelCase من "نتوءات" الحروف الكبيرة، ويرقد snake_case مسطحًا على الشرطات السفلية، وتُنظم كلمات kebab-case على الشرطات الوسطى كأنها على سيخ.

حسب اللغة

JavaScript وTypeScript. المتغيرات والدوال بنمط camelCase (getUserName)، والأصناف ومكونات React بنمط PascalCase (UserCard)، والثوابت غالبًا بنمط SCREAMING_SNAKE_CASE (MAX_RETRIES). وتلتزم الدوال المدمجة في اللغة نفسها بهذا، مثل getElementById وtoLowerCase.

Python. يستخدم PEP 8، دليل أسلوب Python، نمط snake_case للدوال والمتغيرات وأسماء الوحدات، ونمط CapWords (أي PascalCase) للأصناف، والأحرف الكبيرة مع الشرطات السفلية للثوابت. وكتابة getUserName في Python تعمل، لكنها ستبدو غريبة لكل مطوّر Python يقرؤها.

CSS وHTML. خصائص CSS بنمط kebab-case (background-color وfont-size)، وتتبعها معظم أنظمة تسمية الفئات (.nav-item و.card-title). وسمات HTML من نوع data- بنمط kebab-case أيضًا، ويحوّلها المتصفح لتستخدمها JavaScript: يصبح data-user-id هو element.dataset.userId. وهذا السطر الواحد يلخّص سبب وجود النمطين معًا.

SQL وقواعد البيانات. عادةً ما تكون أسماء الأعمدة والجداول بنمط snake_case (created_at وorder_items). وتحوّل قواعد بيانات كثيرة الأسماء غير المحاطة بعلامات اقتباس إلى حالة واحدة، لذا قد يتحول createdAt بهدوء إلى createdat ما لم تضعه بين علامات الاقتباس في كل مرة. ويتفادى snake_case هذه المشكلة.

الروابط وأسماء الملفات. استخدم kebab-case. توصي إرشادات Google لبنية الروابط بالشرطة الوسطى بدلًا من الشرطة السفلية للفصل بين الكلمات، لأن الشرطة الوسطى تحدد حدود الكلمات بوضوح. كما أن الأحرف الصغيرة تتفادى الروابط المعطوبة على الخوادم التي تعامل About.html وabout.html كملفين مختلفين. اطّلع على ما هو slug في الرابط وأفضل ممارسات روابط slug.

JSON وواجهات API. لا توجد قاعدة واحدة. تستخدم كثير من واجهات API التي تركّز على JavaScript نمط camelCase، ويُرجع كثير من الخوادم الخلفية المبنية بـ Python أو Ruby نمط snake_case. اختر نمطًا واحدًا لكل واجهة، ولا تخلط بينهما أبدًا في الاستجابة نفسها.

أيها أسهل في القراءة؟

الأنماط الثلاثة سهلة القراءة متى اعتدت عليها. وهذه بعض الفروق العملية:

• يحتفظ snake_case وkebab-case بفاصل واضح بين الكلمات، وهذا يساعد في الأسماء الطويلة والاختصارات (html_parser مقابل htmlParser مقابل HTMLParser).
• camelCase أقصر ولا يحتاج إلى أحرف إضافية.
• لا يمكن استخدام kebab-case في أسماء المتغيرات في معظم اللغات، لأن user-name تُقرأ كأنها "user minus name".
• النقر المزدوج يحدد اسمًا كاملًا بنمط snake_case أو camelCase في معظم المحررات، لكنه يتوقف عادةً عند الشرطات في kebab-case.

القاعدة الحقيقية هي الاتساق. فالملف الذي يخلط بين userName وuser_name وUserName أصعب في القراءة من أي نمط واحد مستخدم في كل مكان.

التحويل بين الأنماط

ستحتاج إلى التحويل عند نقل البيانات بين الطبقات: أن يصبح created_at في واجهة Python API هو createdAt في JavaScript، أو أن يصبح عنوان الصفحة رابطًا، أو أن يصبح اسم إعداد متغيرًا في البيئة.

للتحويل إلى kebab-case أو snake_case: استخدم مولّد slug. الصق الكلمات، اسمًا في كل سطر، واختر شرطات (-) لنمط kebab-case أو شرطات سفلية (_) لنمط snake_case. يحوّل المولّد كل شيء إلى أحرف صغيرة، ويحوّل الحروف المُعلَّمة إلى حروف عادية، ويحذف الرموز. ويعامل أي رمز كفاصل بين الكلمات، فيصبح user_first_name هو user-first-name والعكس صحيح. لكنه لا يفصل camelCase، فـ userFirstName تصبح userfirstname. ضع مسافات بين الكلمات أولًا.

للتحويل إلى SCREAMING_SNAKE_CASE. أنشئ نسخة snake_case في مولّد slug، ثم الصقها في أداة تحويل حالة الأحرف المجانية واضغط أحرف كبيرة. وفي الاتجاه المعاكس، يحوّل أحرف صغيرة الكلمة MAX_RETRIES إلى max_retries.

للتحويل إلى camelCase أو PascalCase. لا يوجد زر بنقرة واحدة. أسرع طريقة: اكتب الكلمات مع مسافات، ثم اضغط أول حرف كبير لكل كلمة في أداة تحويل حالة الأحرف (فتصبح user first name هي User First Name)، ثم احذف المسافات لتحصل على PascalCase، واجعل الحرف الأول صغيرًا لتحصل على camelCase.

أسماء كثيرة دفعة واحدة، داخل الكود. عند إعادة تسمية كبيرة، استخدم البحث والاستبدال في محررك مع تعبير نمطي. اختبر النمط أولًا في أداة اختبار التعبيرات النمطية المجانية: مثلًا، يجد _([a-z]) كل شرطة سفلية تليها حرف، أي الموضع الذي يحتاج فيه snake_case إلى حرف كبير في camelCase. وتستطيع محررات كثيرة تحويل الحرف الملتقط إلى حرف كبير داخل الاستبدال؛ راجع وثائق محررك لمعرفة الصيغة.

أمور تنتبه إليها أثناء التحويل

• الاختصارات. قرّر هل هو userId أم userID، وHtmlParser أم HTMLParser، والتزم بالخيار الذي اخترته.
• الأرقام. يتحوّل address_line_2 بسلاسة، وaddressLine2 سليم أيضًا؛ فقط لا تُسقط الرقم.
• الأسماء العامة. إعادة تسمية حقل JSON أو رابط تُفسد على من يستخدمه عمله. أضف إعادة توجيه للروابط، واترك أسماء الحقول القديمة تعمل لفترة في واجهات API.

حوّل نصك

استخدم أداة تحويل حالة الأحرف المجانية للأحرف الكبيرة والصغيرة وأول حرف كبير لكل كلمة، ومولّد slug لـ kebab-case وsnake_case. يعمل الاثنان في متصفحك، ولا يغادر أي نص تلصقه جهازك.