CSS

CSS 概述

Amaze UI CSS 大致分为四部分。

基础（默认）样式

使用 normalize.css 统一浏览器差异，以及一些基础的元素样式。

布局样式

包含用于布局的 Grid、AVG Grid，以及一些辅助 Class。

元素样式

对 code、form、table 等 HTML 元素定义更多的样式。

页面组件

定义网页中常用的、多个元素组合在一起的组件样式，如分页、面包屑导航等。

浏览器前缀

Amaze UI 2.0 开始移除了所有标准属性的浏览器前缀，构建时通过 AutoPrefixer 自动添加。

当前的 AutoPrefixer 浏览器支持设置为：

[
  'ie >= 8',
  'ie_mob >= 10',
  'ff >= 30',
  'chrome >= 34',
  'safari >= 7',
  'opera >= 23',
  'ios >= 7',
  'android >= 2.3',
  'bb >= 10'
]

响应式断点

尺寸	class 简写	断点区间	描述
small	`sm`	0 - 640px	处理绝大数手机的横竖屏模式（Galaxy Note 2 的视口为 360 * 640）
medium	`md`	641px - 1024px	平板的横竖屏模式
large	`lg`	1025px +	桌面设备

目前 Amaze UI 对大于 1025px 的屏幕并没有做划分，虽然现在大屏显示器越来越多，但是设计一个过宽的网页对用户来说并不友好，用户眼睛左右移动的区间太大，浏览起来比较累。当然，一些特殊类型（购物、视频等）的网站例外。

LESS 变量中定义了一些 Media Query 变量，使用 LESS 的用户可以引入该文件，直接使用这些变量。

@screen:        ~"only screen";

@landscape:     ~"@{screen} and (orientation: landscape)";
@portrait:      ~"@{screen} and (orientation: portrait)";

@small-up:      ~"@{screen}";
@small-only:    ~"@{screen} and (max-width: @{breakpoint-small-max})";

@medium-up:     ~"@{screen} and (min-width:@{breakpoint-medium-min})";
@medium-only:   ~"@{screen} and (min-width:@{breakpoint-medium-min}) and (max-width:@{breakpoint-medium-max})";

@large-up:      ~"@{screen} and (min-width:@{breakpoint-large-min})";
@large-only:    ~"@{screen} and (min-width:@{breakpoint-large-min}) and (max-width:@{breakpoint-large-max})";

使用 HTML5

Amaze UI 在 HTML5 下开发，没有测试其他 DOCTYPE，使用之前确保你的 HTML 第一行是 <!doctype html>。

建议使用的 HTML head:

<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Amaze UI Examples</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="{{assets}}i/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="{{assets}}i/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
  <!--
  <link rel="canonical" href="http://www.example.com/">
  -->

  <link rel="stylesheet" href="assets/css/amazeui.min.css">
  <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
...

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>

参考链接：

移动优先

Amaze UI 以移动优先的理念开发，需要在 meta 中设置相关 viewport 属性。

width=device-width, initial-scale=1 是必须的，而且我们认为好的设计是不需要用户去操作窗口缩放的，所以加上了 maximum-scale=1, user-scalable=no。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

国情国情

不可否认，这是一个神奇的国度，一切合理与不合理都可以用国情来解释。前端开发也不例外。

渲染引擎

国内不少 X 核 浏览器，对于前端开发者，他们更多时候可能充当了 Troublemaker 的角色，不过也会有让人眼前一亮的一刻。

<meta name="renderer" content="webkit">

这行代码可以指定网页使用 webkit 引擎渲染，当然，只对 360 浏览器 6.5+ 有效。就这点而言，我希望所有所有的小白都去用 360 浏览器，那该有多好...

防（zhēn）狼（cāo）术（dài）

如果你的网站不想被剥去外衣、往赤裸的身体上贴广告，就加上下面的代码。

<meta http-equiv="Cache-Control" content="no-siteapp" />

Class 命名说明

关注分离

Amaze UI CSS class 命名遵循关注分离、松耦合的原则，同时注重易于理解、理解，在参考 BEM 命名法的基础上，采用更优雅的书写方式。

下面的代码直观展示了 Amaze UI CSS class 命名规范。

.am-post           {} /* Block */
.am-post-title     {} /* Element */
.am-post-meta      {} /* Element */
.am-post-sticky    {} /* Generic Modifier - status */
.am-post-active       {} /* Generic Modifier - status */
.am-post-title-highlight {}  /* Element Modifier */

关注分离示例

<article class="am-post">
  <h2 class="am-post-title"></h2>
  <p class="am-post-meta"></p>
  <main class="am-post-content">
    ...
  </main>
