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.

For an introduction to how AM was developed, see the original blog post. 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 */ }
-

<div class="row reverse" am-Row~="reverse">
+

<div class="row reverse" am-Row="reverse">
   <div class="col-xs-12 col-sm-8" am-Column="xs:12 sm:8"
     <div class="box" am-Demo="box">Responsive</div>
   </div>
 </div>

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

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"
+
<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>
The original markup shares some problems with all class-based grid systems. Because grid classes are used so frequently, it uses relatively bare css classes like row & reverse, but because columns need to be responsive, it eschews a global col class and instead defines col-breakpoint-number classes.
-
The AM markup, on the other hand, defines an am-Row and am-Column module, and since each of those define a namespace we can be free to use values of our choosing. These values can make use of a wider range of characters than is convenient with classes, so we can use a breakpoint:number syntax, which is arguably easier to understand at a glance.
+
The AM markup, on the other hand, defines am-Grid-Row and am-Grid-Column modules, and since each of those define a namespace we can be free to use values of our choosing. These values can make use of a wider range of characters than is convenient with classes, so we can use a breakpoint:number syntax, which is easier to understand at a glance. We can also adopt a mobile-first apporach by omitting the hand breakpoint.
 

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">
diff --git a/styles/main.css b/styles/main.css
index 21939d1..d119677 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -67,17 +67,28 @@ table {
 
 /* Modules */
 [am-HomepageHero] {
-  padding: 4rem 1rem;
+  position: relative;
+  padding: 4rem 1rem 2rem;
   text-align: center;
-  background: linear-gradient(45deg, #2b782b 0%, #85c543 100%);
   color: #fdfdfb;
   font-weight: 300; }
+  [am-HomepageHero]::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    height: 150%;
+    width: 200%;
+    background: linear-gradient(45deg, #965ddc 0%, #b087e5 100%);
+    z-index: -1;
+    transform: rotate(-4deg); }
   [am-HomepageHero] h1::before {
     content: '['; }
   [am-HomepageHero] h1::after {
     content: ']'; }
   [am-HomepageHero] h2 {
-    padding-top: 2rem;
+    transform: rotate(-4deg);
+    padding-top: 3rem;
     font-style: italic; }
     [am-HomepageHero] h2 > span {
       font-weight: 400; }

From 6a85278108edf9bde0ee4ace85c9cf56f70acaed Mon Sep 17 00:00:00 2001
From: Glen Maddern 
Date: Fri, 5 Sep 2014 15:38:20 +0200
Subject: [PATCH 3/5] Update 2014-09-05T13:38:20.766Z

---
 index.html      |   6 +-
 styles/main.css | 147 ++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 134 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 7c45d84..0823e65 100644
--- a/index.html
+++ b/index.html
@@ -37,9 +37,9 @@
 </div>

Built with AM

• am-Grid
  -A grid system, inspired by Flexbox Grid. View source
-
• This website
  -A simple example of AM in-use, broken up into four simple modules.
+An AM grid system, inspired by Flexbox Grid. View source. +
• amcss.github.io
  +A simple example of components in AM, broken up into four simple modules.

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.