CSS3、JavaScript书写规范（三十）

最新推荐文章于 2022-01-29 10:03:16 发布

David凉宸

最新推荐文章于 2022-01-29 10:03:16 发布

阅读量199

点赞数 1

分类专栏：前端文章标签： css3 js

本文链接：https://blog.csdn.net/blue_698/article/details/113572974

版权

前端专栏收录该内容

45 篇文章 4 订阅

订阅专栏

CSS代码规范

语法

用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。
为选择器分组时，将单独的选择器单独放在一行。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
每条声明语句的 : 后应该插入一个空格。
为了获得更准确的错误报告，每条声明都应该独占一行。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

Positioning
Box model
Typographic
Visual

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的*内部（inside）*或者是不影响前两组属性，因此排在后面。

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #000;
  border: 1px solid #eee;
  border-radius: 3px;
  /* Misc */
  opacity: 1;
}

不要使用 `@import`

与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

使用多个 <link> 元素
通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

<!-- 使用链接元素 -->
<link rel="stylesheet" href="res.css">

<!-- 避免使用@imports -->
<style>
  @import url("res.css");
</style>

媒体查询（Media）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例。

.ele { ... }
.ele-title { ... }
.ele-content { ... }

@media (min-width: 480px) {
  .ele { ...}
  .ele-title { ... }
  .ele-content { ... }
}

带前缀的属性

当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。

/* 前缀属性 */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
          box-shadow: 0 1px 2px rgba(0,0,0,.5);
}

单行规则声明

对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。

这样做的关键因素是为了错误检测 – 例如，CSS 校验器指出在 183 行有语法错误。如果是单行单条声明，你就不会忽略这个错误；如果是单行多条声明的话，你就要仔细分析避免漏掉错误了。

/* 单行声明 */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* 多行声明，每行一个 */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(01.png);
}
.box           { background-position: 0 0; }
.box_title      { background-position: 0 -20px; }
.box_content   { background-position: 0 -40px; }

简写形式的属性声明

在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：

padding
margin
font
background
border
border-radius

大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。

MDN（Mozilla Developer Network）上一篇非常好的关于shorthand properties 的文章，对于不太熟悉简写属性声明及其行为的用户很有用。

/* 不好的例子 */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("01.jpg");
  border-radius: 3px 3px 0 0;
}

