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，）

书写规范

---

使用CSS缩写属性

/*CSS有些属性是可以缩写的，比如padding,margin,font等等*//*不规范示例*/            .list-box {                    border-top-style: none;                    font-family: serif;                    font-size: 100%;                    line-height: 1.6;                    padding-bottom: 2em;                    padding-left: 1em;                    padding-right: 1em;                    padding-top: 0;                }/*规范示例*/            .list-box {                    border-top: 0;                    font: 100%/1.6 serif;                    padding: 0 1em 2em;                }

---

去掉小数点前的”0”

/*不规范*/     font-size: 0.8em;/*规范*/      font-size: .8em;

---

简写命名

/*简写类名的前提是要让你看懂你的命名才能简写*//**/    .navigation {        margin: 0 0 1em 2em;    }    .atr {        color: #93c;    }/**/    #nav {        margin: 0 0 1em 2em;    }    .author {        color: #93c;    }

---

16进制颜色代码缩写

/*有些颜色代码是可以缩写的，尽量缩写，提高用户体验为主*//*不规范*/    color: #eebbcc;/**/    color: #ebc;

---

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。2.不建议使用“_”下划线来命名CSS选择器，为什么呢？    - 输入的时候少按一个shift键(简直想笑了)；    - 浏览器兼容问题(比如使用_tips的选择器命名，在IE6是无效的)    - 能良好区分JavaScript变量命名(JS变量命名是用“_”)  /*不规范"_"*/    maintitle {        color: #e3c;    }    main_title {        color: #e3c;    }/*规范"-"*/    main-title {        color: #e3c;    }

---

不要随意使用id

id在JS是唯一的，不能多次使用id应该按需使用，不能滥用

---

为选择器添加状态前缀

/*有时候可以给选择器添加一个表示状态的前缀，让语义更明了*//**/    .withdrawal {        background-color: #ccc;    }/*规范表示状态*/    .is-withdrawal {        background-color: #ccc;    }

---

CSS命名规范（规则）

---

常用CSS命名规则

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

注释的写法：

/*Header*/    内容区/*End Header*/

CSS样式表文件命名

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

注意事项
1.一律使用小写加中划线；
2.尽量用英文（抚额，不用英文用中文么）；
3.尽量不缩写，除非一看就明白的单词；