Attribute Modules (AM) is a technique for using HTML attributes and their values rather than classes for styling elements. In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable and maintainable HTML & CSS.

It's not a framework or a library, it's a style that better describes the components you're building. For an introduction to how AM was developed, see the original blog post by Glen Maddern. The specification itself is available on GitHub.

Example: Bootstrap Buttons

Buttons are one of the strongest use-cases for AM. Here we've converted some of Bootstrap's button markup as an example.

<!-- Large primary button -->
 <a class="btn btn-primary btn-lg">Large primary button</a>
 <a am-Button="primary large">Large primary button</a>
@@ -22,23 +22,31 @@
 
.btn [am-Button] { /* Default button styles */ }
 .btn-primary [am-Button~="primary"] { /* Primary colours */ }
 .btn-large [am-Button~="large"] { /* Large sizing */ }
-

Example: Flexbox Grid

Using a grid system is commonplace and Flexbox Grid is one we're particularly fond of. Here we've converted some example markup into an AM style.

<div class="row reverse" am-Row~="reverse">
-  <div class="col-xs-12 col-sm-8" am-Column="xs:12 sm:8"
+

Example: Flexbox Grid

Using a grid system is commonplace and Flexbox Grid is one we're particularly fond of. Here we've converted some example markup into an AM style.

<div class="row reverse" am-Grid-Row="reverse">
+  <div class="column-12--hand column-8--lap" am-Grid-Col="12 lap:8"
     <div class="box" am-Demo="box">Responsive</div>
   </div>
 </div>

Example: Traits

While AM can be used as a drop-in for BEM-style class naming, you can also consider a module defining a more general namespace for grouping related styles. Similar to utility classes in Suit CSS, these can be thought of as reusable style traits, that can be applied on or within components.

Example: Traits

While AM can be used as a drop-in for BEM-style class naming, you can also consider a module defining a more general namespace for grouping related styles. Similar to utility classes in Suit CSS, these can be thought of as reusable style traits, that can be applied on or within components.

<div class="u-posAbsoluteCenter" am-position="absolute center">
   <div class="u-textTruncate u-textCenter" am-text="truncate center">
     Very centered text.
   </div>
 </div>

Call for feedback

We'd love to hear suggestions for inclusions to the AM specification, by adding an issue to our tracker or contributing to an existing discussion. If you create an AM-style CSS library or framework, please let us know.