CSS前端开发规范整理

Css命名规范

样式名称统一加入“ws-”(网宿缩写)这个主要是考虑到如果引入其他插件，例如Bootstrap，怕会有样式冲突。不过加了前缀会带来字节数的增多和样式名称“-”数增多的问题，在具体开发中需要权衡二者利弊。下面是一些常见缩写，在具体应用中可以采用模块功能缩写+下面的缩写自由组合而成。Css书写一律采用小写字母，并用中划线连接。缩写txthdbdftpiclist/list-wrapmaskbgtitleconttabtiptopiconbtnactive/curbottomchannel/navitem说明文本头部内容底部主要放一些可隐藏拓展的东西图片列表前者用于图文列表/后者用于文字列表列表集合蒙版背景标题：有文字一般用在h标签内容选项卡提示顶部比如tip的顶部,底部频道/导航小图标按钮在处理当前状态时对于a标签用active,其他用cur关于前缀：1、对于ID的命名可以采用“J_”+所有单词首字母大写。例如：J_FriendLink格式2、对于页面中隐藏的变量ID（从后台返回的字段变量在页面中）的，加上“Hid_”前缀。3、对于与js相关的样式，也就是利用classname来控制js动态效果的，命名可以采用“j_”+所有单词首字母大写（加上前缀有利于见名知意，让人一眼就明白该样式名的用意，避免后续维护者在重构代码时不慎改掉样式名而导致原有效果失效）。例如：用j_FriendLink格式4、普通的class，就如前面所说，采用小写+中划线，功能名称+内容缩写的形式，例如：friend-link-title5、普通的id（用于页面中控制大容器的样式，如header，footer，和锚点）用驼峰格式，例如：friendLink常用的CSS命名规则

头：header内容：content/container尾：footer导航：nav主导航：mainnav子导航：subnav顶导航：topnav侧栏：sidebar栏目：column页面外围控制整体佈局宽度：wrap左右中：leftrightcenter登录：login注册：regsiter标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签：tags滚动：scroll页签：tab文章列表：list提示信息：msg小技巧：tips标题：title摘要:summary搜索：search加入：joinus指南：guide服务：service状态：status投票：vote博客：blog注释：note论坛：forum合作伙伴：partner注释的写法:

/*Header*/内容区/*EndHeader*/CSS样式表文件命名

基本共用:common.css模块:module.css,采用模块名称来命名，与jsp页面名称一致即可附录（常见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等)CSS书写规范使用CSS缩写属性

CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。去掉小数点前的“0”

简写命名

很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！16进制颜色代码缩写

有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。2.不建议使用“_”下划线来命名CSS选择器，为什么呢？输入的时候少按一个shift键；浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）能良好区分JavaScript变量命名（JS变量命名是用“_”）这里有一篇破折号与下划线的详细讨论，英文：点击查看中文篇：点击查看不要随意使用id

id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。