From bdbacf7bb87dd7c5e30ca4a75936ed5eec562ab2 Mon Sep 17 00:00:00 2001
From: Mikkel Gravgaard <mikkel@klokke.dk>
Date: Wed, 1 Aug 2018 08:45:54 +0200
Subject: [PATCH] Add special notation for id and classes

Inspired from this reddit comment:
https://www.reddit.com/r/Clojure/comments/75d054/hiccupreagent_syntax_help/do5o0qh/
---
 doc/UsingHiccupToDescribeHTML.md | 40 ++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/doc/UsingHiccupToDescribeHTML.md b/doc/UsingHiccupToDescribeHTML.md
index 6e9f2f1..843ba37 100644
--- a/doc/UsingHiccupToDescribeHTML.md
+++ b/doc/UsingHiccupToDescribeHTML.md
@@ -52,6 +52,46 @@ As of reagent 0.8.0, the `class` attribute accepts a collection of classes and w
 [:div {:class ["a-class" (when active? "active") "b-class"]}]
 ```
 
+## Special notation for id and class
+
+The id of an element can be indicated with a hash (`#`) after the name of the element.
+
+This:
+
+```clojure
+[:div#my-id]
+```
+
+is the same as this:
+
+```clojure
+[:div {:id "my-id"}]
+```
+
+One or more classes can indicated for an element with a `.` and the class-name like this:
+
+```clojure
+[:div.my-class.my-other-class.etc]
+```
+
+which is the same as:
+
+```clojure
+[:div {:class ["my-class" "my-other-class" "etc"]}]
+```
+
+Special notations for id and classes can be used together. The id must be listed first:
+
+```clojure
+[:div#my-id.my-class.my-other-class]
+```
+
+which is the same as:
+
+```clojure
+[:div {:id "my-id" :class ["my-class" "my-other-class"]}]
+```
+
 ## Special notation for nested elements
 
 Reagent extends standard Hiccup in one way: it is possible to "squeeze" elements together by using a `>` character.