大前端的自动化工厂(2)—— SB Family

图片 1
原文链接:https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89f

养成好(dai)的(ma)习(gui)惯(fan)

我坦白我是标题党,SB只是SCSS-Bourbon的简写。

HTML

  1. 为每个 HTML 页面的第一行添加标准模式(standard mode)的声明,这样能够确保在每个浏览器中拥有一致的展现。
<!DOCTYPE html>
  1. 为页面添加语言属性
<!DOCTYPE html>
<html lang="zh-CN">
    <!-- ... -->
</html>
  1. 字符编码
    <meta charset="UTF-8">
  1. IE兼容模式
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  1. 尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

  2. 尽量不使用行内样式

  3. 属性的顺序:常用的属性靠前例如classidboolean类型的属性,不用赋值,放在最后。

一. SASS/SCSS

SASS,也称为SCSS,是CSS预编译语言的一种,常见的预编译语言还包括LESS,Stylus,除了语法风格之外它们之间没有什么太大的区别,从一种语言迁移到另一种语言只需要花半天通读一下文档就可以了。预编译语言为CSS提供了变量定义,函数定义,层级嵌套等等一系列扩展功能,使开发者更容易编写和管理项目中的CSS代码。笔者使用的是SCSS/SASS,因为相关工具库更全面一些,尽管名称偶尔会带来一些瑕疵(建议使用SCSS)。LESS在和Sublime集成时有一些小问题,可能是版本问题,stylus是新兴起的,开发生态并不完善。

CSS

  1. 用四个空格来代替制表符(tab)

  2. 为选择器分组时,将单独的选择器单独放在一行。

  3. 为了代码的易读性,在每个声明块的左花括号前添加一个空格。

  4. 声明块的右花括号应当单独成行。

  5. 为了获得更准确的错误报告,每条声明都应该独占一行。

  6. 所有声明语句都应当以分号结尾。

  7. 对于属性值或颜色参数,省略小于1的小数前面的0(例如,.5 代替 0.5;-.5px 代替 -0.5px)。

  8. 十六进制值应该全部小写,尽量使用简写的形式,例如,#fff 代替#ffffff。

  9. 为选择器中的属性添加双引号,例如,input[type="text"]

  10. 避免为0值指定单位,例如,用margin: 0;代替margin: 0px;

  11. 伪元素使用:的写法,如不需要兼容IE8及IE8以下浏览器,可使用::替换:的写法。例如::before替换:before

  12. 为每个需要控制的元素节点,添加对应的class进行控制,而不是使用元素选择器来进行控制,因为CSS的解释编译是从右往左进行的。

  13. 关于命名

    • class名称中只使用小写字符和减号-,—不使用下划线,也使用驼峰命名法—。
    • 文件命名同上
    • 使用有组织的或目的明确的名称,名称应当尽可能短,并且意义明确。例如:
    • 尽量全部用英语命名,不用英语中间参杂拼音,不会的单词可以Google。
  14. 使用LESS 或 SCSS 编写的时候不需要带前缀的属性声明,因为在对其进行编译的时候使用gulp-autoprefixer可自动为编译后的CSS加上对应的浏览器前缀。

建议css代码结构

/*单个选择器*/
selector {
    /*...*/
}

/*多个选择器,每个选择器都换行*/
selector1,
selector2,
selector3 {
    /*...*/
}

二. SCSS-Bourbon Family

图片 2

由于SCSS最初使用Ruby on Rails编写的,所以github上提供的安装方式几乎都是通过gem install安装的,但实际上在npm仓库里也可以找到对应的项目。另一方面,SCSS辅助工具库中的工具都是以_开头的,也就是说定义mixin的代码并不会被编译到产出的CSS文件中,可以放心使用。

【Bourbon】是笔者非常喜欢的工具包,首先它很符合渐进式开发的思想,每个插件只实现一个特定的功能,同时,它的所有插件都是自己开发的(ThoughtBot在收购后维护着整个Bourbon工具链),这又保证了工具的质量。

CSS模块化,以及预编译语言的使用(LESS OR SCSS)

  1. 定义浏览器统一的默认样式:Normalize.css

  2. 布局类通用模块

    1. grid module,网格模块
    2. media module,媒体类数据展示
    3. slide module,轮播模块
    4. list module,列表类模块
  3. 工具类模块,例如

    /*清除浮动*/
    .clear-fix {
        *zoom: 1;
    }
    .clear-fix::before,
    .clear-fix::after {
        display: table;
        clear: both;
        content: "";
    }
    .clearfix::after { 
        clear: both; 
    }
    
  4. LESS OR SCSS 的使用

    1. 使用构建工具,如gulp来进行编译。

    2. 编写样式的时候无需加浏览器前缀。
      使用gulp-autoprefixer
      browserslist


bourbon——函数库

♒ 通过npm install -g bourbon安装.

bourbon已经更新至5.1.0版本,官方文档对许多mixin并没有提供说明,建议使用前通读一下library目录里每一个独立的文件,其中的注释部分标明了该函数的用法。例如实用triangle( )函数来生成一个类,使其伪类包含一个指定尺寸和方向的三角形,又或者是使用tint( )shade( )方法让颜色按照半分比变亮或变暗,当然你也可以自行去扩展bourbon的基础功能。

SCSS代码为:

@import "bourbon";
.triangle-down {
    &::after{
     content:'';   
     @include triangle("down", 2rem, 1rem, #b25c9c);
    }
}

编译后的代码:

.triangle-down::after {
  content: '';
  border-style: solid;
  height: 0;
  width: 0;
  border-color: #b25c9c transparent transparent;
  border-width: 1rem 1rem 0;
}

CSS是可以诸如六边形等很多形状的,你完全可以在网上学习它们的实现方法,然后将其编写为扩展的mixin加入到自己的常用工具箱中。

JS

  1. 命名

    变量、函数参数:使用Camel(驼峰)命名的方式。

    var isLogin = function(accountId) {
        // do something
    };
    

    常量:使用 全部字母大写,单词间下划线分隔 的命名方式。

    var GLOBAL_CONFIG = {};
    

    函数:使用 Camel命名法。

    function testFunc() {
        // do something
    }
    

    类、构造函数、枚举变量 使用 Pascal(帕斯卡)命名法

    // class
    function TestClass() {
        // do something
    }
    
    // 构造函数
    function TestClass(text) {
        this.text = text;
    }
    
    // 枚举变量:枚举属性全部采用大写加下划线的方式
    var Status = {
        DEFAULT: 0,
        NEW: 1,
        UPDATE: 2,
        READONLY: 3
    };
    

    boolean类型的变量使用 ishas 开头

    var isLoaded = true;
    var hasPermission  = false;
    

    jquery对象以$开头

    var $elem = $(selector);
    
  2. 注释

    单行注释
    必须独占一行。// 后跟一个空格,缩进与下一行被注释说明的代码一致。

    多行注释 避免使用 /*...*/ 这样的多行注释。有多行注释内容时,使用多个单行注释。

    文档化注释 使用 /**...*/ 形式的块注释中。

    /**
     * 函数描述
     *
     * @param {string} p1 参数1的说明
     * @param {string} p2 参数2的说明,比较长
     *     那就换行了.
     * @param {number=} p3 参数3的说明(可选)
     * @return {Object} 返回值描述
     */
    function foo(p1, p2, p3) {
        var p3 = p3 || 10;
        return {
            p1: p1,
            p2: p2,
            p3: p3
        };
    }
    

本文由金沙官网线上发布于Web前端,转载请注明出处:大前端的自动化工厂(2)—— SB Family

您可能还会对下面的文章感兴趣: