include-pattern-brainstorming

Toby Inkster's Minimally Verbose Solution

An alternative way of implementing the include pattern in a less verbose, and hopefully more accessible manner:

 <p>We have three branches in <span class="locality" id="ldn">London</span>,
 including our head office in <span class="locality" id="ken">Kensington</span>:</p>
 <ul>
   <li class="adr #ldn">
     <span class="street-address">123 Oxford Street</span>
   </li>
   <li class="adr #ken #ldn">
     <span class="street-address">5 Kensington High Street</span>
   </li>
   <li class="adr #ldn">
     <span class="street-address">1 Pall Mall</span>
   </li>
 </ul>

The order of the space-delimited class attributes should be considered significant -- that is, in <foo class="bar #baz"> the content referred to by #baz is logically included as the last child of the <foo> element, but in <foo class="#baz bar">, it is logically included as the first child. (See below for an example where the included element should occur in the middle of the element content.)

Yes, the hash mark is valid in the class attribute, though rarely used because it won't work with CSS 1 selectors.

If people can find real-life uses of the hash character in existing sites that would conflict with this proposed usage pattern, then perhaps another character could be used. I rather like '@foo', or maybe even a combination such as '@#foo'.

Including data in the middle of an element

Above, the examples show how an element can be logically included as the first or last child of another element. For including data into the middle of an element, we need to be a tiny bit more verbose and insert a dummy element (in this case a <span> element) where the included content should go:

 <p>Our head office is in <span id="ldn" class="locality">London</span> at:
 <p class="adr">
   <span class="street-address">5 Kensington High Street</span><br>
   <span class="#ldn"></span>
   <span class="postal-code">SW7 1AA</span>
 </p>

Related Pages

• the include pattern
• include-pattern examples in the wild - an on-going list of websites which use the include pattern.
• include-pattern FAQ - if you have any questions about the include pattern, check here, and if you don't find answers, add your questions!
• include-pattern feedback- general feedback (as opposed to specific issues).
• include-pattern issues - specific issues with the include pattern.
• include-pattern strawman - alternative proposals