ACROCase
Acronyms Consistently Retain Original Case
The web platform has hundreds of APIs that contain acronyms. With remarkable consistency, those acronyms are kept uppercase:innerHTML, XMLDocument, toJSON, encodeURIComponent. ACROCase is simply a name for the convention that already exists.
The Evidence
Across the DOM, CSS Object Model, and every major browser API, acronyms retain their original casing. This pattern holds whether the acronym appears at the start, middle, or end of an identifier.
| Acronym | Web platform APIs |
|---|---|
| HTML | HTMLElement, HTMLCollection, innerHTML, outerHTML |
| CSS | CSSStyleSheet, CSSRule, CSSStyleDeclaration |
| DOM | DOMParser, DOMRect, DOMTokenList, DOMException |
| SVG | SVGElement, SVGPathElement, SVGRectElement |
| URL | URL, URLSearchParams, URLPattern, createObjectURL |
| URI | encodeURI, decodeURI, encodeURIComponent |
| JSON | JSON.parse(), JSON.stringify(), toJSON |
| XML | XMLDocument, XMLSerializer, XMLHttpRequest |
| GPU | GPUDevice, GPUBuffer, GPUTexture, GPUAdapter |
| RTC | RTCPeerConnection, RTCDataChannel, RTCSessionDescription |
| IDB | IDBDatabase, IDBObjectStore, IDBTransaction |
| USB | USB, USBDevice, USBConfiguration |
| HID | HID, HIDDevice, HIDConnectionEvent |
| MIDI | MIDIAccess, MIDIInput, MIDIOutput |
| GATT | BluetoothRemoteGATTServer, BluetoothRemoteGATTService |
| BYOB | ReadableStreamBYOBReader, ReadableStreamBYOBRequest |
| VTT | VTTCue, VTTRegion |
| XR | XRSystem, XRSession, XRFrame |
| DTMF | RTCDTMFSender, RTCDTMFToneChangeEvent |
This is not a handful of cherry-picked examples. There are over a hundred HTML*Element interfaces, over eighty SVG* interfaces, over fifty CSS* interfaces, and over thirty each for GPU*, RTC*, and XR*. The pattern is the default, not the exception.
Abbreviations That Are Not Acronyms
Not everything short is an acronym. The web platform draws a clear line between acronyms (which stay uppercase) and abbreviations (which follow normal casing).
Id
Id is an abbreviation for "identifier," not an acronym. The DOM uses it consistently: getElementById, elementId, clientId, requestId. Writing userID is wrong by web platform convention.
Intl
The Internationalization API is Intl, not INTL. It follows normal PascalCase as an abbreviation, not an acronym.
Where the Web Platform Disagrees with Itself
The convention is not perfectly consistent. There is one major area where it breaks down: the Web Crypto API.
AES, RSA, HMAC, and SHA are universally recognized as acronyms. But the Web Crypto API titlecases all of them:
AesCbcParams, notAESCBCParamsRsaOaepParams, notRSAOAEPParamsHmacKeyGenParams, notHMACKeyGenParams
WebRTC does something similar with sub-protocol names:
RTCDtlsTransport, notRTCDTLSTransportRTCRtpSender, notRTCRTPSenderRTCSctpTransport, notRTCSCTPTransport
The reason is chaining. When two acronyms appear next to each other, the boundary between them disappears. AESCBC is hard to read.RTCDTLS is worse. Both the Crypto and RTC teams chose to titlecase acronyms that would otherwise chain, sacrificing acronym casing for readability.
This is a pragmatic tradeoff, not a rejection of the convention. The Crypto API titlecases all its acronyms for internal consistency, even when chaining is not an issue (like AesKeyGenParams, which could have been AESKeyGenParams without any readability problem). Meanwhile, RTCPeerConnection keeps RTC uppercase because it does not chain with the next word.
The lesson: avoid putting acronyms next to each other. When that is unavoidable, titlecasing the second acronym is the established precedent.
The Convention
ACROCase is camelCase with one rule: known acronyms keep their uppercase form.
| acroCase | UpperACROCase | |
|---|---|---|
| Acronym at start | urlString | URLString |
| Acronym at end | imageURL | ImageURL |
| Multiple acronyms | htmlToJSON | HTMLToJSON |
When an acronym starts a camelCase identifier, it is lowercased like any other first word: urlString, httpRequest, jsonData. In UpperACROCase (PascalCase with acronyms), it stays uppercase: URLString, HTTPRequest, JSONData.
ESLint Plugin
eslint-plugin-acrocase enforces the convention automatically:
npm install eslint-plugin-acrocase --save-dev{
"plugins": ["acrocase"],
"rules": {
"acrocase/acrocase": "error"
}
}The rule is auto-fixable. It ships with a dictionary of 139 acronyms sourced from web platform APIs and common programming usage. Add project-specific acronyms through configuration:
{
"acrocase/acrocase": ["error", {
"acronyms": ["GCP", "NATS"]
}]
}If you use ESLint's built-in camelcase rule, disable it. It enforces lowercase acronyms, which contradicts the web platform.