How to dictate a kebab-case class name or CSS selector
Say “kebab case” followed by the words of the name and VoiceGem joins them with hyphens in lowercase: “kebab case max retry count” returns max-retry-count. The hyphen symbol will not do this — “max dash retry” returns max - retry with spaces, because the symbol entry is set for subtraction.
A seven-word selector line is about 8.1 seconds of typing against about 2.6 seconds of speech. (sources: Dhakal, Feit, Kristensson & Oulasvirta, “Observations on Typing from 136 Million Keystrokes”, CHI 2018, 168,000 participants, 136 million keystrokes; Yuan, Liberman & Cieri, “Towards an Integrated Understanding of Speaking Rate in Conversation”, Interspeech 2006, 2,438 American English telephone conversations (Switchboard corpus). The speech figure is conversational rate, not a measured dictation rate — no such measurement exists.)
primary-navigation-item {This tool runs entirely in your browser. Nothing you type is sent anywhere, stored, or logged.
Step by step
- 1
Say “kebab case” before the name
Speak the command, then the words. VoiceGem lowercases each word and joins the run with hyphens and no spaces.
- 2
Do not reach for “dash”
Avoid the hyphen symbol for names. The symbol entry attaches on neither side, so it produces a spaced hyphen suitable for subtraction and useless for an identifier.
- 3
End the run with a symbol
Say “open brace” or “colon” to stop the name. Any symbol phrase terminates the casing run, which is how a selector and its block are dictated in one sentence.
- 4
By hand
Type the hyphens directly. Web developers write kebab-case names constantly and the hyphen key is unmodified, so short names are faster typed.
The hyphen symbol cannot build a kebab-case name in VoiceGem
Attach flags are the reason. The hyphen entry attaches on neither side because its primary job is subtraction, so “max dash retry” returns max - retry and no amount of speaking it faster closes those spaces.
The casing command sidesteps the symbol table entirely. VoiceGem checks for a casing command before it checks symbols at each position, and a casing command joins its run with a separator chosen by style rather than by any table entry — which is how one mechanism produces four different separators for five styles.
Where the manual path breaks
The hyphen key is unmodified and a two-word class name is trivial to type. Web developers will not want to say anything for utility-first class names.
Long BEM-style names are the case that changes. A block-element-modifier name can run to six or seven words and as many hyphens, and every hyphen is a place to typo a selector that then silently matches nothing. Dictating it in VoiceGem produces the whole name from one command and the words you were going to say anyway.
Doing this somewhere else? casing converter, in one place, what changes for the camel case command, the constant case command, or the pascal case command.
Common questions
The hyphen symbol attaches on neither side, because its VoiceGem table entry is set for subtraction. Use the kebab casing command instead.
Say “minus minus” for the leading double hyphen, then “kebab case” and the words. The two mechanisms compose in one pass.
Yes. Every word in the run is lowercased before being joined with hyphens, which matches CSS and HTML attribute conventions.
Convert a BEM name between kebab and the other four styles.
Open the tool