Amaze UI

1、Amaze UI 是一个轻量级（所有 CSS 和 JS gzip 后 100 kB 左右）、 Mobile first 的前端框架， 基于开源社区流行前端框架编写（使用、参考的项目列表）。

2、官方cdn

http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.css
http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.min.js

3、Amaze UI  HTML/CSS规范

HTML/CSS编写注意事项

• 以 am 为命名空间
• 关注分离，将 HTML、CSS 解耦；模块化编码。

模块化编写实践

<div class="am-box">

       <h2 class="am-box-hd">About the Site</h2>

       <p class="am-box-bd">This is my blog where I talk about only the bestest things in the whole wide world.</p>

</div>

上面的代码中，模块的名为box，模块最外层使用{命名空间}-{模块名}的方式命名Class。模块子元素以在此基础上进行命名。如果不继承父级的类名，很容易造成命名冲突。

充分考虑结构的语义化

虽然在 Class 的命名上已经做到的了关注分离，编写样式不再依赖具体的元素名称，但仍应该考虑语义化，根据元素设计的目的来使用元素。是段落的，你就用 <p>；是标题的，就用 <h1>~<h6>；是引用的，就用 <blockquote>， 而不是简单粗暴的用 <div>、<span>。语义化的目的，一方面是抽去 CSS 以后，页面还是一个结构良好、可读的页面；另一方面，这也是 SEO 的最基本要求。

• 避免不必要的 CSS 选择符嵌套。Class 已经模块化命名，从类名上已经可以清晰的分辨元素的从属，一般情况下也不会造成类名冲突，没有必要再进行选择器嵌套，保持 css 结构清晰，提高渲染效率。特殊情况可以嵌套（如提高权重、主题之间代码隔离），但应避免过多层级。

• 与 JS 交互时，在模块 HTML 结构的最外一层添加状态，而非给模块每个子元素单独添加元素。给最外层添加状态类以后，整个模块的样式都能控制，减少操作，提高性能。

命名注意事项

• 语义化，望文见义

   如 am-tab、am-nav，不要使用 red、left 等表象的词命名。

• 模块状态： {命名空间}-{模块名}-{状态描述}

   常用状态有：hover, current, selected, disabled, focus, blur, checked, success, error 等

• 子模块： {命名空间}-{模块名}-{子模块名}

   常用模块名有：bd(body)，cnt(content)，hd(header)，text(txt)，img(images/pic)，title，item，cell 等， 词义表达组件要实现的功能。

JS规范

http://amazeui.org/getting-started/javascript（参考网址）。