样式库构建规范

时间  2019-11-13
标签 样式 构建 规范 繁體版
原文   原文链接

是否记得这样的试题？用一套一样的HTML结构，生成不一样 的视觉效果。CSS 的最大好处就是，灵活。好比一样的HTML结构，能够实现不一样的外观；又好比，一样的外观，能够用不一样的方式不实现。但灵活的同时也给咱们带来麻烦。团队 协做时，你们的编码风格各异，其余人要看懂/debug的成本也所以提升。这时，咱们须要一个规范，一个像红灯亮起咱们就不能擅闯的规范。css

在 Alipay 前端，Alice 框架有这样一套规范，让你们的协做更方便。这套规范基于 Alice，属于 Alice 的一部分。其最基本的原则是，一样的结构，产出不一样的视觉效果。html

注：全部样式的建立，都必须基于 CSS 规范 进行前端

http://blog.csdn.net/shoyer/article/details/8300442git

1、Alice 设计模式

Alice 的设计起源于支付宝的 pa.css 文件。因为这个文件被多系统引用，没有人敢随便改动里面的内容，因此只能不断往里面添加内容，致使了这个文件体积变得很是大。因此，亟待重构。在尝试重构后，发现了重构不是咱们真正想要的，因些主要从两个方面来构建 Alice：github

  • 减小依赖，避免耦合
  • 统一风格，让代码有规可循，保证团队协做效率

设计模式

更个人设计思想，请参考：支付宝CSS架构设计模式

2、关于 Alice v3

检出 Alice 前端解决方案的全部代码:浏览器

  1. 到 Github 上 fork 咱们：https://github.com/sofish/Alice
  2. 直接 clone 下来：
    [html]  view plain copy
    1. git clone git@github.com:sofish/Alice.git  

1. 文件结构：

[html]  view plain copy
  1. ---  
  2.  |---- plugins/             浏览器兼容解决方案对应的编辑器插件  
  3.  |---- solutions/           浏览器兼容解决方案  
  4.  |---- tpl/                 参考的模板文件  
  5.  |---- w3c/                 HTML5/CSS3 标准文档  
  6.  |---- base.css             Alice 的基础，全部样式均基于它  
  7.  |---- readme.md  

2. base.css 的做用

  • CSS reset
  • 小功能：
    • .fn-clear 清除浮动
    • .fn-hide/.fn-show 至关于display:block;/display:none;
    • .fn-left/.fn-right 至关于 float:left;/float:right;

3. 命名规范：

注意：非组件/解决方案，请不要使用.ui-/.sl-做为前缀架构

  • .ui- 组件前缀
  • .sl- 兼容解决方案前缀

4. 注释：以一个组件结构为例

[css]  view plain copy
  1. /* 
  2. * @name: ui-组件名 
  3. * @overview: 组件描述 
  4. * @required: 与其余组件的依赖关系，通常为null 
  5. */  
[css]  view plain copy
  1. /* 通常模块注释 
  2. 通常单行或块状注释 
  3. 注明 overwrite 的是能够覆的，没注明的是必须的 
  4. */  
  5. .ui-someuiorsl{  
  6. display:block;  
  7. overflow:hidden;  
  8. width:999px;/* overwrite */  
  9. }  

3、如何使用

1. 如何使用 alice 构建系统样式

A. 分析视觉稿

虽然视觉稿是多变的，但 Alice 模块的结构是不变的。所以，咱们拿到视觉稿的第一时间（交互白板的时候，其实已经能够开始寻找），就是分析视觉稿。确认哪些资源是咱们相要的。而 Alice 方面，咱们要分析的是，全局设置的有那些，可使用 Alice 模块的有哪些。一般，须要肯定的全局设置包括：app

  • 颜色：文字、边框、背景
  • 字体：种类、大小
  • 布局：模块、分栏
  • 图标：.ui-icon .ui-icon-NAME

通常，咱们为全局设置建立一个单独的 global.css框架

而那些应该作为组件？通常状况下 TPL（下详）中的 14 个通用组件是必要的。另外须要根据页面使用的实际状况抽象。越多的组件，咱们的编码就越统1、能建立越多的代码片断，这不管是对咱们的协做，仍是效率的提 升，都是很是有益的。下面这个 CheckList 能够做为你规范样式库的参考：

至于如何规划一个 CSS 文件，请参考《CSS 规范》

B. 使用tpl.css / tpl.html (命名规范在下面)

tpl.css 是一套 CSS 模板。若是你要构建新的组件。那么，你能够直接使用它。而不是引入+覆盖她。TPL 中包括了，全局设置/ 布局 / 列表 / 标题 / 切换 / 表单 / 表格 / 按钮 / 对话框。从 checklist 中能够看出已有组件列表。若是你的组件是已经有的，那么，参照已有的结构去构建。若是你新建一个新的组件，那么，使用下图所示的方法来构建：

