分享人:赖骏锋
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
规范,一个优秀的公司必然有一个优秀的团队,一个优秀的团队必然要有一个好的规范来约束和执行。国内基本各大互联网公司的前端都有自己的开发规范,但总的宗旨基本都是:代码简、易维护、性能高。对于一个大型项目经常会多人协作,这时必须要有一个好的规范才能顺利便捷地进行下去。
总而言之:不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。
基本准则
符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.
html规范
页面的第一行添加标准模式声明!DOCTYPEhtml
代码缩进:tab键设置四个空格(通常在软件右下角设置相应空格大小)
html中除了开头的DOC和'UTF-8'或者head里特殊情况可以大写外,其他都为小写,css类都为小写
建议为html根元素指定lang属性,从而为文档设置正确的语言lang="zh-CN"
不同doctype在不同浏览器下会触发不同的渲染模式()
非特殊情况下样式文件必须外链至(
… )之间;非特殊情况下JavaScript文件必须外链至页面底部尽可能减少div嵌套.
在页面中尽量避免使用style属性,即style="…";写在相应的样式文件中
对于属性的定义,确保全部使用双引号,绝不要使用单引号
背景图片请尽可能使用sprite技术,减小http请求
给区块代码及重要功能(比如循环)加上注释,方便后台添加功能。
不要使用@import,与<link>标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。
CSS书写顺序
显示属性:display/list-style/position/float/clear…
行高:line-height
文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
其他:cursor/z-index/zoom/overflow
CSS3属性:transform/transition/animation/box-shadow/border-radius
排版规范
如果是在html中写内联的css,则必须写成单行
每一条规则的大括号{前后加空格
属性名冒号之前不加空格,冒号之后加空格
每一个属性值后必须添加分号;并且分号后空格
多个selector共用一个样式集,则多个selector必须写成多行形式
规则书写规范
使用单引号,不允许使用双引号
每个声明结束都应该带一个分号,不管是不是最后一个声明
除16进制颜色和字体设置外,CSS文件中的所有的代码都应该小写。
除了重置浏览器默认样式外,禁止直接为htmltag添加css样式设置
每一条规则应该确保选择器唯一,禁止直接为全局.nav/.header/.body等类设置属性
class命名
规则命名中,一律采用小写加中划线的方式,不允许使用大写字母或_
命名避免使用中文拼音,应该采用更简明有语义的英文单词进行组合+
不允许通过1、2、3等序号进行命名;避免class与id重名
class用于标识某一个类型的对象,命名必须言简意赅
尽可能提高代码模块的复用,样式尽量用组合的方式
规则名称中不应该包含颜色(red/blue)、定位(left/right)等与具体显示效果相关的信息。应该用意义命名,而不是样式显示结果命名
问题1:class命名有什么常用方式?
问题一:原子类的优劣?
为什么要拆分样式表,怎么拆分样式表?
BY : 赖骏锋