/* 好例子 */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("01.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

css模块化

为什么要模块化：

样式私有化
避免被其他样式文件污染
可复用

好处：

利于多人协同开发
便于扩展和重用
可读性，可维护性好

我们在写样式的时候最常见的方式就是为各个模块的根节点设置一个唯一的类名，然后采用样式的后代选择器的方式来实现的，比如下面这样：

<div class="container">
   <div class="txt"></div>
   <div class="txt2">
      <div class="txt3"></div>
   </div>
</div>

样式文件：

.container .txt{
    //样式代码
}
.container .txt2 {
//样式代码
}
.container .txt2 .txt3 {
    //样式代码
}

JavaScript编码规范

							编码形象 = 编码风格 +　编码规范

先看一下糟糕的编码形象：

function fn(){
    var age=18,name='张三';
    var say='hello everyone';
    if(age<=18&&name=='张三'){
        console.log(say+'I’m a boy')
    }
}
fn()

上方代码整体缩在了一起，缺乏规范意识，阅读体验很差，不忍直视

再来看一段良好的代码形象：

function fn() {
    var age = 18,
        name='张三',
        say='hello everyone';
    if(age<=18&&name=='张三'){
        console.log(say+'I’m a boy')
    }
};
fn();

上方的代码是不是感觉舒服多了？

由此可见养成一个良好的编码形象是至关重要的，而本文主要讲解的是基于JavaScript的编码形象，即基于JavaScript的编码风格和编码规范

编码风格

合理注释

// 不推荐的写法
var name = '张三';//代码和注释之间没有间隔
if (name) {
    /*
     *注释之前无空行
     *星号后面无空格
     */
}
// 推荐的写法
var name = '张三'; // 代码和注释之间有间隔
if (name) {
    /*
     * 注释之前有空行
     * 星号后面有空格
     */
}

合理间隔

// 不推荐的写法
var name='张三'; // 等号和两侧之间没有间隔
// if块级语句间没有间隔
if(name){
    console.log('hello');
}
// 推荐的写法
var name = '张三'; // 等号和两侧之间有间隔
// if块级语句间有间隔
if (name) {
    console.log('hello');
}

合理缩进

// 不推荐的写法：没有合理缩进
function getName() {
console.log('张三'); 
}
// 推荐的写法：合理缩进
function getName() {
    console.log('张三');
}

合理空行

// 不推荐的写法: 代码功能块之间没有空行
function getName() {
    var name = '张三';
    if (name) {
        console.log('hello');
    }
}
// 推荐的写法：代码功能块之间有空行
function getName() {
    var name = '张三';
    if (name) {
        console.log('hello');
    }
}

合理命名

// 不推荐的写法
var getName = '张三'; // 变量命名前缀为动词
// 函数命名前缀为名词
function name() {
   console.log('hello');
}
// 推荐的写法
var name = '张三'; // 变量命名前缀为名词
// 函数命名前缀为动词
function getName() {
   console.log('hello');
}

合理声明

// 不推荐的写法：函数在声明之前使用
getName();
function getName() {
    console.log('hello');
}
// 推荐的写法：函数在声明之后使用
function getName() {
    console.log('hello');
}
getName();

合理结尾

// 不推荐的写法：没有使用分号结尾
var name = '张三' 
var getName = function() {
    console.log('hello')
}
// 推荐的写法：使用分号结尾
var name = '张三';
var getName = function() {
    console.log('hello');
};

编码规范

对于编码规范，既然是规范，那我们就应该按照一定的规则来编写。随意编写违反编码规范的代码，可能会导致程序的出错和潜在的bug，因此其相对于编码风格来说应该更加严谨，也有人会把编码风格包含在编码规范之中。

下面就列举几个常见的实例代码：

比较参数

// 不推荐的写法：==和!=比较时会进行类型转换，应尽量避免使用
var num = 123;
if (num == '123') {
    console.log(num);
} else if (num != '321') {
    console.log('is not num');
}
// 推荐的写法：使用===和!==来进行比较
var num = 123;
if (num === '123') {
    console.log(num);
} else if (num !== '321') {
    console.log('is not num');
}

包裹if语句

// 不推荐的写法：if语句不用大话号包裹会出现潜在bug
var num = 123;
if (num === '123')
    console.log(num);
// 推荐的写法：if语句用大话号包裹
var num = 123;
if (num === '123') {
    console.log(num);
}

判断类型

// 不推荐的写法：用typeof来判断构造函数创建的对象
var str = new String('张三'); 
console.log(typeof str); // 'object'
// 推荐的写法：用instanceof来判断构造函数创建的对象
var str = new String('张三'); 
console.log(str instanceof String); // true

检测属性

// 不推荐的写法：使用undefined和null来检测一个属性是否存在
if (obj['name'] !== undefined) {
    console.log('name属性存在'); // 若obj.name为undefined时则会导致判断出错
}
if (obj['name'] !== null) {
    console.log('name属性存在'); // 若obj.name为null时则会导致判断出错
}
// 推荐的写法：使用in运算符来检测对象属性是否存在，使用hasOwnProperty方法来检测不包含原型链上的对象属性是否存在
if ('name' in obj) {
    console.log('name属性存在');
}
if (obj.hasOwnProperty('name')) {
    console.log('name属性存在');
}

css样式格式化

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
 
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
 
body {
    line-height: 1;
}
 
ol, ul {
    list-style: none;
}
 
blockquote, q {
    quotes: none;
}
 
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
 
table {
    border-collapse: collapse;
    border-spacing: 0;
}
html {
    font-size: 62.5%;
    color: #222;
}
 
::selection {
    background-color: #b3d4fc;
    text-shadow: none;
}
 
ul {
    margin: 0;
    padding: 0;
}
 
li {
    list-style: none;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
 
.clearfix:after {
    clear: both;
}
/* ===============
   自定义页面样式
   =============== */
body {
    font:1.2rem "simhei",Arial,Helvetica,sans-serif;
    line-height: 1.5;
    background-color: #f7f7f7;
}
 
a {
    color: #666;
    text-decoration: none;
}
 
a:hover, a:active {
    color: #0ae;
    text-decoration: underline;
}
/*公共类*/
.fl {
    float: left
}
.fr {
    float: right
}
.al {
    text-align: left
}
.ac {
    text-align: center
}
.ar {
    text-align: right
}
.hide {
    display: none
}