转载

Google将Material Design带到CSS、HTML与JavaScript上

　　英文原文：Google Brings Material Design to CSS, HTML, and JavaScript

　　Google Material Design Lite（MDL）旨在将 Material Design 感官带到网站上。Material Design 是一种视觉语言，是 Android 的标准，同时也是 Google 提出的跨平台解决方案。

　　根据 Google 所述，MDL 满足如下几个条件，而这正是 “Lite”这一名字的由来：

依赖很少，这使得安装和使用变得很简单
不依赖于其他框架，这样开发者就可以将其集成到任何现有的前端工具链中
代码量相对来说不太大
非常聚焦，实现了 Material Design 原则，并且不是一个大而全的框架

　　如下代码展示了如何声明一个带有涟漪的凸起按钮：

<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"> Button  </button>

　　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 引入。

正文到此结束