网易前端框架--NEC

NEC规范：


  1.CSS内部的分类及其顺序
        重置（reset）和默认（base）（tags）：消除默认样式和浏览器差异，并设置部分标签的初始样式，以减少后面的重复劳动！你可以根据你的网站需求设置！


        统一处理：建议在这个位置统一调用背景图（这里指多个布局或模块或元件共用的图）和清除浮动（这里指通用性较高的布局、模块、元件内的清除）等统一设置处理的样式！


        布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！


        模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！


       元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！


       功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式  表现，比如清除浮动等！不可滥用！


       皮肤（skin）（.s-）：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色（图）、边框色等，非换肤型网站通常只提取文字色！非换肤型网站不可滥用此类！


      状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}），具体详见命名规则的扩展相关项。


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


  2.分类的命名方法：使用单个字母+"-"为前缀
      布局（grid）（.g-）；模块（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮肤（skin）（.s-）；状态（.z-）。
      特殊：.j-将被专用于JS获取节点，请勿使用.j-定义样式




  3.统一语义理解和命名
       
     
布局（.g-）
语义 命名 简写
文档 doc doc
头部 head hd
主体 body bd
尾部 foot ft
主栏 main mn
  主栏子容器 mainc mnc
  侧栏 side sd
  侧栏子容器 sidec sdc
      盒容器 wrap/box  wrap/box




模块（.m-）、元件（.u-）
语义 命名 简写
导航 nav nav
子导航 subnav snav
面包屑 crumb crm
菜单 menu menu
选项卡 tab tab
标题区 head/title hd/tt
内容区 body/content bd/ct
列表 list lst
表格 table tb
表单 form fm
热点 hot hot
排行 top top
登录 login log
标志 logo logo
广告 advertise ad
搜索 search sch
幻灯 slide sld
提示 tips tips
帮助 help help
新闻 news news
下载 download dld
注册 regist reg
投票 vote vote
版权 copyright cprt
结果 result rst
标题 title tt
按钮 button btn
输入 input ipt


功能（.f-）
语义 命名 简写
浮动清除 clearboth cb
向左浮动 floatleft fl
向右浮动 floatright fr
内联块级 inlineblock ib
文本居中 textaligncenter tac
文本居右 textalignright tar
文本居左 textalignleft tal
垂直居中 verticalalignmiddle vam
溢出隐藏 overflowhidden oh
完全消失 displaynone dn
字体大小 fontsize fs
字体粗细 fontweight fw




皮肤（.s-）
语义 命名 简写
字体颜色 fontcolor fc
背景 background bg
背景颜色 backgroundcolor bgc
背景图片 backgroundimage bgi
背景定位 backgroundposition bgp
边框颜色 bordercolor bdc
状态（.z-）
语义 命名 简写
选中 selected sel
当前 current crt
显示 show show
隐藏 hide hide
打开 open open
关闭 close close
出错 error err
不可用 disabled dis




4.不符合NEC规范的选择器用法
   .class{}  不要以一个没有类别的样式作为主选择器，这样的选择器只能作为后代选择器使用，比如.m-xxx .class{}。


   .m-xxx div{}不要以没有语义的标签作为选择器，这会造成大面积污染，除非你可以断定现在或将来你的这个选择器不会污染其他同类。


   .g-xxx .class{}不要在页面布局中使用后代选择器，因为这个后代选择器可能会污染里面的元素。


   g-xxx .m-yyy{}.g-xxx .u-yyy{}不要用布局去控制模块或元件，模块和元件应与布局分离独立。


   .m-xxx .class .class .class .class{}
    不要将选择器写的过于冗长，这会额外增加文件大小并且限制了太小范围的选择器，使树形结构过于严格应用范围过于局限，建议3-4个长度之内写完。




NEC提供的框架功能：
   css reset框架:重置样式，清除浏览器默认样式，并配置适合设计的基础样式（强调文本是否大多是粗体、主文字色，主链接色，主字体等）


   css function框架:功能样式，从常用样式方法中抽离，按需使用，


   css media框架: 通过媒体查询为不同的设备和大小配置不同的样式


   css animation框架:常见动画效果的集合，


 代码库:
   http://nec.netease.com/library


案例： 全局自适应布局


-------------------------基本样式-------------------
   header


 left   rigth


  footer
-------------------------------------------
 
         <div class="g-hd">  头部 header  </div>
    <div class="g-sd"> 侧栏 left </div>  <div class="g-mn">主栏  right </div>
           <div class="g-ft">尾部  footer</div>


/* 全屏自适应布局  */
html,body{width:100%;height:100%;overflow:hidden;margin:0;}
html{_height:auto;_padding:100px 0 50px;}
.g-hd,.g-sd,.g-mn,.g-ft{position:absolute;left:0;}
.g-hd,.g-ft{width:100%;}
.g-sd,.g-mn{top:100px;bottom:50px;_height:100%;overflow:auto;}
.g-hd{top:0;height:100px;}
.g-sd{width:300px;}
.g-mn{_position:relative;left:300px;right:0;_top:0;_left:0;_margin-left:300px;}
.g-ft{bottom:0;height:50px;}








-----------------------------------
总结：
  框架本身只定义基本的样式，规范了编写规则，具体的排版还需要依据情况自定义， 使用网易这套框架的好处在于他有非常完整的案例。在熟练的基础上可以提高开发效率