发表于： 2021-08-30 18:57:20
0 1730
项目开发规范
命名规范：
项目命名-全部采用小写的方式，以下划线分隔。
例，my_project_name ；
目录命名-有复数结构时，要采用复数命名法（下划线分割）
例，scripts，styles，images，student_image ；
模块命名-按照模块划分，同一story的内容放到一个文件夹下。
例，course/list，course/detail ；
JS文件命名- module.js ；
css，scss文件命名- module.css，module.scss ；
HTML文件命名- index.html,error_page.html ；
样式文件的class和id命名- class使用小写字母，以中划线分隔、id使用驼峰式命名、less和scss的（变量、函数、混合、placeholder）采用驼峰命名。
JS中的变量命名-
常量：全部大写；
变量：小驼峰；
方法、对象：小写加下划线；
类：大驼峰；
命名严格语义化。不可使用缩写，除非看上去一目了然的缩写。
常用的命名：
头部：header
内容：content / container
尾部：footer
导航：nav
侧栏：sidebar
栏目：column
整体布局：wrapper
上 / 下 / 左 / 右 / 中：top / bottom / left / right / center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips / tip
栏目标题：title
加入：join
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
图标: icon
注释：note
约定：
1，小驼峰法：变量一般用小驼峰法标识，除第一个单词之外，其他单词首字母大写。如： myStudentCount
2，大驼峰法：相比小驼峰法，大驼峰法把第一个单词的首字母也大写了，常用于类名，构造函数名，属性，如LoginCtrl
3，使用webstorm自带的格式化命令来增强代码辨识度
HTML：
a，文档类型声明：统一为<!DOCTYPE html> ； 编码统一为 <meta charset=“UTF-8”>
b，标签属性必须为小写字母，标签必须关闭，属性值由双引号包含
c，语义化html，如标题根据重要性用h（一个页面内只能有一个h1），段落标记用p，列表用ul或ol或dl，强调用strong
d，结构与样式分离，不使用行内样式<style>，而是用class来定义新的样式，css外联到<head></head>之间
CSS：
基本规则：
没有边框时不要写成border: 0; 写成border: none;类似情况同理；
不重复定义可以继承的值。如颜色、字体等；
尽量使用子代选择器，而不是后代元素选择器和相邻选择器，后者不利于修改和维护，用元素选择器的直接打死；选择符不要超过四级；不用id选择器，为js预留出来；
CSS3属性：transform、transition、animation、box-shadow、border-radius…，如果需要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后；
链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active；
项目实战：
项目中引用的bs样式，要充分利用起来，不要自己闷头写，什么都不管，只要自己的那个页面勉强能用就行；公共样式要提取出来，如通用的文字、宽度、颜色、margin、padding等。bs的命名风格，如btn-blue、bg-fff，争取用最少的代码来实现效果
页面太多，class不好命名的话，可以在每个html页面最外层的的div 加个当前页面名字的class 例如 login，子元素class就用父元素的名字后面加上-，如login-header，选择符不要超过四级；
列嵌套产生的问题：滚动条，注意清除15px，-15px的影响，一般是-15px，检查row；
元素点击事件遮挡问题，浮动产生的元素布局凌乱点不到，比较难查，出了问题检查列嵌套；
响应式768以下不准多次写多个阈值的media，很乱，在767时统一改掉能到320的
/* 1200px≤屏幕可见视口宽度*/
@media only screen and (min-width: 1200px) {}
/* 992px≤屏幕可见视口宽度<1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {}
/* 768px≤屏幕可见视口宽度<992px */
@media only screen and (min-width: 768px) and (max-width: 991px) {}
/* 768px<屏幕可见视口宽度*/
@media only screen and (max-width: 767px) {}
非后台不用table，用列嵌套模拟；
非背景图片不要写成背景；
写样式的时候要考虑到有些数据是动态绑定的，不要把样式写死，如用户状态“学习中”，虽然UI图上文字是竖排的三个字，也是一个整体，不要拆分成三个字，写成<p>进<p><p>行<p><p>中<p>
返回列表
评论