Two thoughts:<p>(1) Much of the complexity of the OP's example is due to the fact that the template language they use, Twig, does not abstract HTML. If they would use a higher level templating language, e.g. Jade (<a href="http://jade-lang.com/" rel="nofollow">http://jade-lang.com/</a>) much of the need to have such things as his proton pattern, would not even arise. Another attempt at a living styleguide generator, <a href="http://bedrock.mono.company/" rel="nofollow">http://bedrock.mono.company/</a> does just that.<p>(2) The very necessity to discuss atom vs. molecule makes me think that maybe the distinction is not such a good idea after all. Harry Roberts in his ITCSS has just "components" <a href="https://www.youtube.com/watch?v=1OKZOV-iLj4" rel="nofollow">https://www.youtube.com/watch?v=1OKZOV-iLj4</a> . The other layer that Harry has, "objects", is subsumed under "atoms". This leads to another round of fruitless discussions.