绅士狗提示到本节是接《微信小程序开发介绍系列一》,如果没有看过,可以先去查找看下,点击查看系列一
本节将介绍样式文件的命名规范,一个好的命名本身就自带注释功能,给后期的修改或维护带来很多便利,这是作者从业多年的心得,所以作者在公司的项目中都一直在贯彻这个思想,所有开发人员在项目启动前都会进行一次代码规范培训,所谓磨刀不误砍柴工,一样的道理。
这里假设你已经知道了wxml和wxss,如果不熟悉,可以去http://www.w3school.com.cn学习下,这个网站非常nice,很基础的知识,作者经常访问,这里也非常感谢谢网站的运营方,提供了这么好的一个工具。
首先我们介绍的是命名规范,
样式必须要起个名字,名称只能是英文、下划线”_”或中杆”-”开头,然后组合字母、数字、下划线”_”或中杆”-”。
名称尽量使用英文单词或英文单词组合的方法,采用小写,两个单词直接用中杆”-”连接,比如” container”,” content-header”, 这么的命名意思非常直观。
不要随意使用id,id在js中需要是唯一的,不能多次使用,但是class可以多次重复使用。
命名简写,有些时候,通过简写同样可以达到意思明确的时候建议使用简写,比如.navigation {}, 可以简写为 .nav{}.
层级关系,有时为了限定样式使用范围,可以添加层级关系,比如: “. container . content-header .image-slider”, 这个样式中的image-slider只在上面这中嵌套的时候才生效,否则就不生效。这种用法在对有些通用的样式增加单独样式时非常有用。
页面结构,列举了页面常见的一些,适合大部分项目,如下:
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center
样式注释,推荐样式文件中加入注释,这是一个非常好的习惯,比如:
/* header */
内容区
/* end header */
通过本篇的介绍,相信应该在接下来的样式开发中有所改进。