Amaze UI

CSS


CSS 概述

Amaze UI CSS 大致分为四部分。

基础(默认)样式
使用 normalize.css 统一浏览器差异, 以及一些基础的元素样式。
布局样式
包含用于布局的 Grid、AVG Grid 栅格系统,以及一些辅助 Class。
元素样式
codeformtable 等 HTML 元素定义更多的样式。
页面组件
定义网页中常用的、多个元素组合在一起的组件样式,如分页、面包屑导航等。

浏览器前缀

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

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

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

响应式断点

尺寸class 简写断点区间描述
smallsm0 - 640px处理绝大数手机的横竖屏模式
mediummd641px - 1024px平板的横竖屏模式
largelg1025px +桌面设备

目前 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 transcoding by search engine-->
  <meta http-equiv="Cache-Control" content="no-transform" />
  <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+ 有效

防转码

搜索引擎【百度、搜狗、神马等】会在移动端将网页转码并且加上自己的广告。最简单的方式是在 head 添加如下代码:

<meta http-equiv="Cache-Control" content="no-transform" />
<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 中的 yuiPure 中的 pure 一样,Amaze UI 里的 am 就是命名空间。

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

目的:防御与无侵入!

CSS 多基于 Class 应用样式,我们不愿看到:

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

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

当然如果需要改变命名空间,可以自己下载源代码编译。