CSS书写规范、顺序和命名规则

这些是参考了国外一些文章以及我的个人经验出来，我想对写CSS的前端用户来说是值得学习的。

一、CSS书写顺序

1.位置属性(position, , 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书写规范
1.使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码又能提高用户的阅读体验。

2.去掉小数点前的“0”

3.简写命名

很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！

4.16进制颜色代码缩写

有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。

5连字符CSS选择器命名规范

1）.长名称或词组可以使用中横线来为选择器命名。

2）.不建议使用“_”下划线来命名CSS选择器，为什么呢？

输入的时候少按一个shift键； 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的） 能良好区分JavaScript变量命名（JS变量命名是用“_”）

6.不要随意使用id

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

7.为选择器添加状态前缀

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

三、CSS命名规范（规则）
常用的CSS命名规则

头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
标签tags
文章列表list
提示信息msg
小技巧tips
栏目标题title
加入joinus
指南guide
服务service
注册regsiter
状态status
投票vote
合作伙伴partner

注释的写法:

/ Header /
内容区
/ End Header /

id的命名:

1)页面结构

容器: container
页头header
内容content/container
页面主体main
页尾footer
导航nav
侧栏sidebar
栏目column
页面外围控制整体佈局宽度wrapper
左右中left right center

(2)导航

导航nav
主导航mainnav
子导航subnav
顶导航nav
边导航sidebar
左导航leftsidebar
右导航rightsidebar
菜单menu
子菜单submenu
标题: title
摘要: summary

(3)功能

标志logo
广告banner
登陆login
登录条loginbar
注册register
搜索search
功能区shop
标题title
加入joinus
状态status
按钮btn
滚动scroll
标籤页tab
文章列表list
提示信息msg
当前的: current
小技巧tips
图标: icon
注释note
指南guild
服务service
热点hot
新闻news
下载download
投票vote
合作伙伴partner
友情链接link
版权copyright

四、注意事项::

1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写，除非一看就明白的单词。

五、CSS样式表文件命名

主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css