kebab-case कन्वर्टर: CSS और URL फ़ॉर्मेटिंग टूल
किसी भी टेक्स्ट को तुरंत साफ़ kebab-case फ़ॉर्मैट में बदलें। चाहे आप CSS क्लास का नाम रख रहे हों, URL स्लग बना रहे हों, या HTML ID को फ़ॉर्मैट कर रहे हों, हमारा टूल वेब डेवलपमेंट के सबसे अच्छे तरीकों का पालन करते हुए आपके टेक्स्ट को अपने-आप सही kebab-case फ़ॉर्मैट में बदल देता है।
किसी भी टेक्स्ट को तुरंत 'kebab-case' में बदलता है — किसी भी फ़ॉर्मैट में कॉम्पोनेंट का नाम, पेज का टाइटल या वेरिएबल पेस्ट करें और CSS या URL के लिए लोअरकेस, हाइफ़न से अलग की गई स्ट्रिंग पाएँ।
यह डिफ़ॉल्ट रूप से URL-सेफ़ आउटपुट देता है: इसमें कोई स्पेस या स्पेशल कैरेक्टर नहीं होते और किसी एन्कोडिंग की ज़रूरत नहीं होती — इसके नतीजे को सीधे href, फ़ाइल पाथ या रूट डेफ़िनिशन में इस्तेमाल किया जा सकता है।
यह camelCase, snake_case, Title Case या फ़्री टेक्स्ट जैसे किसी भी फ़ॉर्मैट में इनपुट स्वीकार करता है और इनपुट को पहले से साफ़ किए बिना ही उन सभी को एक जैसे kebab-case में बदल देता है।
यह CSS क्लास नामों और HTML ID में अमान्य कैरेक्टर (जैसे ब्रैकेट, स्लैश, एम्परसैंड) को हटा देता है, ताकि आउटपुट बिना किसी बदलाव के CSS वैलिडेटर और ब्राउज़र ID लुकअप में पास हो सके।
यह एक्रोनिम्स (acronyms) को लोअरकेस शब्दों की तरह ट्रीट करके उन्हें हैंडल करता है। यह Tailwind और BEM जैसे बड़े CSS फ्रेमवर्क्स के व्यवहार से मेल खाता है, जो क्लास नेम के हिस्सों में सभी बड़े अक्षरों (all-caps) का इस्तेमाल करने से बचते हैं।
यह बिना किसी रेट लिमिट के पूरी तरह से ब्राउज़र में चलता है, और एक ही सेशन में कॉम्पोनेंट के नामों या रूट पाथ की पूरी लिस्ट को बदलने के लिए उपयुक्त है।
कैसे इस्तेमाल करें
अपना टेक्स्ट या क्लास का नाम डालें
अपने kebab-case रिज़ल्ट का प्रीव्यू देखें
वेब-रेडी टेक्स्ट कॉपी करें
वेब डेवलपमेंट
- CSS क्लास के नाम
- HTML ID
- फ़ाइल के नाम
- घटकों के नाम
URL का स्ट्रक्चर
- पेज स्लग
- रिसोर्स पाथ
- SEO-फ्रेंडली URL
- डायरेक्टरी के नाम
प्रोजेक्ट संगठन
- रिपॉज़िटरी के नाम
- पैकेज के नाम
- एसेट फ़ाइलें
- दस्तावेज़ीकरण
| मूल पाठ | परिणाम |
|---|---|
Main Header | main-header |
user_profile_image | user-profile-image |
Contact Form | contact-form |
वेब टेक्नोलॉजीज़
- CSS
- HTML
- Vue.js
- स्टैटिक साइट्स
बिल्ड टूल्स
- वेबपैक
- वाइट
- घूँट
- npm
BEM या यूटिलिटी-फर्स्ट आर्किटेक्चर में CSS क्लास के नाम रखते समय, कोई भी सेलेक्टर लिखने से पहले अपने कंपोनेंट के नामों को बदल लें — एक जैसा 'kebab-case' इस्तेमाल करने से अलग-अलग तरह के कन्वेंशन जमा नहीं होते, जिनकी वजह से बड़ी स्टाइलशीट में कुछ भी खोजना मुश्किल हो जाता है।
Next.js, Nuxt, या Astro में फ़ाइल-बेस्ड रूटिंग के लिए, पेज फ़ाइल के नाम URL में इस्तेमाल होने वाले 'kebab-case' स्लग से मेल खाने चाहिए — इसलिए फ़ाइल बनाने से पहले, सही फ़ाइल-नाम पाने के लिए अपने पेज के टाइटल को यहाँ कन्वर्ट कर लें।
रजिस्ट्री के नियमों के अनुसार, npm पैकेज के नाम 'kebab-case' में और सभी अक्षर छोटे (lowercase) होने चाहिए; नए पैकेज का नाम रखते समय इस टूल का इस्तेमाल करें ताकि बड़े अक्षरों (uppercase) या अंडरस्कोर के कारण पब्लिश करने में कोई गड़बड़ी न हो।
Vue और Svelte में, कस्टम कॉम्पोनेंट फ़ाइल के नाम आम तौर पर PascalCase में होते हैं, लेकिन HTML टैग में उन्हें kebab-case में इस्तेमाल किया जाता है — अपने PascalCase कॉम्पोनेंट के नाम को यहाँ बदलें ताकि आपको सही kebab-case टैग मिल सके, जिसका इस्तेमाल आप टेम्प्लेट में करेंगे।
GitHub रिपॉज़िटरी के नामों और Docker इमेज टैग के लिए, 'kebab-case' का इस्तेमाल आम तौर पर किया जाता है; इसके इस्तेमाल से उस अजीब URL-एनकोडिंग से बचा जा सकता है जो अलग-अलग टूल्स में स्पेस और अंडरस्कोर की वजह से कभी-कभी हो जाती है।
केबाब-केस स्लग को छोटा और जानकारी देने वाला रखें — /blog/how-to-use-git-rebase जैसे URL पाथ को इंसान और सर्च इंजन दोनों आसानी से पढ़ सकते हैं, जबकि /blog/htugrebase में कुछ कैरेक्टर तो कम हो जाते हैं, लेकिन इसे समझना मुश्किल हो जाता है।
CSS क्लास के नामों और URL में लगातार हाइफ़न (hyphens) का इस्तेमाल करने से बचें — ये CSS पार्सर और URL नॉर्मलाइज़र, दोनों को उलझन में डाल सकते हैं, और ये कई आस-पास वाले सेपरेटर (separators) वाले इनपुट से खराब कन्वर्ज़न का संकेत देते हैं।
अपने फ़ाइल सिस्टम के नाम रखने के तरीके (naming convention) को अपने URL के तरीके से मिलाएं — अगर आपके रूट्स 'kebab-case' वाले स्लग (slugs) हैं, तो आपकी पेज कॉम्पोनेंट फ़ाइलों को भी उसी पैटर्न का पालन करना चाहिए, ताकि डायरेक्टरी लिस्टिंग और रूट कॉन्फ़िग एक-दूसरे के साथ तालमेल में रहें।
npm पैकेज के लिए, पब्लिश करने से पहले रजिस्ट्री में अपने चुने हुए 'kebab-case' नाम वाले मौजूदा पैकेज की जाँच कर लें — रजिस्ट्री में नाम खोजने के लिए केस (बड़े या छोटे अक्षर) का फ़र्क नहीं पड़ता, लेकिन यह ओरिजिनल केसिंग को बनाए रखती है, इसलिए मिलते-जुलते नामों से कन्फ़्यूज़न हो सकता है।
Tailwind CSS में, आपके कॉन्फ़िगरेशन में कस्टम यूटिलिटी क्लास के नाम 'kebab-case' में होने चाहिए ताकि वे Tailwind के अपने कन्वेंशन से मेल खा सकें; Tailwind की इन-बिल्ट यूटिलिटीज के साथ snake_case या camelCase कस्टम यूटिलिटीज को मिलाने से ज़्यादातर एडिटर्स में ऑटो-कम्प्लीट का व्यवहार असंगत (inconsistent) हो जाता है।
अक्सर पूछे जाने वाले सवाल
हमारे टूल्स और सेवाओं के बारे में आम सवालों के जवाब पाएँ।
kebab-case को समझना
'kebab-case' का नाम उस दृश्य से आया है जिसमें शब्द हाइफ़न से एक साथ जुड़े होते हैं, ठीक वैसे ही जैसे कबाब की सींक पर सामग्री लगी होती है। 2000 के दशक की शुरुआत में वेब URL और CSS क्लास के नामों के लिए यह सबसे प्रचलित तरीका बन गया। इसकी एक वजह टिम बर्नर्स-ली के URL डिज़ाइन नोट्स थे, जिनमें आसानी से पढ़ने के लिए छोटे अक्षरों (lowercase) और हाइफ़न से अलग किए गए शब्दों का सुझाव दिया गया था। CSS1 के समय से ही CSS स्पेसिफिकेशन में आइडेंटिफ़ायर में हाइफ़न के इस्तेमाल की अनुमति रही है, और OOCSS तथा BEM जैसे तरीकों ने इस चलन को और मज़बूत किया, जो 2010 के आसपास काफ़ी प्रचलित हो गए थे।
इसका रोज़ाना सबसे आम इस्तेमाल CSS क्लास के नाम और Tailwind यूटिलिटी ओवरराइड लिखने में होता है। जब कोई डिज़ाइनर 'Primary Action Button' या 'Card Header Image' जैसे नामों वाला कोई कॉम्पोनेंट देता है, तो उन लेबल को सही CSS सेलेक्टर में बदलना पड़ता है। लेबल की लिस्ट को यहाँ पेस्ट करें, उसे kebab-case में बदलें और सीधे अपनी स्टाइलशीट या JSX className प्रॉप में पेस्ट कर दें। यह कन्वर्ज़न कुछ खास मामलों को भी ठीक करता है, जैसे कॉपी किए गए वेरिएबल के नाम से गलती से camelCase बन जाना; वरना ऐसी क्लास बन जाती जो सिर्फ़ कोटेड सेलेक्टर के साथ ही काम करती।
इसका दूसरा बहुत ज़्यादा इस्तेमाल URL स्लग बनाने में होता है। ब्लॉग पोस्ट के टाइटल, प्रोडक्ट के नाम और डॉक्यूमेंटेशन पेज की हेडिंग को साफ़ URL पाथ में बदलना होता है। जैसे, 'Getting Started with Next.js 14 & App Router' जैसे टाइटल को 'getting-started-with-nextjs-14-app-router' में बदलना होगा — जिसमें स्पेशल कैरेक्टर हटा दिए जाते हैं और हाइफ़न को सही फ़ॉर्मैट में रखा जाता है। यह SEO के लिए ज़रूरी है: Google का क्रॉलर हाइफ़न को शब्दों को अलग करने वाले निशान के तौर पर देखता है, इसलिए सही तरीके से बना 'kebab-case' स्लग टाइटल के हर शब्द के लिए कीवर्ड मैचिंग में मदद करता है।
कन्वर्टर के बिना, डेवलपर्स आमतौर पर एक लाइन का कोड इस्तेमाल करते हैं: title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')। यह साधारण ASCII इनपुट के लिए तो काम करता है, लेकिन एक्सेंट वाले कैरेक्टर (जैसे é, ü, ñ), एम-डैश (em-dashes) और वर्ड प्रोसेसर से कॉपी किए गए स्मार्ट कोट्स के मामले में बिना किसी एरर मैसेज के फेल हो जाता है। साथ ही, यह लगातार आने वाले नॉन-अल्फ़ान्यूमेरिक कैरेक्टर से बनने वाले हाइफ़न की सीरीज़ को भी ठीक से मैनेज नहीं करता है। यह टूल ऐसे मुश्किल मामलों को भी सही ढंग से हैंडल करता है।
kebab-case का इस्तेमाल इन जगहों पर ज़रूरी है या आम तौर पर किया जाता है: CSS क्लास के नाम और ID (हर जगह), HTML कस्टम एलिमेंट टैग के नाम (स्पेसिफिकेशन के अनुसार — इनमें हाइफ़न होना ज़रूरी है), SEO-ऑप्टिमाइज़्ड पाथ के लिए URL स्लग, npm पैकेज के नाम (रजिस्ट्री का नियम), टेम्प्लेट में Vue और Svelte कंपोनेंट टैग का इस्तेमाल, HTTP हेडर के नाम (Content-Type, Authorization, X-Request-Id), और ज़्यादातर स्टैटिक साइट जनरेटर (जैसे Jekyll, Hugo और Eleventy) में फ़ाइलों के नाम। JavaScript वेरिएबल डिक्लेरेशन और Python आइडेंटिफ़ायर में इसका इस्तेमाल नहीं किया जा सकता, क्योंकि वहाँ हाइफ़न को घटाने (subtraction) के तौर पर समझा जाता है।