CSS框架的设计 about avalon.oniui HOT 4 OPEN

CSS3动画帧数科学计算法 http://www.uisdc.com/css3-animation-calculate

from avalon.oniui.

CSS文件的分类和引用顺序

通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。

我们按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用（按需求决定是否添加版本号）。

1. 公共型样式：包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。
2. 特殊型样式：当某个栏目或页面的样式与网站整体差异较大或者维护率较高时，可以独立引用一个样式：“特殊的布局、模块和元件及扩展”、“特殊的功能、颜色和背景”，也可以是某个大型控件或模块的独立样式。
3. 皮肤型样式：如果产品需要换肤功能，那么我们需要将颜色、背景等抽离出来放在这里。

<link href="assets/css/global.css" rel="stylesheet" type="text/css"/> 
<link href="assets/css/index.css" rel="stylesheet" type="text/css"/> 
<link href="assets/css/skin.css" rel="stylesheet" type="text/css"/> 
        

CSS内部的分类及其顺序

1. 重置（reset）和默认（base）（tags）：消除默认样式和浏览器差异，并设置部分标签的初始样式，以减少后面的重复劳动！你可以根据你的网站需求设置！
2. 统一处理：建议在这个位置统一调用背景图（这里指多个布局或模块或元件共用的图）和清除浮动（这里指通用性较高的布局、模块、元件内的清除）等统一设置处理的样式！
3. 布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！
4. 模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！
5. 元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！
6. 功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！
7. 皮肤（skin）（.s-）：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色（图）、边框色等，非换肤型网站通常只提取文字色！非换肤型网站不可滥用此类！
8. 状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}），具体详见命名规则的扩展相关项。

功能类和皮肤类样式为表现化的样式，请不要滥用！以上顺序可以按需求适当调整。

