base-css

完整版在 master 分支维护, 首页优化精简在 mini 分支维护

git checkout mini

经过压缩精简, 同样功能 base-css 从 9K 减少到 5K

USAGE

为保持主流浏览器体积最小, 拆分 IE6-8 为独立版本(base.ie.css)

  1. <!-- for IE6-8 -->
  2. <!--[if lt IE 9]>
  3.     <link rel="stylesheet" href="base.ie.css">
  4. <![endif]-->
  5. <!--[if gte IE 9]><!-->
  6.     <link rel="stylesheet" href="base.css">
  7. <!--<![endif]-->

BUILD & OUTPUT

  • 安装依赖
    npm i

  • 编译打包
    grunt

  • 测试(默认访问: 127.0.0.1:8011)
    grunt test

最终产出在 dist 目录, 分为 4 份文件

  • base.rtl.css

  • base.ltr.css

  • base.rtl.ie.css

  • base.ltr.ie.css

COMPACT DETAIL

1. 不常用的 form 控件 reset

  1. input[type="search"] {
  2.     -webkit-appearance: textfield;
  3.     -webkit-box-sizing: content-box;
  4.     -moz-box-sizing: content-box;
  5.     box-sizing: content-box;
  6. }
  8. input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button {
  9.     -webkit-appearance: none;
  10. }

2. html5 标签兼容

  1. audio,canvas,video {
  2.     display: inline-block;
  3.     *display: inline;
  4.     *zoom: 1;
  5. }
  7. audio:not([controls]) {
  8.     display: none;
  9.     height: 0;
  10. }

3. 过旧的样式属性兼容

  1. .unselect,i,.i,.icon {
  2.     -moz-user-select: -moz-none;
  3.     -khtml-user-select: none;
  4.     -webkit-user-select: none;
  5.     -o-user-select: none;
  6.     user-select: none;
  7. }

4. IE Hack

  1. _zoom:expression(function(el) {
  2.     document.execCommand('BackgroundImageCache',false,true);el.style.zoom = "1";
  3. }(this));

5. kill jQuery-UI

待定, 依赖自定义网址重构

6. 不常用的工具类

  1. sup,.sup {
  2.     top: -0.5em;
  3. }
  5. sub,.sub {
  6.     bottom: -0.25em;
  7. }

7. 冗余代码

  1. @charset "utf-8";
  2. ...
  3. @charset "utf-8";

8. 抽象继承冗余部分

  1. .icon-hot{
  2.     display: inline-block;
  3.     width: 30px;
  4.     height: 11px;
  5.     margin-left: 3px;
  6.     cursor: pointer;
  7.     background: url(../img/i-rtl-hot.png?m=z) no-repeat;
  8.     _position: absolute;
  9.     font-size:0;
  10. }
  11. .icon-new{
  12.     display: inline-block;
  13.     width: 30px;
  14.     height: 11px;
  15.     margin-left: 3px;
  16.     cursor: pointer;
  17.     background: url(../img/i-rtl-new.png?m=z) no-repeat;
  18.     _position: absolute;
  19.     font-size:0;
  20. }

调整为:

  1. .icon-hot, .icon-new, .icon-new_red{
  2. }

另外: base.css 中提供了很多常用工具类, 比如:

  1. .hide{} /*隐藏*/
  2. .s-ptn{} /*通用margin/padding设置*/
  3. .unselect{} /*禁止文本选择*/
  4. .fl{} /*浮动*/
  5. .g /*grid 布局相关*/

请在源码或文档中熟悉, 避免业务代码冗余

TEST

/test/index.html