开胃小菜之前端开发规范🍖🍖

2021-11-05 727 阅读3分钟

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

开发前的开胃小菜之前端开发规范🍖🍖

想要代码好看，想要领导加薪，我们先去掌握开发规范。
我们可以将开发规范比作和女朋友之间的约定，遵守约定，你女朋友就会对你好，代码也是一样。

与文件的约定🤗

命名规范

html, css, js, images文件均归档至约定的目录中;
html文件命名: 英文命名, 后缀.html或.htm. 同时将统一页面文件放于同目录中, 以方便后端添加功能时查找对应页面;
css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;
Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名。

目录规范

按照静态文件，html，css，js文件夹夹目录，且入口文件必须为index.html
文件夹命名必须符合规范，列如静态命名为static等。

与HTML的约定😎

Class与ID的命名

我们应该用功能或者内容来对class命名

<div class="footer"></div> 
<!-- 这是使用尾部来命名class -->

class与id命名的字母需要小写，且多个单词组成时需要用-隔开

<div class="f-div"></div>

属性的书写顺序

我们需要按特定的顺序来对元素加上属性

id
class
name
data-xxx
src, for, type, href
title, alt PS：属性的定义统一用双引号来定义

<a id="" class=""  href="###"></a>

与CSS的约定🥳

声明规范

选择器分组时，保持独立的选择器占用一行
声明块的左括号 { 前添加一个空格
声明块的右括号 } 应单独成行
声明语句中的 : 后应添加一个空格
声明语句应以分号 ; 结尾
一般以逗号分隔的属性值，每个逗号后应添加一个空格
rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，紧密相连
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替-0.5px）
十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;

.footer,
.footer-right,
.footer-left {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

声明顺序相关的属性为一组，然后分顺序编写

定位
盒子模型
排版
视觉设计

.footer {
 /* 定位 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* 盒子模型 */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;

  /* 排版 */
  line-height: 1.5;
  text-align: center;

  /* 视觉设计 */
  background-color: #ffffff;
}

与javascript的约定 😗

变量命名

使用驼峰命名法
私有属性，私有变量与方法以下划线开头
常量全部使用大写字母

函数命名

使用驼峰命名法