记住：

不一样外观的相同组件，HTML不要相互嵌套，CSS 推荐嵌套。

推荐的:

[html]  view plain copy
  1. <ul class="ui-nav">  
  2.     <li class="ui-nav-item"> some text  
  3.         <ul class="ui-nav-item-child">  
  4.             <li> some text  
  5.                 <ul class="ui-list">  
  6.                     <li class="ui-list-item"> some text</li>  
  7.                 </ul...  
  8.         </ul>  
  9.     </li>  
  10.     <li...  
  11. </ul>  

不推荐的:

[html]  view plain copy
  1. <ul class="ui-nav">  
  2.     <li class="ui-nav-item"> some text  
  3.         <ul class="ui-nav-item-child">  
  4.             <li> some text  
  5.                 <ul class="ui-nav">  
  6.                     <li class="ui-nav-item"> some text </li>  
  7.                 </ul...  
  8.         </ul>  
  9.     </li>  
  10.     <li...  
  11. </ul>  

推荐的：

[css]  view plain copy
  1. /* global scrope */  
  2. .ui-icon-rarr{background:...}  
  3. .ui-icon-larr{background:...}  
  4. .ui-title{font-size:...}  
  5.   
  6. /* component only */  
  7. <strong>.ui-nav .ui-list</strong>{...}  
  8. <strong>.ui-table .ui-list</strong>{...}  

不推荐的：(除非须要重用)

[css]  view plain copy
  1. /* set everything into a global scrope */  
  2. .ui-icon-rarr{background:...}  
  3. .ui-icon-larr{background:...}  
  4. .ui-title{font-size:...}  
  5. .ui-list{}  
  6. .ui-nav{}  

在模块化和命名上，以一个Tab组件为例，分解以下：

值得注意的是：
  • 组件名是必选的
  • 状态请参照下文中“状态的规范”
  • 在组件窗口最外一层添加状态，而非给每个内容添加状态。除非内容有独立的状态

    好比，咱们能够这样写：

    [html]  view plain copy
    1. <div class="ui-new ui-new-hover">  
    2.    <h3>TITLE</h3>  
    3.    <p class="ui-new-cnt">  
    4.       ....  
    5.    </p>  
    6. </div>  

    但不要这样写：

    [html]  view plain copy
    1. <div class="ui-new">  
    2.    <h3 class="ui-new-title-hover">TITLE</h3>  
    3.    <p class="ui-new-cnt ui-new-cnt-hover">  
    4.        ....  
    5.    </p>  
    6. </div>  
  • 直接使用 TPL，而不是覆盖 TPL

  • 充分考虑组件标签的语义化和层级的灵活性

    语义化是什么？什么样的写法才是正确的。这里给一个建议，把你将要构建的页面当成一本书。是段落的，你就用P(aragraph)；是标题的，就用 H(eader)；是引用的，就用Blockquote。而不是简单的，块状的东西由块状元素包含，行内的元素用行内的标签包含。这里有点要求就是， 去深刻了解每一个 HTML 标签的用法。关于灵活。像 “在组件窗口最外一层添加状态，而非给每个内容添加状态。除非内容有独立的状态” 就是一种灵活的表现。让你更灵活去地改变状态。

    关于 HTML 的语义化，能够参考：这样去写你的 HTML

2. 如何使用 style lib （系统样式）

  • 已有组件：直接使用
  • 组件有更改：与和系统 owner 确认，并通过全面测试，才能修改组件
  • 新样式：基于 Alice TPL，建立新样式

3. Alice 组件命名规范 (参照图示)

  • 组件名

    尽可能让人看到名字就能知道是什么组件，比较 ui-tab，好比 ui-nav 这样的命名。全部小图标都使用 .ui-icon .ui-icon- 前缀，建议同一系统（域）人的经常使用小图标所有合成 sprite。用 HTML ENTRY 来引用，不要写空标签，应使用 HTML ENTRY 来替代，以达到语义化的要求。HTML ENTRY 请参考这个文档：https://docs.google.com/Doc?docid=0AWiI12yCmwaoZGNiemJqOGpfMTVmaHZtOWNkeg

  • 组件总体状态 = 组件名 + 状态

    经常使用的状态有：hover, current, selected, disabled, focus, blur, checked, success, error 等。一般你的命名应该看起来像 .ui-name-hover, .ui-name-error 这样。

  • 组件模块 = 组件名 + 模块名

    经常使用模块名有：cnt(content), hd(header), text(txt), img(images/pic),item, cell 等，只要词义表达了组件要实现的功能或者要表现出来的的外观就能够了。

  • 组件模块状态 = 组件模块 + 状态

    参照经常使用状态

