CSS Code复制内容到剪贴板
<label>Search the site</label>
或者
CSS Code复制内容到剪贴板
<input type="text" placeholder="enter keyword" />
也就是说原子是包括了一些基本样式的DOM元素。如颜色、字体大小或者过渡动画。后来这些部分可以结合成分子，例如：
CSS Code复制内容到剪贴板
<form>
<label>Search the site</label>
<input type="text" placeholder="enter keyword" />
<input type="submit" value="search" />
</form>
所以表单元素包含了几个原子。这样抽象带来的灵活性，因为我们可以使用相同的原子来构建另一个分子。这样一来，我们在不同的上下文中可以重用相同的形式：
Brad Frost并没有停止。生特体是构建分子的东西，遵循同样的方法，我们可以编写以下的结构，并将其称为有机体：
CSS Code复制内容到剪贴板
<header>
<div class="logo"> </div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
<form>
<label>Search the site</label>
<input type="text" placeholder="enter keyword" />
<input type="submit" value="search" />
</form>
</header>
第二件事是模板的概念。他们不是直接相关的化学反应，但被放入了Web的上下文。一旦我们开始结合不同的生物构建我们的模板。后来这些模板形式就是我们最后得到的页面。
你可能已经使用类似的方法来构建应用程序。然而，命名的东西以一种合理的主式带来良好的结构。在开发中，你和你的队友会有很多事情需要去弄明白。分离的原子和分子是很重要的部分，因为它提高了工作效率和让你更好的维护您的Web应用程序。