以上分类的命名方法详见命名规则

        /* 重置 */ 
        div,p,ul,ol,li{margin:0;padding:0;} 
        /* 默认 */ 
        strong,em{font-style:normal;font-weight:bold;} 
        /* 统一调用背景图 */ 
        .m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;} 
        /* 统一清除浮动 */ 
        .g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';} 
        .g-bdc,.m-dimg ul,.u-tab{zoom:1;} 
        /* 布局 */ 
        .g-sd{float:left;width:300px;} 
        /* 模块 */ 
        .m-logo{width:200px;height:50px;} 
        /* 元件 */ 
        .u-btn{height:20px;border:1px solid #333;} 
        /* 功能 */ 
        .f-tac{text-align:center;} 
        /* 皮肤 */ 
        .s-fc,a.s-fc:hover{color:#fff;} 

from avalon.oniui.

Neat.css

Neat.css 是基于normalize的全新的 CSS Reset，兼容 IE 6+ 以及其他现代浏览器。

「normalize」的核心理念是不盲目重置为0，让元素拥有统一的默认间距，大小等表现。但针对国内大部分网站不是纯文字排版，Neat.css 选择回归「有即是无，无即是有」的理念，把大部分标签的默认margin，padding 均重置为 0。如果你需要对大面积文字或者文档快速美化，推荐单独引入专门针对汉字排版的type.css。

Neat.css 解决的问题

1. 解决Bug，特别是低级浏览器的常见Bug。
2. 统一效果，但不盲目追求重置为0。
3. 向后兼容。
4. 考虑响应式。
5. 考虑移动设备。

特色

人性化的细节处理

例如：

• textarea 默认只能垂直拖动，防止宽度改变破坏布局。

  ```css textarea { resize: vertical; } ```

• 汉字字号小于 12px 不易阅读，为 <small> 元素设置默认值为 12px。

  ```css small { font-size: 85.7%; /* 12/14=0.8571428571 */ } ```

• label 元素默认光标设为「手型」，暗示此处可点击。

  ```css label { cursor: pointer; } ```

考虑移动设备

通常 iPhone 横屏时默认会放大文字，如果页面已经做了响应式，这可能会破坏布局，Neat.css做了如下优化：

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

考虑响应式

IE6 以上浏览器，图片默认支持缩放。

IE6 以上浏览器，图片默认支持缩放。

/**
 * 1. 去除 IE6-9 和 Firefox 3 中 a 内部 img 元素默认的边框
 * 2. 修正 IE8 图片消失bug
 * 3. 防止 img 指定「height」时图片高度不能按照宽度等比缩放，导致图片变形
      http://jsbin.com/aJoTUca/2
 * 4. 让图片支持响应式
 * 5. 去除现代浏览器图片底部的空隙
 * 6. 修复 IE7 图片缩放失真
 */
img {
    border: 0 none; /* 1 */
    width: auto\9; /* 2 */
    height: auto; /* 3 */
    max-width: 100%; /* 4 */
    vertical-align: top;/* 5 */
    -ms-interpolation-mode: bicubic; /* 6 */
}

跨平台最佳 font-family

中文网页一直没有太多显示效果较好的字体可供选择，在「微软雅黑」之前，Windows 平台用于网页正文的简体中文字体仅有一个「中易宋体（SimSun）」。「微软雅黑」的出现似乎成了很多设计师的「救命稻草」。但「微软雅黑」自身也有诸多问题，例如：字距较小、字面宽扁、黑度偏大、字符重心不一致等。所以它实际上不适合用在大面积文字排版上，用在标题上尚可。

如果误认为「微软雅黑」就是网页显示最好的字体，甚至于把 OS X 默认简体中文也设置为「微软雅黑」（安装了 Office 后会预装「微软雅黑」），这将是很可怕的。

为了避免字体混乱的局面，Neat.css 统一了 font-family 的设置。

1. 中文字体选择如下：

• Windows 优先使用「微软雅黑」，如果没有则使用「中易宋体（SimSun）」。
• OS X 优先使用「冬青黑体简体（Hiragino Sans GB）」，如果没有则使用默认的「华文黑体」。
• Linux 优先使用「文泉驿微米黑」。

1. 西文字体选择如下：

• Windows 优先使用「Tahoma」。
• OS X 优先使用「Helvetica Neue」

/**
 * 1. 防止元素中「font-family」不能继承
 * 2. 西文字体和 OS X 字体写在前面
 * 3. Opera 12.1 之前版本不支持中文字体的英文名称
 * 4. 微软雅黑「\5FAE\8F6F\96C5\9ED1」,中易宋体「\5B8B\4F53」
 */
body,
button, /* 1 */
input, /* 1 */
select, /* 1 */
textarea  /* 1 */
{
    font-family: 'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;
}

注意：IE 中部分表单元素并不能识别以上 font-family 中的「微软雅黑」，会以「中易宋体（SimSun）」显示。

1. 代码字体选择如下：

• Windows 优先使用 Consolas。
• OS X 优先使用 Monaco。

code,
kbd,
pre,
samp {
    font-family: monaco, menlo, consolas, 'courier new', courier, monospace;
}

如果开发者对所选字体没有充分了解，不建议重新定义 font-family 。

解决表单渲染问题

由于表单元素是由系统渲染的控件，其 UI 表现具有特殊性。为了尽可能减少不同平台间的差异，Neat.css 中统一了大部分效果，但保留一些平台特殊的样式。比如input[type="search"]，保留了搜索框右边的清除按钮，方便移动设备上清除文字。

/**
 * 1.移除 OS X 中 Safari5 和 Chrome 搜索框内侧的左边距
 * 2.如果需要隐藏清除按钮需要加上
   input[type="search"]::-webkit-search-cancel-button
 */
input[type="search"]::-webkit-search-decoration /* 1 */
{
    -webkit-appearance: none;
}

面向未来

Neat.css 中对一些浏览器的新特性也会提供支持，比如 HTML5 中新增的 <dialog> 元素。

/**
 * 居中 HTML5 dialog 元素
 * Chrome 31 支持，需开启 chrome://flags/#enable-experimental-web-platform-features
 * Chrome 28 之前、Firefox 中不支持 height:fit-content; 
   https://src.chromium.org/viewvc/blink?revision=148314&view=revision
 * ::backdrop 定义遮罩样式
 * @demo: http://jsbin.com/iPACab/1
 */
dialog{
    border: 1px solid;
    padding: 0;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
}

dialog::backdrop{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .3);
}

定制

Neat.css 目前压缩后只有 4KB 左右，对于用不到的样式对页面也不会造成影响。而且实际开发中我们并不能确定页面中会增加或减少什么元素，所以并不推荐自行定制。

注意事项

假如你的项目之前采用的是 Brix Style，甚或更早的 KISSY Reset，迁移到 Cube 时有如下注意事项：

• 默认 font-size: 14px。
• 默认 line-height: 1.5。

之前在 Brix Style 与 KISSY Reset 中分别是 font-size: 12px ，line-height: 1.5，因此针对旧的项目如果引用cube.css会对布局造成一些影响，我们建议改回之前默认的：

body {
    font-size: 12px;
    line-height: 1.5
}

如果是新的项目，特别是跨平台的项目推荐直接使用更大的字号和行高，带来更加舒适的阅读体验。

from avalon.oniui.

http://thx.alibaba-inc.com/cube/doc/

from avalon.oniui.