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 a name for this convention, and an ESLint plugin to enforce it.
Acronyms in Web APIs
| 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 |
100+ HTML* interfaces. 80+ SVG*. 50+ CSS*. 30+ each for GPU*, RTC*, and XR*.
Not Acronyms
Id is an abbreviation, not an acronym.The DOM uses getElementById, elementId, clientId.Similarly, the Internationalization API is Intl, not INTL.
Chaining
When two acronyms are adjacent, one gets titlecased.XMLHttpRequest should be XMLHTTPRequest by the convention's own logic, but XMLHTTP is where you lose the boundary.
The Web Crypto API titlecases all its acronyms for the same reason:
AESCBCParamsis writtenAesCbcParamsRSAOAEPParamsis writtenRsaOaepParams
WebRTC does the same selectively: RTCDtlsTransport, RTCRtpSender.But not always: RTCDTMFSender keeps DTMF uppercase.
The Convention
| acroCase | UpperACROCase | |
|---|---|---|
| Start | urlString | URLString |
| End | imageURL | ImageURL |
| Multiple | htmlToJSON | HTMLToJSON |
ESLint Plugin
npm install eslint-plugin-acrocase --save-dev{
"plugins": ["acrocase"],
"rules": {
"acrocase/acrocase": "error"
}
}Auto-fixable. Ships with a dictionary of 139 acronyms. Extensible:
{
"acrocase/acrocase": ["error", {
"acronyms": ["GCP", "NATS"]
}]
}