CSS命名以及书写规则总结

公司里面采用的是less动态编译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 属性缩写
 2 去掉小数点前的0
 3 16进制颜色代码缩写
 4 
 5 连字符CSS选择器命名规范
 6   长名称或词组可以使用中横线来为选择器命名。
 7   不建议使用“_”下划线来命名CSS选择器,为什么呢?
 8   
 9   浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
10   能良好区分JavaScript变量命名(JS变量命名是用“_”)
11 
12 不要随意使用Id
13   id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。
14 
15 为选择器添加状态前缀
16   有时候可以给选择器添加一个表示状态的前缀,让语义更明了.
  1   头:header
  2   内容:content/container
  3   尾:footer
  4   导航:nav
  5   侧栏:sidebar
  6   栏目:column
  7   页面外围控制整体佈局宽度:wrapper
  8   左右中:left right center
  9   登录条:loginbar
 10   标志:logo
 11   广告:banner
 12   页面主体:main
 13   热点:hot
 14   新闻:news
 15   下载:download
 16   子导航:subnav
 17   菜单:menu
 18   子菜单:submenu
 19   搜索:search
 20   友情链接:friendlink
 21   页脚:footer
 22   版权:copyright
 23   滚动:scroll
 24   内容:content
 25   标签:tags
 26   文章列表:list
 27   提示信息:msg
 28   小技巧:tips
 29   栏目标题:title
 30   加入:joinus
 31   指南:guide
 32   服务:service
 33   注册:regsiter
 34   状态:status
 35   投票:vote
 36   合作伙伴:partner
 37 注释的写法:
 38   /* Header */
 39   内容区
 40   /* End Header */
 41 Id的命名:
 42   1)页面结构
 43   容器: container
 44   页头:header
 45   内容:content/container
 46   页面主体:main
 47   页尾:footer
 48   导航:nav
 49   侧栏:sidebar
 50   栏目:column
 51   页面外围控制整体佈局宽度:wrapper
 52   左右中:left right center
 53 (2)导航
 54   导航:nav
 55   主导航:mainnav
 56   子导航:subnav
 57   顶导航:topnav
 58   边导航:sidebar
 59   左导航:leftsidebar
 60   右导航:rightsidebar
 61   菜单:menu
 62   子菜单:submenu
 63   标题: title
 64   摘要: summary
 65 (3)功能
 66   标志:logo
 67   广告:banner
 68   登陆:login
 69   登录条:loginbar
 70   注册:register
 71   搜索:search
 72   功能区:shop
 73   标题:title
 74   加入:joinus
 75   状态:status
 76   按钮:btn
 77   滚动:scroll
 78   标籤页:tab
 79   文章列表:list
 80   提示信息:msg
 81   当前的: current
 82   小技巧:tips
 83   图标: icon
 84   注释:note
 85   指南:guild
 86   服务:service
 87   热点:hot
 88   新闻:news
 89   下载:download
 90   投票:vote
 91   合作伙伴:partner
 92   友情链接:link
 93   版权:copyright
 94 注意事项::
 95   1.一律小写;
 96   2.尽量用英文;
 97   3.不加中槓和下划线;
 98   4.尽量不缩写,除非一看就明白的单词。
 99 CSS样式表文件命名
100   主要的 master.css
101   模块 module.css
102   基本共用 base.css
103   布局、版面 layout.css
104   主题 themes.css
105   专栏 columns.css
106   文字 font.css
107   表单 forms.css
108   补丁 mend.css
109   打印 print.css
原文地址:https://www.cnblogs.com/sumbud/p/5785345.html