There are numerous types of user interfaces that we use in our designs – there are pages, screens, popovers, dialog boxes, alert boxes, sliders, tooltips, overlays, and the list goes on.
It is important for front-end designers to establish a system for naming such containers and reusing them all over our web projects via the
class attribute of an HTML element (e.g.,
Say, for example, you want to define a container to appear as a dialog box. There are two important things to consider: first is the type of UI and the second is the state of that UI. The solution to this task is to hook up the
class name of an HTML element with CSS. Then in CSS, the visual design for a particular UI type is already defined, as well as its different states (active or inactive).
The Naming Convention
Instead of mindlessly coming up with names, we must establish a naming convention (very similar to BEM) to help and guide us with repeatedly naming class names depending on the need.
In general, we would start from generic to specific in this syntax:
The generic name says something about the whole naming convention – whether it’s a type of UI or a state of an element. The identifier is the element that narrows down towards the specific (in some cases if it answers to the generic name, it is the specific name). The specific name answers to the generic name similar to
attribute="value" syntax (i.e.,
Consider wanting to classify an element under a dialog box type of UI:
<div class="ui-type--dialog-box"> ... </div>
Or defining a state of the dialog box:
<div class="ui-type--dialog-box ui-state__dialog-box--active"> ... </div>
In our example, the generic names are
ui-state and the specific names are
active, respectively. In the case of the generic name
dialog-box acts as the specific. And lastly, the separator between a generic name and an identifier is a double-underscore
__ and the separator between a generic name or an identifier and a specific name is a double-dash
--. The separators make the relationship between the names easier to understand and the syntax, easier to read for different front-end designers sharing front-end documents.