Javascript & Test Binding Conventions

In order to maintain separation of concerns in our views between JS, CSS, and our test suite, we use separate selector conventions.

This allows our HTML to be readable without the need to reference other dependent files to understand how they're interconnected. Additionally it allows us to change layout and appearance within HTML without needing to update tests or JS bindings, keeping our diffs small.

Type	Description	Example Selector
CSS	Reference with HTML classes	.sage-btn
JS	Bound to data attr prepended by data-js-...	[data-js-datepicker="data"]
Tests	References data attr prepended by data-test-...	[data-test-datepicker="id"]

Note: Data attribute values are optional and used to pass additional data or a unique identifer.

---

Example Usage

<a href="#" class="sage-btn" data-js-datepicker data-test-datepicker>
 Open Calendar
</a>

In this example we can read the HTML snippet and immediately know that .sage-btn applies only to CSS-based appearance and behavior, data-js-datepicker is used by JS files to bind interactive functionality, and data-test-datepicker is referenced within our test suite to programmatically test the interactivity.