千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 > html5视频教程  >  HTML开发中有效规范 CSS 的命名和书写

HTML开发中有效规范 CSS 的命名和书写

时间:2018-01-22 15:38:02     来源:千锋视频教程 作者:余老师

  作为前端的设计人员,对于CSS的接触,就像吃饭一样,css对于现在网页很重要,要不怎么经常有人说用css来制作网页呢,理所当然,CSS命名规范也十分重要,规范它的命名有利于代码的语义和团队开发。

html5效果

  在这里整理了Web前端开发中的各种CSS规范,包括文件规范、命名规范、书写规范等。

  一、文件规范

  1、文件均归档至约定的目录中如分页pagination.css

  2、文件名必须由小写字母、数字、中划线组成, 单个CSS文件避免过大(建议少于300行)

  二、命名规范

  规则命名中,不允许使用大写字母,避免使用中文拼音,应该采用更简明有语义的英文单词进行组合,注意缩写,但是不能盲目缩写,不允许通过1、2、3等序号进行命名,尽可能提高代码模块的复用,样式尽量用组合的方式

  2、属性编写顺序

  显示属性:display/list-style/position/float/clear …

  自身属性(盒模型):width/height/margin/padding/border

  文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…

  三、书写规范

  每个声明结束都应该带一个分号,不管是不是最后一个声明; CSS文件中的所有的代码都应该小写; 除了重置浏览器默认样式外,禁止直接为html tag添加css样式设置;

  每一条规则应该确保选择器唯一,禁止直接为全局.nav/.header/.body等类设置属性;

  四、代码性能优化

  选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置,禁止在css中使用*选择符, 0后面不需要单位,比如0px可以省略成0,0.8px可以省略成.8px, 如果可以,颜色尽量用三位字符表示,例如#AABBCC写成#ABC , 在保持代码解耦的前提下,尽量合并重复的样式。

  五、其他规范

  不要轻易改动全站CSS和通用CSS库。改动后,要经过全面测试。绝对不要在CSS中使用”*”选择符,背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按照模块、业务、页面来划分均可。

  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2层、南区服务楼2层
    咨询电话:400-186-9990 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、大数据开发培训、VR/AR混合
    现实培训、Python培训、Linux云计算培训、软件测试培训、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区)0755-86660670-801(大学城校区)
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android培训、iOS培训
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训、好程序员
  • 郑州校区地址:郑州市金水区纬五路21号河南教育学院综合楼(经纬中学楼)7/8层
    咨询电话:0371-55191750 400-186-9990
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 大连校区地址:辽宁省大连市甘井子区软件园路2号东软信息学院B5座一楼
    咨询电话:0411-39026086 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、UI交互设计培训、Android课程培训、iOS课程培训
  • 武汉校区地址:武汉市光谷大道61号智慧园21号楼2层
    咨询电话:027-65523826
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:028-83178771
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 青岛校区地址:青岛市市南区金坛路17号青岛职业技术学院南校区实训楼A4层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:023-68883009
    面授课程:JavaEE+云数据课程培训
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513010/85513210
    面授课程:JavaEE+云数据课程培训
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号科技创新城19号楼五楼
    咨询电话:15663846969
    面授课程:全栈HTML5+培训
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