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

ゝ一纸荒年。 2022-08-02 06:09 30阅读 0赞

本文来源于我在InfoQ中文站翻译的文章，原文地址是：http://www.infoq.com/cn/news/2015/07/google-material-design-lite

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

根据Google[所述][Link 1]，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[所述][Link 2]，相比于那些由社区推进的项目来说，MDL的主要优势在于它的开发“与Material Design和Chrome UX团队保持了密切的协作，而且经过了定期的审查以保持与规范的兼容性”。

在MDL之前，[Polymer][]是面向CSS/JS的Material Design的标准实现。相比于MDL，Polymer所涵盖的范围更大，它超出了视觉领域，包含了数据通信组件以及非Material Design组件。

目前，[MDL并未进行过优化，也不支持单个组件的使用][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会导致类名暴涨，根据最初的[反馈][Link 3]，MDL就中招了，针对于一个简单的卡片，它需要17个不同的类名，而这却是Material Design中的一个基本概念。

Google[表示][Link 4]MDL可以使用在所有现代浏览器中（Chrome、Firefox、Opera、Microsoft Edge及Safari），同时还能在IE9等浏览器上实现优雅降级；此外，Google还建议引用他们的[CDN][]，从而在网站中包含进MDL，不过也可以直接[下载][Link 5]或是通过npm以及Bower引入。

**查看英文原文：**[Google Brings Material Design to CSS, HTML, and JavaScript][Google Brings Material Design to CSS_ HTML_ and JavaScript]

[Material Design Lite]: http://www.getmdl.io/
[Material Design]: http://www.infoq.com/news/2014/06/google-material-design-android
[Link 1]: https://medium.com/google-developers/introducing-material-design-lite-3ce67098c031
[Materialize]: http://materializecss.com/
[Material Bootstrap]: https://fezvrasta.github.io/bootstrap-material-design
[Link 2]: http://www.getmdl.io/faq/index.html#existing-implementations
[Polymer]: https://elements.polymer-project.org/browse?package=paper-elements
[MDL]: http://www.getmdl.io/faq/index.html#individual-components
[BEM]: https://en.bem.info/method/
[Link 3]: https://news.ycombinator.com/item?id=9840682
[Link 4]: https://github.com/google/material-design-lite/#browser-support
[CDN]: https://cloud.google.com/storage/
[Link 5]: https://github.com/google/material-design-lite
[Google Brings Material Design to CSS_ HTML_ and JavaScript]: http://www.infoq.com/news/2015/07/google-material-design-lite