Smarter ways to target elements in the DOM.
One hook to do all the things e.g.
.btn-menu class could be used as a hook for:
A naming convention that enforces a clear separation of concerns e.g.
<button class="[css] [js] [test] [track]">
This means there will never be any troublesome overlap.
All hooks are namespaced except for CSS hooks:
.test-= Automated test hook
.track-= Tracking hook
<button class="drop-down-btn btn-menu js-header-menu-btn test-header-menu-btn track-header-menu-btn">
CSS hooks don't have a namespace but in the scope of the Scally framework some CSS hooks do e.g.
.l- (a layout module) and
.u- (a utility). Plus any state based hooks are namespaced with
The order of the hooks, within the class attribute, should be:
A common practice is to use HTML5
data-* attributes as hooks, but this is incorrect.
data-* attributes, as per the spec, are used to store custom data private to the page or application.
data-* attributes are designed to store data, not be bound to.
Read more in my CSS Guidelines.