10. 准备一个所有页面都要引用的样式文件common.css，里面定义好整个网站都要用到的风格，如普通文字的字体、字大小、字颜色、字行距、外边距，然后在定义其他样式时尽量不要再去定义字体、字大小、字颜色、字行距、外边距，以利于网站网络的统一。

11. 考虑到cms内的文章编辑器内编辑文章时会对正文字体进行大小设置，所以建议前端页面的样式定义里不要（在全局上）对 body,textarea,select,button,之外的标签重新设置字体大小；并且建议不要（在全局上）对body,textarea,td之外的标签重设行高。考虑到和bootstrap等常用UI框架的兼容，也不要设置（在全局上）ul标签的margin-bottom，margin-top的值。

12. 综上common.css内最前面部分样式设置可以如下，（仅示例，请视情况修改或扩展）：

* { box-sizing: border-box; }
html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background-color:#fff; color: #333;font-family: Microsoft YaHei, "微软雅黑", Microsoft JhengHei, "华文细黑", STHeiti, MingLiu;}
a { color: #06a; text-decoration: none; }
a:hover { color: #f90; text-decoration: underline; }
a:focus { outline: thin dotted; }
body, q, iframe, form, 
ul, li, dl, dt, dd{ margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;}
img { border: 0; max-width: 100%; -ms-interpolation-mode: bicubic; }
body, td, textarea{ word-break: break-all; line-height:1.5;}
button, input, select, textarea {margin: 0; font-size: 100%; font-family:inherit;}
div, p, table, th, td { line-height:inherit;}
textarea, p { *word-break: break-all; word-wrap: break-word;}
code,kbd,pre,samp {	font-family: monospace, Consolas, "Courier New";}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio,canvas,progress,video { display: inline-block; vertical-align: baseline;}
audio:not([controls]) { display: none; height: 0;}
[hidden],template { display: none;}

.fl{ float:left; }
.fr{ float:right; }
.clearfix:after { content: ""; clear: both; display: table; height: 0; }
.justify {text-align: justify;text-justify: inter-ideograph;}

13. 建议页面制作时，首先在在Chrome45以上版本、IE9.0以上版本及Firefox52以上版本测试，然后再测试IE8、Safari11.1等浏览器，至少要保证在Chrome最新版本及IE9、IE11、Edge15这四个浏览器内正常显示（符合预期效果，页面布局无错位、载入及交互时无JS错误……）。

14. 页面布局，编写html时尽量不要对元素进行ID命名， 亦即尽量少使用css中的ID选择器， 对元素ID命名主要用在编写js脚本时通过ID获取页面元素进行，

15. 经验：使用浮动布局时，注意清除浮动、及定义浮动元素宽度，可以减少由浮动引发的潜在bug。