CSS架构设计

CSS架构设计

作为一名合格的前端开发，稳固可靠的css代码已经是一个必备的基础技能，从一开始的css代码累赘，直到sass/less等css扩展语言诞生，css也开启了不一样的道路，此篇文章适合对sass/less等css拓展语言的了解并且习惯使用面向过程的编写方式的开发者学习，以下以sass为例。

sass是一款css的辅助工具，主要以编程的开发方式应用到css中去，来提高css代码的管理和开发。

历史

在sass/less等语言诞生之前，开发者总会遇到一些问题，css上的一系列问题，比如，写两个按钮的类名，他们具有共同的特点，字体颜色，边框，间距等等，有些人会这样写：

    .btn-theme{
        border: 1px solid green;
        padding: 12px;
        width: 100px;
    }
    .btn-small{
        border: 1px solid green;
        padding: 12px;
        width: 80px;
    }

有些人会这样写：

    .btn-theme, .btn-small{
        border: 1px solid green;
        padding: 12px;
    }
    .btn-theme{
        width: 100px;
    }
    .btn-small{
        width: 80px;
    }

然而，无论对于哪一种，都存在着的弊端，我希望我们有自己的原则，就是在不写重复代码的同时尽量的不去触碰共同的特点，假如用sass，完全可以继承的方式这样写：

    .btn{
        border: 1px solid green;
        padding: 12px;
    }
    .btn-theme{
        @extend .btn
        width: 100px;
    }
    .btn-small{
        @extend .btn
        width: 80px;
    }

实践

这样的好处是什么呢？我们可以完全的独立开一个基类，在编写其他按钮样式的时候，都可以在不影响其他按钮的同时高效的开发，在一个项目开发中，任何的html元素，如button，input，image，checkbox，你都可以编写一个适合ui的基类，从而减少今后带来的不必要麻烦。例如，现在给我一个项目，开始编写css，首先我可能会这样做：

    /* base.scss */

    /* button */
    .base_button{
        padding: 12px;
        border: 1px solid red;
    }
    /* input */
    .base_input{
        padding: 0 12px;
        line-height: 30px;
    }
    /* image */
    .base_mage{
        ...
    }
    /* checkbox */
    .base_checkbox{
        ...
    }

然后我们把我们的设计稿切块，能切成哪些块呢？这时候应该普及一个知识点，BEM：它是由Yandex团队提出的一种CSS Class 命名方法，简单来说，就是 模块-元素-修饰符 ，因此我们可以拆分的块就很明确：

1. 导航栏块 (nav_)
2. 弹窗块 (popover_)
3. 对话框块 (dialog_)
4. 滑动块 (slide_)
5. …

切完块之后，分元素，拿弹窗块举个例子，可以围绕html的语义化拆分为 header-body-footer ，因此，一个完整弹窗样式基本搭建完成：

    .popver__header{}
    .popver__body{}
    .popver__footer{}

上面使用两个下划线，我希望他也是一个特殊的类，不直接使用，只用作继承，外面可以加多一层，实现对拆分块的引用

    /* popver.scss */

    .popver_container{
        .popver_header{
            @extentd .popver__header
        }
        .popver_body{
            @extentd .popver__body
        }
        .popver_footer{
            @extentd .popver__footer
        }
    }

这时候我们会发现，我们之前写的基类呢？作用在哪里？在一个 body 里面，我们需要插入很多的html元素，此时，就可以把基类继承在body里面各自对应的元素里，并同时加入特殊点，例如：

    .popver__input{
        width: 200px;
        color: red;
        @extentd base_input
    }
    .popver_body{
        @extentd .popver__input
        @extentd .popver__body
    }

这样，我们基本完成了一个项目，对每一个基类的编写，再到模块的拆分，再到特殊类的编写、继承，以及对基类的继承。

拓展

以上，我们基本实现了一个项目css基础设计和搭建，刚刚我们只是讲了BEM当中的B-E，我们应该如何把M利用起来，此时，最简单的方式就是借用sass的编程特性，举个例子：
在上面的弹窗中，body里面的input宽度可能是不可控的，即可能在不同的弹窗中会有不同的宽度，高度或则间距，这种我们就可以把它归为元素的修饰，因此，我们可以这样写：

    /* 数组变量 */
    $inputWidth: 200 300 400;
    .popver__input{
        width: 200px;
        color: red;
        @extentd base_input
    }
    .popver_body{
        @each $number in ($inputWidth){
            .popver_input_#{$number}{
                @extentd .popver_input
                width: $number + px;
            }
        }
        @extentd .popver__body
    }

这样，我们就实现了popver_input_200，popver_input_300，popver_input_400类名的编写，我们只需要在变量名inputWidth后增加一个值即可，对高效开发的实现同时具备一定的语义化。

结语

一个完整的项目的css基础搭建从设计到完成，主要的目的在于思考：如何从维护性，效率问题上解决问题。然而，更多的开发技巧，应该从深入的学习sass/less开始，在项目开发中不断的去实践。