命名注意：
  • 组件嵌套：大组件可有子组件命名。

    拿支付宝某项目中的的 .ui-nav 为例，若是有多级，能够这样命名：

    [html]  view plain copy
    1. ui-nav > ui-subnav(ui-nav的子类) > ui-list(嵌套进去的其余组件)  
    2.   
    3. <ul class="ui-nav">  
    4.     <li class="ui-nav-item">  
    5.         <a href="#">nav Triggle Link</a>  
    6.         <ul class="ui-subnav">  
    7.             <li class="ui-subnav-item">  
    8.                 <a href="#">subNav Triggle Link</a>  
    9.                     <ul class="ui-list" ....  
  • 多状态：多状态时，用惟一的命名来代替，而非抽象名词。

    拿 ui-button 为例：

    [html]  view plain copy
    1. ui-button ui-button-1pxcorner [, ui-button-indexsign [, ui-button-SOMEID]]  

    而不要用 ui-button-round，这样，就可能会有： ui-button-round-a ui-button-round-b … 了。按钮又有多个状态，命名就会太长了 ui-button-round-a-disabled

  • 统一：

    好比你比较喜欢 ui-tip-container ，另外的一个相同做用的地方，就不要写 ui-message-cnt 了，用 [ui-tip-container ui-message-container] 或 [ui-tip-cnt ui-messages-cnt] 这样会是更好的选择

  • 关于 .ui-icon-方向

    通常状况下，咱们常常遇到方向须要用单独标签来做为小图标的例子。好比几乎每一个系统都会有的 ui-message 和 ui-tip，均可能会有上下两个部分。推荐这样写：

    [html]  view plain copy
    1. CLASS            SPELL               HTML ENTRIES  
    2. ----------------------------------------------------  
    3. .ui-icon-uarr    Upward Arrow        &uarr;  
    4. .ui-icon-darr    Downtward Arrow     &darr;  
    5. .ui-icon-rarr    Rightward Arrow     &rarr;  
    6. .ui-icon-larr    Leftward Arrow      &larr;  

4、样式库维护

1. 目录结构

注：目前支付宝使用的样式库管理工具是架构组开发的一套 Maven 解决方案。

你的团队可能不止一个样式库，像支付宝，有`个人支付宝`、`生活助手`和`商家服务`等产品，因此须要根据样式库规范建立不一样的样式库。样式库能够是 svn 中的一个代码目录。每一个组件的 css 组件都应该有对应的 html demo。固然，若是有对应的预览截图，并造成一个展现平台，那就更好了。下面是代码目录和造成的展现平台。

[html]  view plain copy
  1. - system  
  2.     - systemName  
  3.         - resource  
  4.             － demo                ---------------------->   组件静态demo目录  
  5.                 - ui-xxx.html      ---------------------->   单个组件静态demo源文件  
  6.                 - ui-xxx.html  
  7.             - thumb                ---------------------->   组件截图目录  
  8.                 - ui-xxx.png       ---------------------->   单个组件截图  
  9.                 - ui-xxx.png  
  10.             - global.css           ---------------------->   系统全局样式  
  11.             - ui-xxx.css           ---------------------->   单个组件样式源文件  
  12.             ...                    ---------------------->  
  13.             - index.html           ---------------------->   系统组件库首页  
  14.     - systemName2  
  15.       ...  

像 Alice solutions 的每一个组件下，都有一个 Readme.md 说明文档，查看这个范例页面：

https://github.com/sofish/Alice/tree/master/solutions/rotate

2. 打包工具

 

推荐使用 YUI Compressor 来压缩你的样式。目前支付宝使用的 Maven 解决方案中，集成的压缩工具就是 YUI Compressor。下载和使用文档请看这里：http://developer.yahoo.com/yui/compressor/。这里再也不作细述。

关于 YUI Compressor 压缩版本的注释：

若是有些注释不想在压缩的时候删除，可使用标识符来告诉程序，标识符是一个感叹号 “!”，示例以下：

/*! 这是不会被压缩掉的注释 */ –> /*!这是不会被压缩掉的注释*/

但像 /*中文*/ 这样的注释，若是没有空格把注释隔开可能有问题。因此，当你不想格式化注释，并但愿上线的话，请确保注释是英文的，或者有空格把之隔开的中文注释。通常的 hack 注释是不会被压缩的，如：

压缩前:

[css]  view plain copy
  1. html > body p {  
  2.     color: blue;  
  3. }  

压缩后：

[css]  view plain copy
  1. html> body p{color:blue}  
3. 展现平台

能够根据团队需求，构建自身的展现平台。

4. 测试规则

组件应通过严格测试。测试规则详见：《CSS 规范》

5、Alice 解决方案

解决方案的规范，同组件。不一样的是：

  • 解决方案要实现的是兼容，实现一般须要各类 trick，它是一种手段；而组件则是一个用各类手段实现出来的结果
  • 解决方案的通用是指，偏向于指功能的通用；而组件则指视觉效果的通用

解决方案（solution）详见：http://aliceui.com/category/solutions/

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程