css(四)：CSS规范命名和书写

一、CSS书写顺序和细节

顺序：
1.位置属性(position, top, right, z-index,display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing,color-,text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

细节：
1.CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
2.去掉小数点前的“0”，如0.1rem   .1rem
3.长名称或词组可以使用中横线来为选择器命名。
4.不建议使用“_”下划线来命名CSS选择器，为什么呢?
    4.1输入的时候少按一个shift键;
    4.2浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的)
　  4.3能良好区分JavaScript变量命名(JS变量命名是用“_”)
5.不要随意使用Id

二、OOcss规范

主要的两个设计原则：1、分离结构和外观 2、分离容器和内容

      

             
title
       
       
...
 

三、SMAcss规范

模块化架构的可扩展css方法

       

              
title
       
       
...
 

四、BEMcss规范

BEM(block Element Modifier)快元素修饰符

块名   所属组件的名称
元素   元素在块里面的名称
修饰符  任何与块或元素相关联的修饰符

      

              
title
      
      
...
 
使用双横杆是为了避免块名被混淆为修饰符

五、常用命名单词

头：header 
内容：content/container
尾：footer 
导航：nav 
侧栏：sidebar 
栏目：column 
页面外围控制整体布局宽度：wrapper 
左右中：left right center 
登录条：loginbar 
标志：logo 
广告：banner 
页面主体：main 
热点：hot 
新闻：news 
下载：download 
子导航：subnav 
菜单：menu 
子菜单：submenu 
搜索：search 
友情链接：friendlink 
页脚：footer 
版权：copyright 
滚动：scroll 
内容：content 
标签页：tab 
文章列表：list 
提示信息：msg 
小技巧：tips 
栏目标题：title 
加入：joinus 
指南：guild 
服务：service 
注册：regsiter 
状态：status 
投票：vote 
合作伙伴：partner

参考：网易规范：http://nec.netease.com/