</article>

上面的代码中，可以直接使用下面的样式控制元素：

.am-post > h2 {
    ...
}

.am-post > p {
  ...
}

乍看是没什么问题，这两个选择符也不会影响到 <main> 里面的元素，但是如果更改了 HTML 标签，就必须同时修改 CSS 选择符，无疑加大了维护的工作量。所以，给相应元素加上 class 是关注分离一个不错的选择。

<article class="am-post">
  <h1 class="am-post-title"></h1>
  <div class="am-post-meta"></div>
  <main class="am-post-content">
    ...
  </main>
</article>

关注分离反模式

<ul class="am-nav">
  <li class="am-nav-item"></li>
  <li class="am-nav-item"></li>
  <li class="am-nav-item"></li>
</ul>

上面是一个导航代码片段，我们给 <li> 都加上了 .am-nav-item class，表面是遵循关注分离，其实是一种反模式，因为 <ul> 里面肯定是要放 <li> 的，在没有其它更复杂的元素在里面的情况下，给 <li> 加 class 显然是多余的。

所以， 关注分离并不是简单地给每个元素都加上 class，还需结合实际情况区别对待。

“多类症”（Classitis）

当 HTML 源代码满眼望去都是 class 时，是不是很抓狂？

不过为了实现代码复用，减少重复冗余，难免要把代码拆分在不同的 class 下面。我们只能寻找一个平衡点，避免过细的拆分，减少不必要的 class。

选择符书写

虽然使用 LESS 编写样式可以很方便的嵌套，但是我们不建议过度嵌套选择符，有些嵌套是没有必要的。

同时，我们也不建议把多个选择器堆叠在一起。

.ui.form .fields.error .field .ui.selection.dropdown .menu .item:hover {
    ...
}

看看上面来自 Semantic UI 的选择符，威武霸气吧，整行都是选择符，class 加 class，n 层嵌套，我只想呵呵...

选择符嵌套在必要的情况下一般不超过三层；选择符叠加一般不多于两个。

一点禁忌

我们崇尚自由，但并不是百无禁忌。

Amaze UI 中有两个表示状态的 class：

.am-active - 激活
.am-disabled - 禁用

不要单独使用、直接在里面编写样式！！！

/* 可以嵌套用 */
.am-nav .am-active {
  ...
}

/* 可以堆叠用 */
.am-btn.am-active {
  ...
}

/* 绝不要单独用！！！ */
.am-active {
  color: red;
}

/* 当然，如果你想给自己找点乐，那就随便了 */

禁用响应式

不喜欢响应式？可以尝试禁用：

删除 head 里的视口设置 meta 标签；

<!--<meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">-->

固定容器 .am-container 宽度（可以自己添加一个 class，不一定要使用内置的）：

.am-container {
  width: 980px !important;
  max-width: none;
}

使用网格系统时，只添加 .am-u-sm-* class，移除其他断点的 class。

至此，布局层的响应式被禁用了（参考示例）。

不过，这仅仅是个开始，一些组件的样式细节可能还需要调整，只能陪你到这了……

关于命名空间

似乎有些人看着 .am 有些不顺眼，在这里专门做一下说明。

可能有人不知道命名空间是什么东西，和 YUI 中的 yui、Pure 中的 pure 一样，Amaze UI 里的 am 就是命名空间。

命名空间使类名变得冗长，可为什么还要加呢？

目的：防御与无侵入！

更直白的话说，我不犯人，也不让人犯我。

CSS 多基于 Class 应用样式，我们不愿看到：

多个框架共存时，按照我们的 CSS 编写的 HTML 结构应用了其他框架的样式；
从第三方抓取的 HTML 存在 class 相同的元素，意外地应用了 Amaze UI 的样式；
用户编写自己的代码时，意外的覆盖了框架中的样式；
多人协作开发时，发生命名冲突，样式相互影响；__
第三方服务（如分享按钮、评论组件）会向页面中插入一些样式，可能会意外的应用到我们编写的结构；
……

Amaze UI 内部在用，平台上的开发者也在用，命名空间能够有效地减少这些问题。

仅限于此，与品牌宣传什么的扯不上关系。

何去何从？

命名空间会被删除吗？: 一般不会，不过也说不定，不过那也是很久很久以后的事。
我真的不喜欢命名空间这个东西，怎么办？: 未来版本会尝试自定义命名空间的可能性。你也可以尝试自己在编译的过程中把命名空间去掉，前端编译工具那么多，何不试试？不然葱油拌？还是飘香拌?

妹子只能说这么多了，再往下就只能说：你不懂我，我不怪你。

CSS

目录

CSS