组织代码

可维护性

1. 网站元素位置移动尽量使用margin和padding属性，酌情使用position定位

关注点分离

1. CSS与HTML分离
2. 关注点分离：将页面划分为多个小块，考虑可否重用

渐进增强

平衡向后兼容性与最新的HTML和CSS特性；使用渐进增强意味着代码分层，每一层增强代码只会在响应特性被支持或被认为适当的情况下使用

Eg:

css
/*有的浏览器支持rgba,有的不支持*/
.text {
    background-color: #08AF8F;
/*当浏览器支持rgba时，则rgba会覆盖前面的备用颜色*/
    baackground-color: rgba(0,0,0,0.8);
}

即： 声明合适的后备代码

厂商前缀

前缀	作用
-webkit-	Safari、Chrome、Opera
-moz-	基于Mozilla浏览器，Firefox
-ms-	适用于微软IE

条件规则与检测脚本

根据浏览器是否支持某个CSS特性来提供完全不同的样式，则需要使用条件规则

html
@supports  (声明) {
    /*满足声明时应用的规则*/
}

创建结构化、语义化富HTML

id和class属性

使用正确符合规范命名方式

结构化元素

HTML5新增结构化元素

元素	作用
section	文档或应用的一个一般的区块，如网站的主页可以分成介绍、新闻条目、联系信息等区块
header	一个网页可以有任意数量的页眉，通常页眉包括网站标志、主导航、和其他全站链接、甚至搜索框
nav	仅对文档中重要的链接群使用nav
main	一个页面中只有一部分代表其主要内容,可以将这样的内容包含在main元素中
article	表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，就像聚合内容中的各部分
aside	附注栏
footer	页脚

建议
建议使用结构化元素且在结构化元素开始标签添加class类名方便后续工作