Google Material Design Lite （MDL）旨在将 Material Design 感官带到网站上。Material Design 是一种视觉语言，是 Android 的标准，同时也是 Google 提出的跨平台解决方案。
根据 Google所述，MDL 满足如下几个条件，而这正是 “Lite”这一名字的由来：
- 依赖很少，这使得安装和使用变得很简单
- 不依赖于其他框架，这样开发者就可以将其集成到任何现有的前端工具链中
- 代码量相对来说不太大
- 非常聚焦，实现了 Material Design 原则，并且不是一个大而全的框架
如下代码展示了如何声明一个带有涟漪的凸起按钮：
<span><span><span><</span>button</span> <span>class</span><span><span>=</span><span>"</span>mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect<span>"</span></span><span>></span></span> Button <span><span><span></</span>button</span><span>></span></span>
MDL 并非首个 Material Design 的 HTML/CSS/JS 实现，除了 MDL 之外还有 Materialize 与 Material Bootstrap 等。根据 Google所述，相比于那些由社区推进的项目来说，MDL 的主要优势在于它的开发“与Material Design 和Chrome UX 团队保持了密切的协作，而且经过了定期的审查以保持与规范的兼容性”。
在MDL 之前， Polymer 是面向 CSS/JS 的 Material Design 的标准实现。相比于 MDL，Polymer 所涵盖的范围更大，它超出了视觉领域，包含了数据通信组件以及非 Material Design 组件。
目前， MDL 并未进行过优化，也不支持单个组件的使用，比如说按钮。如果开发者想要使用少量的 MDL 组件，那么他可以对其进行裁剪来实现自定义的 MDL，方式是将不需要的组件从material-design-lite.css中注释掉，将不需要的脚本从Gulpfile中注释掉，然后再次运行gulp。
MDL 遵循着 BEM 约定，保持类名的一致性、隔离性和表述性。Google 还详细介绍了（ https://github.com/google/material-design-lite/wiki/Understanding-BEM）在将 BEM 应用到 MDL 时所遵循的指导原则。遗憾的是，BEM 会导致类名暴涨，根据最初的反馈，MDL 就中招了，针对于一个简单的卡片，它需要17 个不同的类名，而这却是Material Design 中的一个基本概念。
Google表示 MDL 可以使用在所有现代浏览器中（Chrome、Firefox、Opera、Microsoft Edge 及 Safari），同时还能在 IE9 等浏览器上实现优雅降级；此外，Google 还建议引用他们的 CDN ，从而在网站中包含进 MDL，不过也可以直接下载或是通过npm 以及Bower 引入。
查看英文原文： Google Brings Material Design to CSS, HTML, and JavaScript
